服务器端：
# 开发人员: hanhan丶
# 开发时间: 2020/11/12 14:36
import flask, json #Flask 一个轻量级的web框架
from flask_corsimport *
server = flask.Flask(__name__) # __name__代表当前的python文件。把当前的python文件当做一个服务启动
CORS(server, supports_credentials=True) # 解决跨域
@server.route('/login', methods=['post'])
# 第一个参数就是路径,第二个参数支持的请求方式，不写的话默认是get，
# 加了@server.route才是一个接口，不然就是一个普通函数
def login():
user = flask.request.values.to_dict()
for itemin user:
items = json.loads(item)
loginName = items.get("loginName")
password = items.get("password")
if loginNameand password:
res = {"code":0, "msg":"请求成功", "data": {"loginName": loginName, "password": password}}
else:
res = {'msg':'调用失败'}
# json.dumps 序列化时对中文默认使用的ascii编码，输出中文需要设置ensure_ascii=False
return json.dumps(res, ensure_ascii=False)
if __name__ =='__main__':
# port可以指定端口，默认端口是5000
# host默认是服务器，默认是127.0.0.1
# debug=True 修改时不关闭服务
server.run(debug=True)
前端：
<template>
<div>
账号：<input type="text" v-model="loginName">
<br>
密码：<input type="text" v-model="password">
<br>
<br>
<br>
<button @click="btn">点击</button>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
loginName: "",
password: ""
};
},
methods: {
getDate() {
axios({
headers: {
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
},
url: "http://127.0.0.1:5000/login",
method: "post",
data: {
loginName: this.loginName,
password: this.password
}
}).then(res => {
console.log(res);
});
},
btn() {
this.getDate();
}
}
};
</script>
<style>
</style>
