前后端交互就是在网页上点击一个按钮或者是提交一个表单,怎么传到后端,后端怎么传到数据库里,又怎么返回数据到前端的问题。
这里简单分为以下几类:
1.前端提交表单数据传给后端,后端接收返回一个新页面。
举一个登陆界面的简单例子,前端输入账号密码,后端从数据库取出数据进行比对,如果一致则转向主页面,不一致则返回当前页面。
html代码:
<form class="form-4" action="/main/" method="post">
<h1>Login</h1>
<p>
<label for="login">Username or email</label>
<input type="text" name="login" placeholder="NameId" required>
</p>
<p>
<label for="password">Password</label>
<input type="password" name='password' placeholder="Password" required>
</p>
<p>
<input type="submit" name="submit" value="登陆" >
</p>
</form>
两个输入框,账号和密码,和一个提交的按钮。
在form标签里面以post方式进行提交,action里面的就是你点击按钮的时候要跳转到的url,这时候我们就要在app.py里面来定义这个路由了。
后端代码:
@app.route('/main/', methods=['post'])
def yanzheng():
nameid = request.form['login']
ps = request.form['password']
conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', password='123', db='ci', charset='utf8')
cur = conn.cursor()
sql = "SELECT `name`, `password` FROM `information` WHERE name_id =" + nameid
cur.execute(sql)
realps = cur.fetchall()
conn.close()
session.permanent = True # 默认session的时间持续31天
session['name_id'] = nameid
session['name_name'] = realps[0][0]
if ps == realps[0][1] :
return render_template('index.html')
else:
return render_template('login.html')
说明:
1.第一行单引号里面的 /main/ 这个路由和你上面html里面action里面一致,方法是post.
2.函数名随便取,不过不要像我这样不规范。
3.之后的2行是从form表单里接受的数据,中括号里面的login,password是html标签里的name属性。
4.之后的6行是连接数据库,根据name_id 从本地的 ci数据库的 information表中取出来 name 和 password两项,把值给realps这个元祖里面。此时realps=(('zhangsan','123'),)是一个二元数组。
5.由于登陆一般都需要开启会话session,简言之就是需要设置全局变量,
session['name_id'] = nameid
session['name_name'] = realps[0][0]
这就把这里接收到的nameid和数据库中取出的'zhangsan'设置成了全局变量,在其他@app.route()里面以如下方式调用全局变量:
@app.route('/sign_in', methods=['post'])
def sign_in():
name = session.get('name_name')
name_id = session.get('name_id')
6.最后就是判断了,如果密码相等,就转向主页面,如果不相等则返回登陆页面。
7.需要至少引入以下模块(应该不用这么多,记不清了,不过其他地方应该能用到......):
from flask import Flask,render_template,request,session
import pymysql
import time
import json
import os
from datetime import timedelta
import datetime
app = Flask(__name__)
app.config['SECRET_KEY'] = os.urandom(24)
app.config['PERMANENT_SESSION_LIFETIME'] = timedelta(days=1) # 设置session的保存时间。