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

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

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

  1. jquery.form.js 让表单提交更优雅

    jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...

  2. springmvc下js控制表单提交(表单提交前检验,提交后获取json返回值)

    这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...

  3. 【转载】[JS]让表单提交返回后保持在原来提交的位置上

    有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...

  4. js 在表单提交前进行操作

    最近在写页面的时候,需要手动写一些在表单进行提交前的验证操作,正好看到了2种阻止表单提交的方法,可以进行一些逻辑处理 方法一:使用return false 原生js写法: <form id=&q ...

  5. js阻止表单提交

    <!DOCTYPE html><html><head>    <title>Simple Login Form</title>    < ...

  6. Vue.js:表单

    ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...

  7. 利用JS 阻止表单提交

    情景一:不存在Ajax异步操作 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交. 2 相关技术点: fo ...

  8. js实现表单提交submit(),onsubmit

    通常表单的提交有两种方式,一是直接通过html的form提交,代码如下: <form action="" method="" id="forms ...

  9. 使用Jquery.form.js ajax表单提交插件弹出下载提示框

    现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...

随机推荐

  1. hdu-5583 Kingdom of Black and White(数学,贪心,暴力)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5583 Kingdom of Black and White Time Limit: 2000/1000 ...

  2. 设计模式 之 《建造者模式(Builder)》

    #ifndef __BUILDER_MODEL__ #define __BUILDER_MODEL__ #include <string> #include <vector> ...

  3. Arc077_E Guruguru

    传送门 题目大意 有$m$个点编号从小到大按照顺时针编成了一个环,有一枚棋子,每次移动可以选择顺时针移动到下一个或者直接移动到编号为$x$的点,现在有$n-1$次数操作,第$i$次要把棋子从第$A_i ...

  4. bzoj 4501: 旅行 01分数规划+概率期望dp

    题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=4501 题解: 首先我们不考虑可以删除边的情况下,如何计算期望边数. 然后我们发现这是个有 ...

  5. 【LeetCode】012. Integer to Roman

    Given an integer, convert it to a roman numeral. Input is guaranteed to be within the range from 1 t ...

  6. ie11

    可用:document.documentMode来检测. var isIE11 = function() { var result = false; if (document.documentMode ...

  7. Centos6.5 安装pip

    1.下载 sudo wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate 2.安装  python get-pip.py 参 ...

  8. android使用wcf接收上传图片视频文件

    一.Android 权限配置文件: <?xml version="1.0" encoding="utf-8"?> <manifest xmln ...

  9. Go语言是如何处理栈的

    转自:http://tonybai.com/2014/11/05/how-stacks-are-handled-in-go/ Go 1.4Beta1刚刚发布,在Go 1.4Beta1中,Go语言的st ...

  10. Linux系统中‘dmesg’命令处理故障和收集系统信息的7种用法

    转自:https://linux.cn/article-3587-1.html 'dmesg'命令显示linux内核的环形缓冲区信息,我们可以从中获得诸如系统架构.cpu.挂载的硬件,RAM等多个运行 ...