目录

• Flask - 模板语言jinja2 和render_template高级用法
  • 一. 字典传递至前端
  • 二. 列表传入前端Jinja2 模板的操作:
  • 三. 大字典传入前端 Jinja2 模板
  • 四. 传递多个参数到前段
  • 五.利用 **{}字典的方式传递参数 ##
  • 六. jinja2的高阶用法
    • safe
    • 在jinja2模板中执行Python函数
    • jinja模板复用 block
    • Jinja2模板语言的模块引用 include
    • Jinja2模板语言中的宏定义

Flask - 模板语言jinja2 和render_template高级用法

• Django 的模板语言是 render_tempalte
• Flask 的模板语言呢是jinja2
• jinja2包含 render_tempalte

看下面一些概念认认脸:

{
    { }}   # 变量,非逻辑代码{
     % %}   # 逻辑代码{
     % if session %}    # if 语句{% endif %}{
     % for foo in session %}    # for 循环语句  {% endfor %}@app.template_global() # 全局函数Markup # 安全标签字符串儿{
     % macro func() %}{
     % endmacro %}

定义以下参数:

STUDENT = {
    'name': 'Old', 'age': 38, 'gender': '中'},STUDENT_LIST = [    {
     'name': 'Old', 'age': 38, 'gender': '中'},    {
     'name': 'Boy', 'age': 73, 'gender': '男'},    {
     'name': 'EDU', 'age': 84, 'gender': '女'}]STUDENT_DICT = {    1: {
    'name': 'Old', 'age': 38, 'gender': '中'},    2: {
    'name': 'Boy', 'age': 73, 'gender': '男'},    3: {
    'name': 'EDU', 'age': 84, 'gender': '女'},

一. 字典传递至前端

后端:

@app.route("/student")def index():    return render_template("student.html", student=STUDENT)

前端:

    
          Welcome to Old Boy EDU
      
       {
    { student }}
      
      
           
        
                 
{
    { student.name }}
                 
{
    { student["age"] }}
                 
{
    { student.get("gender") }}
            
       
      

结果:

二. 列表传入前端Jinja2 模板的操作:

后端:

@app.route("/student_list")def student_list():    return render_template("student_list.html", student=STUDENT_LIST)

前端:

    
          Welcome to Old Boy EDU
      
       {
    { student }}
      
      
           {% for foo in student %}        
    {% endfor %}
       
        
                     
{
    { foo }}
                     
{
    { foo.name }}
                     
{
    { foo.get("age") }}
                     
{
    { foo["gender"] }}
                
       
      

结果:

三. 大字典传入前端 Jinja2 模板

后端:

@app.route("/student_dict")def student_dict():    return render_template("student_dict.html", student=STUDENT_DICT)

前端:

    
          Welcome to Old Boy EDU
      
           {% for foo in student %}        
    {% endfor %}
       
        
                     
{
    { foo }}
                     
{
    { student.get(foo).name }}
                     
{
    { student[foo].get("age") }}
                     
{
    { student[foo]["gender"] }}
                
       
      

在遍历字典的时候,foo 其实是相当于拿出了字典中的Key

结果:

四. 传递多个参数到前段

 

后端:

@app.route("/allstudent")def all_student():    return render_template("all_student.html", student=STUDENT ,                           student_list = STUDENT_LIST,                           student_dict= STUDENT_DICT)

前端:

    
          
      
        _____________________________________
      
Welcome to Old Boy EDU : student
      
       {
    { student }}
      
      
           
        
                 
{
    { student.name }}
                 
{
    { student["age"] }}
                 
{
    { student.get("gender") }}
            
       
      
      
        _____________________________________
      
Welcome to Old Boy EDU : student_list
      
       {
    { student_list }}
      
      
           {% for foo in student_list %}        
    {% endfor %}
       
        
                     
{
    { foo }}
                     
{
    { foo.name }}
                     
{
    { foo.get("age") }}
                     
{
    { foo["gender"] }}
                
       
      
      
        _____________________________________
      
Welcome to Old Boy EDU : student_dict
      
       {
    { student_dict }}
      
      
           {% for foo in student_dict %}        
    {% endfor %}
       
        
                     
{
    { foo }}
                     
{
    { student_dict.get(foo).name }}
                     
{
    { student_dict[foo].get("age") }}
                     
{
    { student_dict[foo]["gender"] }}
                
       
      

结果:

五.利用 **{}字典的方式传递参

@app.route("/allstudent")def all_student():    return render_template("all_student.html", **{
    "student":STUDENT ,                           "student_list" : STUDENT_LIST,                           "student_dict": STUDENT_DICT})

六. jinja2的高阶用法

　　　　safe

第一种方式:

后端:

from flask import Flaskfrom flask import render_templateapp = Flask(__name__)@app.route("/")def index():    tag = ""    return render_template("index.html",tag=tag)app.run("0.0.0.0",5000)

前端:

    
              {
     { tag | safe}}  
      

第二种可以从后端入手:

from flask import Flaskfrom flask import render_templatefrom flask import Markup  # 导入 flask 中的 Markup 模块app = Flask(__name__)@app.route("/")def index():    tag = ""    markup_tag = Markup(tag)  # Markup帮助咱们在HTML的标签上做了一层封装,让Jinja2模板语言知道这是一个安全的HTML标签    print(markup_tag,          type(markup_tag))  #  
      
           return render_template("index.html", tag=markup_tag)app.run("0.0.0.0", 5000, debug=True)
      

　　　　在jinja2模板中执行Python函数

1. 后端函数传到前段

后端代码:

from flask import Flaskfrom flask import render_templatefrom flask import Markup  # 导入 flask 中的 Markup 模块app = Flask(__name__)#定义一个函数,把它传递给前端def a_b_sum(a,b):    return a+b@app.route("/")def index():    return render_template("index.html", tag=a_b_sum)app.run("0.0.0.0", 5000, debug=True)

前段代码:

    
              {
     { tag }}    
    {
     { tag(99,1) }}

1. 定义全局函数,无需后端传递给前端,Jinja2直接就可以执行的函数

后端代码:

from flask import Flaskfrom flask import render_templatefrom flask import Markup  # 导入 flask 中的 Markup 模块app = Flask(__name__)@app.template_global()  # 定义全局模板函数def a_b_sum(a, b):    return a + b@app.template_filter()  # 定义全局模板函数def a_b_c_sum(a, b, c):    return a + b + c@app.route("/")def index():    return render_template("index.html", tag="")app.run("0.0.0.0", 5000, debug=True)

前段代码:

    
              {
     { a_b_sum(99,1) }}    
    {
     { 1 | a_b_c_sum(197,2) }}

　　　　jinja模板复用 block

1.提供一个模板index.html

    
              
Welcome OldboyEDU
    
下面的内容是不一样的
    {% block content %}    {% endblock %}    
上面的内容是不一样的,但是下面的内容是一样的
    
OldboyEDU is Good

2.login.html使用index.html模板

{% extends "index.html" %}{% block content %}    
      
               用户名:
               密码:
           
      
{% endblock %}

　　　　Jinja2模板语言的模块引用 include

login.html 文件中的内容:

      
           用户名:
           密码:
       
      

index.html 文件中的内容

    
              
Welcome OldboyEDU
    
下面的内容是不一样的
    {% include "login.html" %}    
上面的内容是不一样的,但是下面的内容是一样的

后端代码:

from flask import Flaskfrom flask import render_templateapp = Flask(__name__)@app.route("/")def index():    return render_template("index.html")app.run("0.0.0.0", 5000, debug=True)

 

这就是将 login.html 当成一个模块,加载到 index.html 页面中

　　　　Jinja2模板语言中的宏定义

前端代码:

    
          {% macro type_text(name,type) %}    {% endmacro %}
在下方是使用宏来生成input标签
{
     { type_text("one","text") }}{
     { type_text("two","text") }}