5.flask返回网页模板(前后端不分离，传统写法)
在项目目录中新建template文件夹，在文件夹中新建hello.html
hello.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>{{person.username}}</h1>
<em>{{person['age']}}</em> #两种方式都可以显示
</body>
</html>
在app.py中编写模拟操作数据库返回网页模板等操作。
app.py：
from flask import Flask, request, render_template
from flask_cors import CORS
app = Flask(__name__)
CORS(app) #解决跨域问题
@app.route('/')
def hello():
uname = request.args['username'] #get方式获 得username
print(uname)
return 'hello'+uname
@app.route('/info')
def info():
#假设person_info是从数据库中查找出来的数据
person_info = {}
person_info['username'] = 'zhangsan'
person_info['age'] = 28
# 返回一个网页模板；参数一：模板名称，参数二：对模板中数据进行赋值(这是一种前后端不分离的形式)
return render_template('hello.html',person=person_info)
if __name__ == '__main__':
app.run()
当访问127.0.0.1：5000/info时，网页显示和服务器回应(html代码)：
这就是前后端不分离的开发方式。
6.一个综合实例
6.1前后端不分离，用传统方式完成
思路：当用户第一次通过get方式(跳转或输入url)进入该页面时，返回表单模板html，如果用户填写完毕，提交时(post),获取用户填写的num，并使用random模块生成随机数，绑定在random.html上并返回。
random.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/random_int" method="post">
多少以内的随机数：<input type="name" name="num" value="{{ num }}">
<input type="submit">
</form>
<div>生成的随机数为{{ random_num }}</div>
</body>
</html>
app.py:
@app.route('/random_int',methods=['GET','POST'])
def random_int():
if request.method =='GET':
return render_template('random.html')
elif request.method == 'POST':
num = int(request.form['num']) #获取表单提交的id值，要把字符串类型转换为int类型
random_num = random.randint(0,num) #生成一个随机数
return render_template('random.html', random_num = random_num, num = num)
当访问127.0.0.1：5000/random_int时，输入随机数最大值10后，点击提交，返回页面为：
这种方式会重新刷新整个页面，(这样不好),页面如果会让你复杂的话，响应时间会很长。
6.2前后端分离，用ajax请求完成
思路：前半部分与传统方式一致，但是在前端用户提交表单后，在服务器生成随机数，只返回该随机数，有前端页面自己绑定数据。不在刷新整个页面，只改变页面的一部分。
random_ajax.html:
<body>
多少以内的随机数：<input type="name" id="num">
<button onclick="getRandom()">ok</button>
<div>生成的随机数为:</div>
<div id="result"></div>
<script>
function getRandom() {
let input = document.getElementById('num') //获取用户输入框
//ajax请求
let xhr = new XMLHttpRequest()
xhr.open('post', 'http://127.0.0.1:5000/random_ajax', true)
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') //post请求固定写法
xhr.send('num=' + input.value) //post请求发送参数的形式
xhr.onload = function () { //回调函数
let div = document.getElementById('result') //获取显示结果的div
div.innerText = xhr.responseText //把服务器响应回来的值更新给相应div页面
}
}
</script>
</body>
app.py:
@app.route('/random_ajax',methods=['GET','POST'])
def random_ajax():
if request.method =='GET': #如果请求方式是get，返回网页模板
return render_template('random_ajax.html')
elif request.method == 'POST':
num = int(request.form['num']) #获取表单提交的num值，要把字符串类型转换为int类型
random_num = random.randint(0,num) #生成一个随机数
return str(random_num) #返回生成的随机数str数据类型
form Data：10
用户输入传给服务器的数据
image.png
Response:服务器响应数据为8
不再是html模板
