前端Web模板用于渲染富文本信息。

Jinja2 （template文件夹）

image.png

  1. from flask import Flask, render_template
  2. app = Flask(__name__)
  5. @app.route('/about')
  6. def about():
  7.     return render_template("about.html")
  9. @app.route('/')
  10. def index():
  11.     return "hello"
  14. if __name__ == '__main__':
  15.     app.run(debug=True)  # app启动
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <h1>Hello World Jinja2</h1>
  9. </body>
  10. </html>

image.png

更改模板文件夹

config中可以设置template——folder

模板传递信息

在HTML中使用两个花括号来代表变量。再在代码中传参数

  1. from flask import Flask, render_template
  2. app = Flask(__name__)
  5. @app.route('/about')
  6. def about():
  7.     context = {
  8.         "name": "hello user"
  9.     }
  10.     return render_template("about.html", **context)
  12. @app.route('/')
  13. def index():
  14.     return "hello"
  17. if __name__ == '__main__':
  18.     app.run(debug=True)  # app启动

image.png

过滤器

内置的Jinja2过滤器中提供很多函数可用。例如：

length

  1.     <h1>Hello World {{ username|length }}</h1>

image.png

Join

image.png

官网

http://www.pythondoc.com/flask/

控制语句

if - else

  1. @app.route('/control')
  2. def about():
  3.     context = {
  4.         "age": 10,
  5.     }
  6.     return render_template("control.html", **context)
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CONTROL</title>
  6. </head>
  7. <body>
  8. {% if age > 18 %}
  9.     <div>已经成年</div>
  10.     {% else %}
  11.     <div>未成年</div>
  12. {% endif %}
  13. </body>
  14. </html>

for

image.png

  1. from flask import Flask, render_template
  2. app = Flask(__name__)
  5. @app.route('/control')
  6. def about():
  7.     context = {
  8.         "age": 10,
  9.         "books":["条目1", "条目2"],
  10.         "person": {"name": "hangman", "age": 18}
  11.     }
  12.     return render_template("control.html", **context)
  14. @app.route('/')
  15. def index():
  16.     return "hello"
  19. if __name__ == '__main__':
  20.     app.run(debug=True)  # app启动
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CONTROL</title>
  6. </head>
  7. <body>
  8. {% if age > 18 %}
  9.     <div>已经成年</div>
  10.     {% else %}
  11.     <div>未成年</div>
  12. {% endif %}
  13. {% for book in books %}
  14. <li>{{ book }}</li>
  15. {% endfor %}
  16. {% for key,value in person.items() %}
  17. <div>{{ key }} : {{ value }}</div>
  18. {% endfor %}
  19. </body>
  20. </html>

继承

一般来说一个网站的header，footer都是固定的，这样就可以让基础模板写好这些通用的部分，在用继承基础来定制不同的类型。

父类

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>{% block title %}{% endblock %}</title>
  6. </head>
  7. <body>
  8.     <div>导航条</div>
  9. {% block body %}
  10.     {% endblock %}
  11.     <div>
  12.         底部
  13.     </div>
  14. </body>
  15. </html>

继承子类

  1. {% extends "base.html"%}
  2. {% block title %}
  3.     主页标题
  4. {% endblock %}
  5. {% block body %}
  6.     主页首页
  7. {% endblock %}

继承静态文件

  1. {% extends "base.html"%}
  2. {% block title %}
  3.     主页标题
  4. {% endblock %}
  6. {% block head %}
  7.     <link rel="stylesheet" href="{{ url_for('static',filename='css/main.css') }}">
  8. {% endblock %}
  9. {% block body %}
  10.     <h1>首页</h1>
  11. {% endblock %}