目的：将用户在前端表单中输入的数据提交到后台
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
</head>
<body>
<div id="app">
<el-form label-width="80px" :model="formData">
<el-form-item label="活动名称" style="width:200px;">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select placeholder="请选择活动区域" v-model="formData.area">
<el-option label="上海" value="上海"></el-option>
<el-option label="北京" value="北京"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动时间">
<el-date-picker type="date" placeholder="选择日期" style="width: 200px;" v-model="formData.date1" value-format="yyyy-MM-dd"></el-date-picker>-
<el-time-picker placeholder="选择时间" style="width: 200px;" v-model="formData.time1" value-format="HH:mm:ss"></el-time-picker>
</el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="formData.switch"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="formData.activityNature">
<el-checkbox label="1">美食/餐厅线上活动</el-checkbox>
<el-checkbox label="2">地推活动</el-checkbox>
<el-checkbox label="3">线下主题活动</el-checkbox>
<el-checkbox label="4">单纯品牌曝光</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="formData.resource">
<el-radio label="1">线上品牌商赞助</el-radio>
<el-radio label="2">线下场地免费</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="formData.activities"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
formData: {
name: "轰趴",
area: "北京",
date1: "",
time1: "",
switch: true,
activityNature: [],
resource: "",
activities: "",
a: 1
}
},
methods: {
onSubmit() {
// console.log(JSON.stringify(this.formData))
// //处理Post请求
// axios.post(
// "http://192.168.0.120:5000/test", {
// ID: this.formData.a,
// formData: JSON.stringify(this.formData),
// }
// )
// .then(function(response) {
// let data = response.data
// console.log(data)
// })
// .catch(function(error) {
// // console.log(error)
// });
axios({
url: "/test",
method: "post",
baseURL: 'http://192.168.0.120:5000',
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/json'
},
data: {
ID: this.formData.a,
formData: JSON.stringify(this.formData),
},
timeout: 2000,
})
.then(function(response) {
let data = response.data
console.log(data)
alert(data.msg)
})
.catch(function(error) {
// console.log(error)
});
this.formData.a += 1
}
},
})
</script>
</body>
</html>后台：
import time,json
from flask_sockets import Sockets
from gevent import monkey
from flask import Flask, jsonify,request
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler
from flask_cors import CORS
monkey.patch_all()
app = Flask(__name__)
sockets = Sockets(app)
CORS(app, supports_credentials=True)
@app.route('/test', methods=["POST","GET"])
def hello():
response_str = request.get_data(as_text=True)
data = json.loads(response_str, strict=False)
print(data)
return jsonify(msg="ok")
if __name__ == "__main__":
server = pywsgi.WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)
print('server start')
server.serve_forever()