黄色标注部分重点注意
1. Flask模板简介
•模板是一个web开发必备的,因为在渲染一个网页的时候,并不是只渲染一个纯文本字符串,而是需要渲染一个有富文本标签的页面,这时候就需要使用模板来简化渲染步骤
•在Flask中,配套的模板是Jinja2,Jinja2模板非常强大,并且执行效率高
函数返回HTML代码测试:
from flask import Flask
app = Flask(__name__)
@app.route('/db')
def first_flask():
return '<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">'
if __name__ == '__main__':
app.run(debug=True)
网页显示:
虽然这样做是可以解析HTML的,但是这样做不利于前后端分离,给开发工作带来很多不便
在一般开发时应该将HTML代码与Python代码分离,将前端代码放入templates目录
中,然后在python代码中通过render_template()方法
来渲染模板即可
在项目目录下创建templates目录,templates目录下创建list.html文件,如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
</head>
<body>
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
</body>
</html>
python代码测试:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/db')
def first_flask():
return render_template('list.html')
if __name__ == '__main__':
app.run(debug=True)
网页显示与之前的一样
•render_template()方法
根据传入的模板名在默认模板templates目录
下寻找匹配模板,然后将模板里数据导入
当你需要传入模板不在templates目录下,而在templates目录的子目录时,你需要传入完整的子目录路径才能完成调用
•在templates目录
下再创建一个子目录file,里边创建一个模板文件module.html如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户中心</title>
</head>
<body>
<h1>但行好事,莫问前程</h1>
</body>
</html>
此时加载此模块需要添加完整的子目录的路径,如下:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/db')
def first_flask():
return render_template('list.html')
@app.route('/file')
def file():
return render_template('file/module.html')
if __name__ == '__main__':
app.run(debug=True)
网页显示:
如果想自定义模板保存目录,可以在初始化FLask时,传入template_folder参数
来指定自定义模板保存目录,具体路径,如下:
app = Flask(__name__, template_folder='./template') #自定义目录名
这样你就可以将所有模板文件放入template文件夹
中,但是不建议自定义模板目录以免路径错误模板导入出错
注意:
在模板代码中尽量不要使用常规的HTML注释,如 <!-- 这就是注释 -->
,因为Flask会解析这种方式注释的代码,如果需要使用注释,可以用{# 这是注释 #}
这种格式的注释
2. Flask模板传参
我们可以在Flask项目中给模板传入参数,如下:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/db')
def first_flask():
return render_template('list.html', username='ycx', age=18, height=180)# 传入参数
@app.route('/file')
def file():
return render_template('file/module.html')
if __name__ == '__main__':
app.run(debug=True)
在list.html模板中调用:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
</head>
<body>
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
<h2>{
{ username }}</h2>
<h2>{
{ age }}</h2>
<h2>{
{ height }}</h2>
</body>
</html>
网页运行显示:
•此时传入的参数已经被渲染到网页显示出来了
•当模板中要传递的参数过多的时候,将所有参数放在一个函数中会显得传参部分的代码十分臃肿
•我们使用字典进行包装,并且还可以加两个 * 号,来转换成关键字参数
如下测试:
from flask import Flask, render_template
app = Flask(__name__)
context = {
'username': 'ycx',
'age': 18,
'height': 180
}
@app.route('/db')
def first_flask():
return render_template('list.html', context=context)
@app.route('/file')
def file():
return render_template('file/module.html')
if __name__ == '__main__':
app.run(debug=True)
修改list.html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
</head>
<body>
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
<h2>{
{ context.username }}</h2>
<h2>{
{ context.age }}</h2>
<h2>{
{ context.height }}</h2>
</body>
</html>
运行结果与之前完全一致
•如果想要模板代码不改变,可以使用**context
修饰此字典,即直接用username而不是context.username
from flask import Flask, render_template
app = Flask(__name__)
context = {
'username': 'ycx',
'age': 18,
'height': 180
}
@app.route('/db')
def first_flask():
return render_template('list.html', **context)
@app.route('/file')
def file():
return render_template('file/module.html')
if __name__ == '__main__':
app.run(debug=True)
context中字典嵌套字典测试:
from flask import Flask, render_template
app = Flask(__name__)
context = {
'username': 'ycx',
'age': 18,
'height': 180,
'hobby': {
'music': 'music',
'football': 'football',
'tv': 'tv'
}
}
@app.route('/db')
def first_flask():
return render_template('list.html', **context)
@app.route('/file')
def file():
return render_template('file/module.html')
if __name__ == '__main__':
app.run(debug=True)
模块代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
</head>
<body>
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
<h2>{
{ username }}</h2>
<h2>{
{ age }}</h2>
<h2>{
{ height }}</h2>
<h2>{
{hobby.football}}</h2>
<h2>{
{hobby['tv']}}</h2>
</body>
</html>
网页显示:
字典嵌套字典的取值方式:
•属性调用:
如:hobby.football
•字典取值方式:
如:hobby[‘tv’]
嵌套列表测试:
from flask import Flask, render_template
app = Flask(__name__)
context = {
'username': 'ycx',
'age': 18,
'height': 180,
'hobby': {
'music': 'music',
'football': 'football',
'tv': 'tv'
},
'language':['python','java','php']
}
@app.route('/db')
def first_flask():
return render_template('list.html', **context)
@app.route('/file')
def file():
return render_template('file/module.html')
if __name__ == '__main__':
app.run(debug=True)
模板文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flask</title>
</head>
<body>
<input id="kw" name="wd" class="s_ipt" value="" maxlength="255" autocomplete="off">
<h2>{
{ username }}</h2>
<h2>{
{ age }}</h2>
<h2>{
{ height }}</h2>
<h2>{
{hobby.football}}</h2>
<h2>{
{hobby['tv']}}</h2>
<h2>{
{language.0}}</h2>
<h2>{
{language[1]}}</h2>
</body>
</html>
网页显示:
嵌套列表的取值方式:
•下表属性调用:
如:language.0
•列表取值方式:
如:language[1]
字典和列表的取值都有两种方法,建议使用属性取值方法