赞
踩
目的:将用户在前端表单中输入的数据提交到后台
前端:
- <!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()

Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。