简单的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对象. 具体的原因: 浏览器兼 ...
随机推荐
- type为number的input标签输入小数的方法
纠结了一段时间都没找出方法,最后灵光一现想出这个方法,没想到测试下果然成功了! 看目前网上几乎很难找到相对应的解决方法,所以这里分享出来,如果有更佳方法欢迎提出. 方法如下: <input ty ...
- FileInputStream 把文件作为字节流进行读操作
//把文件作为字节流进行读操作 FileInputStream in = new FileInputStream(filename);//FileInputStream具体实现了在文件上读取数据
- PS 滤镜——水波 water wave
%%%% Water wave %%%% 制作水波效果 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Process ...
- 查看字符串的编码chardet
The Universal Character Encoding Detector chardet.detect("str") 返回:{‘confidence’:1.0,'enco ...
- Chrome focus样式
-webkit-box-shadow: 0 0 0 1000px #131313 inset;//获取焦点时候可以去除背景色 -webkit-text-fill-color: #fff;//字体颜色
- 【Google】非下降数组
转自九章算法公众号 题目描述 给出包含n个整数的数组,你的任务是检查它是否可以通过修改至多一个元素变成非下降的.一个非下降的数组array对于所有的i(1<=i<n)满足array[i-1 ...
- Boilerplate
HTML5 Boilerplate 是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Modernizr 作者.yayQuery 播客主持人)主导的“前端开 ...
- hdu 1724 Ellipse —— 自适应辛普森积分
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1724 函数都给出来了,可以用辛普森积分: 一开始 eps = 1e-8 TLE了,答案只要三位小数,那么 ...
- Android HttpGet和HttpPost设置超时
HttpPost: private Runnable runnable = new Runnable() { @Override public void run() { String url = Ba ...
- 【转】 Pro Android学习笔记(五二):ActionBar(5):list模式
可以在action bar中加入spinner的下来菜单,有关spinner,可以参考Pro Android学习笔记(二十):用户界面和控制(8):GridView和Spinner. list的样式和 ...