1、什么是模板

模板是一个web开发必备的模块。因为我们在渲染一个网页的时候,并不是只渲染一个纯文本字符串,而是需要渲染一个有富文本标签的页面。
这时候我们就需要使用模板了。在Flask中,配套的模板是Jinja2,Jinja2的作者也是Flask的作者。这个模板非常的强大,并且执行效率高。以下对Jinja2做一个简单介绍!

2、flask渲染jinja2模板(render_template)

1、第一步,在当前路径创建templates文件夹
注意点:
1、默认名字是templates(专门用于存放模板文件),如果书写错误,则会报错
2、如果在template文件夹中写入另一个文件夹则需要写出相对应的路径(如在templates文件夹中,创建了 profile文件夹用于存放index.html文件,则在导入是应该写成:
return render_template(“profile/index.html”)
2、第二步,在templates文件夹中,书写相关需要渲染的页面、模板(如创建index.html)
3、第三步,通过render_template()导入(index.html)

相关步骤呈现:
第一步、第二步
image.png
第三步:

  1. import flask import Flask, render_template
  2. app = Flask(__name__)
  3. @app.route("/")
  4. def home():
  5. return render_template("index.html")
  6. if __name__ == "__main__":
  7. app.run(debug=True)

呈现效果:
image.png
更改templates文件夹(一般不会进行更改)

  1. # 1、通过绝对路径更换,可以适应不同的盘符
  2. from flask import Flask, render_template
  3. app = Flask(__name__, template_folder=r"C:\Users\asus\Desktop\flask练习\dome")
  4. @app.route("/")
  5. def home():
  6. return "首页"
  7. @app.route("/index/")
  8. def index():
  9. return render_template("index.html")
  10. if __name__ == "__main__":
  11. app.run(debug=True)
  1. # 1、在当前路径下进行修改,适应性较差
  2. from flask import Flask, render_template
  3. app = Flask(__name__, template_folder=r"./dome")
  4. @app.route("/")
  5. def home():
  6. return "首页"
  7. @app.route("/index/")
  8. def index():
  9. return render_template("index.html")
  10. if __name__ == "__main__":
  11. app.run(debug=True)

3、模板传参

1、一个简单的例子(传入单个参数):
代码部分:

  1. from flask import Flask, render_template
  2. app = Flask(__name__)
  3. @app.route("/")
  4. def home():
  5. return "首页"
  6. @app.route("/index/")
  7. def index():
  8. return render_template("index.html", name="流浪者、j")
  9. if __name__ == "__main__":
  10. app.run(debug=True)

模板接收参数:{{ xxx }}
image.png
返回结果:
image.png
2、传入多个参数

  1. # 比较直接的方式
  2. @app.route("/index/")
  3. def index():
  4. return render_template("index.html", name="流浪者、j", home="兰溪", age=18)

通过字典完成传参
1、方法一
代码部分

  1. context = {
  2. "name":"流浪者、j",
  3. "home":"兰溪",
  4. "age":18
  5. }
  6. @app.route("/index/")
  7. def index():
  8. return render_template("index.html", context=context)
  9. # 改变了上述传参方式导致代码臃肿的问题
  1. 模板部分(context["name"] or context.name)<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1227988/1586700323067-a2bc65e7-859d-4391-8524-455fbc3ce323.png#align=left&display=inline&height=157&margin=%5Bobject%20Object%5D&name=image.png&originHeight=259&originWidth=1229&size=30280&status=done&style=none&width=746)<br /> 最终结果<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1227988/1586700384590-9604a725-78dd-4a6a-82a6-144a920137b7.png#align=left&display=inline&height=327&margin=%5Bobject%20Object%5D&name=image.png&originHeight=327&originWidth=612&size=35895&status=done&style=none&width=612)<br />虽然通过这种方式使代码在呈现上更加优雅,但是却也导致了模板部分的书写困难,于是进行改进<br />** 2、方法二(将context=context 改为 **context)**<br />** 代码部分**
  1. context = {
  2. "name":"流浪者、j",
  3. "home":"兰溪",
  4. "age":18
  5. }
  6. @app.route("/index/")
  7. def index():
  8. return render_template("index.html", **context)
  9. # 这种方式就对context进行转化,变为了name="流浪者、j", home="兰溪", age=18的形式
  1. 模板部分<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1227988/1586700726053-23548a2b-7051-4342-ba7b-501be6156b30.png#align=left&display=inline&height=103&margin=%5Bobject%20Object%5D&name=image.png&originHeight=103&originWidth=1230&size=16622&status=done&style=none&width=1230)<br /> 最终结果<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1227988/1586700384590-9604a725-78dd-4a6a-82a6-144a920137b7.png#align=left&display=inline&height=327&margin=%5Bobject%20Object%5D&name=image.png&originHeight=327&originWidth=612&size=35895&status=done&style=none&width=612)

4、嵌套取值(context中嵌套了字典或者列表)

嵌套字典

  1. context = {
  2. "name":"流浪者、j",
  3. "home":"兰溪",
  4. "age":18
  5. books = {"book1":"python"
  6. "book2":"java"}
  7. }

取出python

  1. # 写法一
  2. {{ books.book1 }}
  3. # 写法二
  4. {{ books['book1'] }}

嵌套列表,索引取值

  1. context = {
  2. "name":"流浪者、j",
  3. "home":"兰溪",
  4. "age":18
  5. books = ["python", "java", "php"]
  6. }

取出python,如果索引越界不报错,只是不显示

  1. # 写法一
  2. {{ books.0}}
  3. # 写法二
  4. {{ books[0] }}

5、模板中的注释

  1. 1、注释方法一:ctrl + / ( <!-- <h2>{{ age }}</h2> --> )<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1227988/1586700898328-cf5b46a1-ebac-4fac-8c1f-8fbdb06bdc06.png#align=left&display=inline&height=122&margin=%5Bobject%20Object%5D&name=image.png&originHeight=122&originWidth=1210&size=17616&status=done&style=none&width=1210)<br /> 注释的并不是非常完全,在运行时还有可能干扰程序的正常运行<br /> 2、通过{# {{ age }} #}的方式进行注释<br />![image.png](https://cdn.nlark.com/yuque/0/2020/png/1227988/1586701180228-b4b42624-6062-4b0e-bada-46582e7ff28f.png#align=left&display=inline&height=121&margin=%5Bobject%20Object%5D&name=image.png&originHeight=121&originWidth=1229&size=18077&status=done&style=none&width=1229)