前端处理:Vue+Axios
Flash:后端框架,默认端口 5000
需要注意:get与post方法,对应的传参与取参方式
--------------
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head><body><div id="app"><button @click="getClick">get请求</button><button @click="postClick">post请求</button></div><script>const app = Vue.createApp({methods: {getClick() {axios.get("http://127.0.0.1:5000/user?id=1&type=10").then(res => {console.log(res.data)})},postClick() {let df = new FormData()df.append("id", 12)df.append("type", 11)axios.post("http://127.0.0.1:5000/user", df).then(res => {console.log(res.data)})}}})app.mount("#app")</script> </body></html>
后端内容:
from flask import Flask from flask import make_response #通过此内容向前端返回后端结果 from flask_cors import CORS #跨域 from flask import request #获取前端数据 app=Flask(__name__) #创建Flask对象 CORS(app,supports_credentials=True) #配置跨域# 路由处理 @app.route("/user",methods=["get","post"]) def user():if request.method=="GET": #get接口,从 args 中取参id=request.args.get("id")type=request.args.get("type")data={"id":id,"type":type,"info":"server rtn"}return make_response(data)else:id = request.form.get("id") #post接口,从 form 中取参type = request.form.get("type")data = {"id": id,"type": type,"info": "server rtnXX"}return make_response(data)if __name__=="__main__":app.run()
>> 上面使用的是:app.run 的方式来启动 服务,
若需要在命令行中启动python, 可通过如下指令 来执行
此方法需独立安装 Flask, 在项目中安装 Flask 后,在命令行中是找不着 Flask 的
flask run
同时,对于主文件名称有约束
>> 处理: $env:FLASK_APP = "main.py"
>> 修改默认端口:flask run --port = 8000
>> 判断端口是否被占用: netstat -aon|findstr 8000
>> 关闭占用端口的程序:taskkill /pid XXX -t -f