簡單的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='123456',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>