简单的vue.js的表单提交数据至flask然后数据库入库,再将表里面的数据展示在网页

 1 from flask import Flask,request,jsonify,redirect,url_for
 2 """
 3 导入配置文件
 4 DEBUG=True
 5 JSON_AS_ASCII=False
 6 """
 7 from Config import Config
 8 app = Flask(__name__)    # 初始化
 9 app.config.from_object(Config)
10 
11 # 连接数据库
12 def conn_mysql():
13     from pymysql import connect
14     conn = connect(host=‘localhost‘,port=3306,user=‘root‘,password=‘123456‘,database=‘users‘,charset=‘utf8‘)
15     cur = conn.cursor()
16     return conn,cur
17 
18 # 插入数据库
19 def insert_mysql(sql):
20     conn,cur = conn_mysql()
21     cur.execute(sql)
22     conn.commit()
23 
24 # 查询数据库
25 def find_mysql(sql):
26     conn,cur = conn_mysql()
27     cur.execute(sql)
28     result = cur.fetchall()
29     list = []
30     for i in result:
31         list.append(i)
32     return list
33 
34 @app.route(‘/reg‘,methods=[‘post‘])
35 def register():
36     username = request.form.get(‘username‘)
37     email = request.form.get(‘email‘)
38     print(username,email)
39     sql = "insert into user values (0,\‘%s\‘,\‘%s\‘)"%(username,email)
40     insert_mysql(sql)
41     return redirect(url_for("user_list"))
42 
43 @app.route(‘/msglsit‘)
44 def user_list():
45     sql = "select * from user"
46     result = find_mysql(sql)
47     return jsonify(result)
48 
49 
50 if __name__ == ‘__main__‘:
51     app.run()

<template>
  <div>
    <form action="http://127.0.0.1:5000/reg" method="POST">
      用户名:<input type="text" name="username" />
      邮箱:<input type="text" name="email" />
      <button type="submit">提交信息</button>

    </form>
  </div>
</template>

<script>
export default {
  name: ‘Form1‘
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>