python flask vue 前后端通信 flask框架前后端交互

flask框架实现前后端数据的传递

这几天一直在基于flask框架实现一个登陆和注册界面，并且以管理员的身份对数据库中的数据实现增删改查。刚刚开始着手的时候，如何实现前后端数据的传递这个问题困扰了好久，现在已经解决，所以记录一下防止以后用到。

前端（即html界面）传值到后端

因为现在才刚刚学习所以只掌握了ajax这一种方法（路过的大佬轻喷），具体的步骤如下：
1.给文本框设定id，通过id在ajax中的data部分接收值(因为<>内的内容写的时候没有显示出来，所以我在<>中加了一个引号（偷偷））

<’!----------------------------------------前端----------------------------------------------!>
 html部分：
 <‘input type=“text” id=“username”>//设置文本框
 ajax部分：
 var data{
 usr: $("#username").val(),//获取文本框中用户输入的的值
 }
 $.ajax{
 url:’/test’,//跳转到后端的‘/route’路由
 data：data,
 type:‘post’,
 datatype:‘json’,
 success :function(result) //如果/route路由对应的函数有返回值的话
 {
 alert(result)
 }
 eorr : function(result)
 {
 alert(‘eorr’)
 }
 }<’!----------------------------------------------后端--------------------------------------------------!>
@app.route(’/test’)
 def test():
 if request.method==‘post’:
 request.form.get(‘usr’);//这样我们就获得了刚刚通过ajax传递过来的usrename
 db=mysqldb.mysqldb();//前一个mysqldb表示我封装的一个文件，后面的mysqldb是里面的一个类
 sql=(‘select * from ‘表名’ where username=’{0}’’)//查询语句
 db.select(sql);执行查询
 return render_template(‘test.html’)

这样我们就实现了前端界面对后端数据库的查询操作（增删改的道理相同）

后端向前端传值

实现后端向前端传值，需要把数据转化成json格式（利用一个函数），将其传递到前端，再利用刚刚的前端向后端传值的方法，通过后端返回一个html即可.

1.将数据转化为json格式

@app.route(’/test2’)
 def test2:
 num=[] //定义一个字典
 db = mysqldb.mysqldb()
 sql = str.format(“select username,password,sex,birthday,email from‘表名’”)
 fc = db.select(sql)
 for row in fc:
 num.append({‘username’:row[0],‘password’:row[1],‘sex’:row[2],‘birthday’:row[3],‘e mail’:row[4]})//注意字典的写法，是（{}）
 return json.dumps({‘code’:0,‘count’:10,‘msg’: “success”,‘data’:num}) //这样就返回了一个json类型的键值对

2.后端的ajax:

把url接口设置为刚刚的test2的路由，当做数据接口

（因为这里使用的是layui的框架，所以只需要稍微改一下接口就行啦（悄咪咪))

3. @app.route(’/test3’)
 def test3:
 return render_template(‘test2.html’) //返回的是test2的界面

3. 
   总结：我们需要得到test2.html时，只需要输入/test3，就显示出了test2的界面，因为界面中的值已经在test2函数中通过键值对传进去了，所以我们看到的界面就是有了数据的界面啦！

如图：

注：框架使用的是layui框架