简单的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>
简单的vue.js的表单提交数据至flask然后数据库入库,再将表里面的数据展示在网页的更多相关文章
- jquery.form.js 让表单提交更优雅
jquery.form.js 让表单提交更优雅.可以页面不刷新提交表单,比jQuery的ajax提交要功能强大. 1.引入 <script src="/src/jquery-1.9.1 ...
- springmvc下js控制表单提交(表单提交前检验,提交后获取json返回值)
这个问题我搞了四天,终于搞懂.因为对js很不熟悉.郁闷的是后台代码出错总可以设置断点调试,前端js代码出错只能通过浏览器提供一些运行数据来分析,很不习惯. 首先说下逻辑:这是一个注册功能,我希望,注册 ...
- 【转载】[JS]让表单提交返回后保持在原来提交的位置上
有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...
- js 在表单提交前进行操作
最近在写页面的时候,需要手动写一些在表单进行提交前的验证操作,正好看到了2种阻止表单提交的方法,可以进行一些逻辑处理 方法一:使用return false 原生js写法: <form id=&q ...
- js阻止表单提交
<!DOCTYPE html><html><head> <title>Simple Login Form</title> < ...
- Vue.js:表单
ylbtech-Vue.js:表单 1.返回顶部 1. Vue.js 表单 这节我们为大家介绍 Vue.js 表单上的应用. 你可以用 v-model 指令在表单控件元素上创建双向数据绑定. v-mo ...
- 利用JS 阻止表单提交
情景一:不存在Ajax异步操作 1 使用背景:会议室预定管理系统中,当表单提交的时候需要验证预约的时间是否符合预定规则(不需要通过访问服务器),否则提示错误信息,阻止表单提交. 2 相关技术点: fo ...
- js实现表单提交submit(),onsubmit
通常表单的提交有两种方式,一是直接通过html的form提交,代码如下: <form action="" method="" id="forms ...
- 使用Jquery.form.js ajax表单提交插件弹出下载提示框
现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...
随机推荐
- 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 ...
- 设计模式 之 《建造者模式(Builder)》
#ifndef __BUILDER_MODEL__ #define __BUILDER_MODEL__ #include <string> #include <vector> ...
- Arc077_E Guruguru
传送门 题目大意 有$m$个点编号从小到大按照顺时针编成了一个环,有一枚棋子,每次移动可以选择顺时针移动到下一个或者直接移动到编号为$x$的点,现在有$n-1$次数操作,第$i$次要把棋子从第$A_i ...
- bzoj 4501: 旅行 01分数规划+概率期望dp
题目大意: http://www.lydsy.com/JudgeOnline/problem.php?id=4501 题解: 首先我们不考虑可以删除边的情况下,如何计算期望边数. 然后我们发现这是个有 ...
- 【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 ...
- ie11
可用:document.documentMode来检测. var isIE11 = function() { var result = false; if (document.documentMode ...
- Centos6.5 安装pip
1.下载 sudo wget https://bootstrap.pypa.io/get-pip.py --no-check-certificate 2.安装 python get-pip.py 参 ...
- android使用wcf接收上传图片视频文件
一.Android 权限配置文件: <?xml version="1.0" encoding="utf-8"?> <manifest xmln ...
- Go语言是如何处理栈的
转自:http://tonybai.com/2014/11/05/how-stacks-are-handled-in-go/ Go 1.4Beta1刚刚发布,在Go 1.4Beta1中,Go语言的st ...
- Linux系统中‘dmesg’命令处理故障和收集系统信息的7种用法
转自:https://linux.cn/article-3587-1.html 'dmesg'命令显示linux内核的环形缓冲区信息,我们可以从中获得诸如系统架构.cpu.挂载的硬件,RAM等多个运行 ...