首先,我們需要在Vue中創建一個表單。我們可以使用Vue-Formulate插件更方便地創建表單。以下是一個使用Vue-Formulate創建一個簡單表單的例子:
<template><formulate-form v-model="formValues" @submit.prevent="handleSubmit"><formulate-input name="name" label="姓名" /><formulate-input name="age" type="number" label="年齡" /><formulate-input name="email" type="email" label="郵箱" /><formulate-input name="password" type="password" label="密碼" /><formulate-input type="submit" label="提交" /></formulate-form></template>
接下來,我們需要使用axios將表單提交給Flask后端,以便在后端處理表單數據。下面是一個從Vue中使用axios提交表單數據到Flask的示例:
<script>import axios from 'axios' export default { data () { return { formValues: { name: '', age: '', email: '', password: '' } } }, methods: { async handleSubmit () { const result = await axios.post('http://localhost:5000/submit_form', this.formValues) console.log(result.data) } } } </script>
在Flask中,我們可以使用Flask-CORS插件來允許跨域請求,并使用"request.data"來獲取前端發送的表單數據。以下是一個在Flask中處理Vue表單數據的簡單示例:
from flask import Flask, request from flask_cors import CORS app = Flask(__name__) CORS(app) @app.route('/submit_form', methods=['POST']) def submit_form(): data = request.data print(data) return '表單已提交。' if __name__ == '__main__': app.run()
現在,我們已經完成了Vue和Flask之間獲取Vue表單數據的過程。通過這種方法,我們可以輕松地獲取和處理Vue表單數據,在Flask后端處理表單數據。
上一篇mysql升序默認什么
下一篇mysql千萬級數據量