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

在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. type为number的input标签输入小数的方法

    纠结了一段时间都没找出方法,最后灵光一现想出这个方法,没想到测试下果然成功了! 看目前网上几乎很难找到相对应的解决方法,所以这里分享出来,如果有更佳方法欢迎提出. 方法如下: <input ty ...

  2. FileInputStream 把文件作为字节流进行读操作

    //把文件作为字节流进行读操作 FileInputStream in = new FileInputStream(filename);//FileInputStream具体实现了在文件上读取数据

  3. PS 滤镜——水波 water wave

    %%%% Water wave %%%% 制作水波效果 clc; clear all; close all; addpath('E:\PhotoShop Algortihm\Image Process ...

  4. 查看字符串的编码chardet

    The Universal Character Encoding Detector chardet.detect("str") 返回:{‘confidence’:1.0,'enco ...

  5. Chrome focus样式

    -webkit-box-shadow: 0 0 0 1000px #131313 inset;//获取焦点时候可以去除背景色 -webkit-text-fill-color: #fff;//字体颜色

  6. 【Google】非下降数组

    转自九章算法公众号 题目描述 给出包含n个整数的数组,你的任务是检查它是否可以通过修改至多一个元素变成非下降的.一个非下降的数组array对于所有的i(1<=i<n)满足array[i-1 ...

  7. Boilerplate

    HTML5 Boilerplate 是一个由 Paul Irish(Google Chrome 开发人员.jQuery 项目成员.Modernizr 作者.yayQuery 播客主持人)主导的“前端开 ...

  8. hdu 1724 Ellipse —— 自适应辛普森积分

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=1724 函数都给出来了,可以用辛普森积分: 一开始 eps = 1e-8 TLE了,答案只要三位小数,那么 ...

  9. Android HttpGet和HttpPost设置超时

    HttpPost: private Runnable runnable = new Runnable() { @Override public void run() { String url = Ba ...

  10. 【转】 Pro Android学习笔记(五二):ActionBar(5):list模式

    可以在action bar中加入spinner的下来菜单,有关spinner,可以参考Pro Android学习笔记(二十):用户界面和控制(8):GridView和Spinner. list的样式和 ...