渲染数据

数据准备

后端定义几个字符串,用于传递到前端

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': '女'},}

Jinja2模板中的流程控制

逻辑语法

Jinja2模板语言中的 for

{% for foo in g %}{
    % endfor %}

Jinja2模板语言中的 if

{% if g %}{
    % elif g %}    {
    % else %}    {
    % endif %}

变量

{
   {}}

接下来,我们对这几种情况分别进行传递,并在前端显示成表格

1. 使用STUDENT字典传递至前端

前端页面

    
         
     
               {
    % for foo in stu %}            
        {
    % endfor %}    
          
               
                    
姓名
                    
年龄
                    
性别
               
          
          
       
                        
{
   { foo.name }}
                        
{
   { foo.age }}
                        
{
   { foo.gender }}
                   
      
     

后端代码

from flask import Flask,render_template,requestapp = Flask(__name__)STUDENT = {
   'name': 'Old', 'age': 38, 'gender': '中'},@app.route('/login',methods=["POST","GET"])def login():    if request.method == "GET":        return render_template("login.html",stu=STUDENT)if __name__ == '__main__':    app.run("0.0.0.0", 9876)

2. STUDENT_LIST 列表传入前端Jinja2 模板的操作

前端页面

    
         
     
               {% for foo in stu %}            
        {% endfor %}    
          
               
                    
姓名
                    
年龄
                    
性别
               
          
          
       
                        
{
   { foo.get("name") }}
                        
{
   { foo.age }}
                        
{
   { foo["gender"] }}
                   
      
     

上面我们用了三种取值方式,这里foo就是每个字典

后端代码

from flask import Flask,render_template,requestapp = Flask(__name__)STUDENT_LIST = [    {
    'name': 'Old', 'age': 38, 'gender': '中'},    {
    'name': 'Boy', 'age': 73, 'gender': '男'},    {
    'name': 'EDU', 'age': 84, 'gender': '女'}]@app.route('/login',methods=["POST","GET"])def login():    if request.method == "GET":        return render_template("login.html",stu=STUDENT_LIST)if __name__ == '__main__':    app.run("0.0.0.0", 9876)

3.STUDENT_DICT 大字典传入前端 Jinja2 模板

 前端页面

    
         
     
               {
    % for foo in stu %}            
        {
    % endfor %}    
          
               
                    
序号
                    
姓名
                    
年龄
                    
性别
               
          
          
       
                        
{
   { foo }}
                        
{
   { stu.get(foo).name }}
                        
{
   { stu.get(foo).age }}
                        
{
   { stu.get(foo).gender }}
                   
      
     

后端代码

from flask import Flask,render_template,requestapp = Flask(__name__)STUDENT_DICT = {    1: {
   'name': 'Old', 'age': 38, 'gender': '中'},    2: {
   'name': 'Boy', 'age': 73, 'gender': '男'},    3: {
   'name': 'EDU', 'age': 84, 'gender': '女'},}@app.route('/login',methods=["POST","GET"])def login():    if request.method == "GET":        return render_template("login.html",stu=STUDENT_DICT)if __name__ == '__main__':    app.run("0.0.0.0", 9876)

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

 

Markup

该方法和django中的safe一样都是防止xss攻击、

from flask import Flask,render_template,requestfrom markupsafe import Markupapp = Flask(__name__)@app.route('/login',methods=["POST","GET"])def login():    if request.method == "GET":        my_in = Markup("")        return render_template("login.html",ss=my_in)if __name__ == '__main__':    app.run("0.0.0.0", 9876)

前端页面生成的标签：