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

一.先在数据库中创建表格

在mysql中建users库并建立一个含有ID,username,email三个字段的user表

二.去vue的组件里面写页面的表单代码,注意form标签里的action需要暂时先空着,等flask的代码写完后填入flask的链接地址

然后将这个vue.js需要在index.js里面配置

三.用python实现连接数据库,获取表单数据并入库

四,将写入到数据库表格的内容写入到网页中,在网页展示

别忘了在vue的form标签的action属性加入flask的地址

 效果展示:

入库的过程是一个隐性操作,它使用了url_for跳转到了msglist里面进行数据库查询操作,网页展示的就是查询到的列表转成json格式的结果

代码附下:

 from flask import Flask,request,jsonify,redirect,url_for
 """
 导入配置文件
 DEBUG=True
 JSON_AS_ASCII=False
 """
 from Config import Config
 app = Flask(__name__)    # 初始化
 app.config.from_object(Config)

 # 连接数据库
 def conn_mysql():
     from pymysql import connect
     conn = connect(host='localhost',port=3306,user='root',password='',database='users',charset='utf8')
     cur = conn.cursor()
     return conn,cur

 # 插入数据库
 def insert_mysql(sql):
     conn,cur = conn_mysql()
     cur.execute(sql)
     conn.commit()

 # 查询数据库
 def find_mysql(sql):
     conn,cur = conn_mysql()
     cur.execute(sql)
     result = cur.fetchall()
     list = []
     for i in result:
         list.append(i)
     return list

 @app.route('/reg',methods=['post'])
 def register():
     username = request.form.get('username')
     email = request.form.get('email')
     print(username,email)
     sql = "insert into user values (0,\'%s\',\'%s\')"%(username,email)
     insert_mysql(sql)
     return redirect(url_for("user_list"))

 @app.route('/msglsit')
 def user_list():
     sql = "select * from user"
     result = find_mysql(sql)
     return jsonify(result)

 if __name__ == '__main__':
     app.run()

这是falsk的配置文件

下面是vue.js的代码

<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>