渲染數據
數據准備
后端定義幾個字符串,用於傳遞到前端
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字典傳遞至前端
前端頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> {% for foo in stu %} <tr> <td>{{ foo.name }}</td> <td>{{ foo.age }}</td> <td>{{ foo.gender }}</td> </tr> {% endfor %} </tbody> </table> </body> </html>
后端代碼
from flask import Flask,render_template,request app = 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 模板的操作
前端頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px"> <thead> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> {% for foo in stu %} <tr> <td>{{ foo.get("name") }}</td> <td>{{ foo.age }}</td> <td>{{ foo["gender"] }}</td> </tr> {% endfor %} </tbody> </table> </body> </html>
上面我們用了三種取值方式,這里foo就是每個字典
后端代碼
from flask import Flask,render_template,request app = 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 模板
前端頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1px"> <thead> <tr> <th>序號</th> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> </thead> <tbody> {% for foo in stu %} <tr> <td>{{ foo }}</td> <td>{{ stu.get(foo).name }}</td> <td>{{ stu.get(foo).age }}</td> <td>{{ stu.get(foo).gender }}</td> </tr> {% endfor %} </tbody> </table> </body> </html>
后端代碼
from flask import Flask,render_template,request app = 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,request from markupsafe import Markup app = Flask(__name__) @app.route('/login',methods=["POST","GET"]) def login(): if request.method == "GET": my_in = Markup("<input type='text' name='uname'>") return render_template("login.html",ss=my_in) if __name__ == '__main__': app.run("0.0.0.0", 9876)
前端頁面生成的標簽：
<input type="text" name="uname">