Flask中模板語言Jinja2以及render_template
是時候開始寫個前端了,Flask中預設的模板語言是Jinja2
現在我們來一步一步的學習一下 Jinja2 捎帶手把 render_template 中留下的疑問解決一下
首先我們要在後端定義幾個字串,用於傳遞到前端
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模板中的流程控制:
I. Jinja2模板語言中的 for
{% for foo in g %} {% endfor %}
II. Jinja2模板語言中的 if
{% if g %}
{% elif g %}
{% else %}
{% endif %}
接下來,我們對這幾種情況分別進行傳遞,並在前端顯示成表格
1. 使用STUDENT字典傳遞至前端
後端:
@app.route("/student") def index(): return render_template("student.html", student=STUDENT)
前端:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Old Boy EDU</title> </head> <body> Welcome to Old Boy EDU <div>{{ student }}</div> <table border="1px"> <tr> <td>{{ student.name }}</td> <td>{{ student["age"] }}</td> <td>{{ student.get("gender") }}</td> </tr> </table> </body> </html>
結果:
從這個例子中,可以看出來,字典傳入前端Jinja2 模板語言中的取值操作, 與Python中的Dict操作極為相似,並且多了一個student.name的物件操作
2. STUDENT_LIST 列表傳入前端Jinja2 模板的操作:
後端:
@app.route("/student_list") def student_list(): return render_template("student_list.html", student=STUDENT_LIST)
前端:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Old Boy EDU</title> </head> <body> Welcome to Old Boy EDU <div>{{ student }}</div> <table border="1xp"> {% for foo in student %} <tr> <td>{{ foo }}</td> <td>{{ foo.name }}</td> <td>{{ foo.get("age") }}</td> <td>{{ foo["gender"] }}</td> </tr> {% endfor %} </table> </body> </html>
結果:
這裡我們可以看出如果是需要迴圈遍歷的話,Jinja2 給我們的方案是
{% for foo in student %} <tr> <td>{{ foo }}</td> </tr> {% endfor %}
上述程式碼中的 foo 就是列表中的每一個字典,再使用各種取值方式取出值即可
3.STUDENT_DICT 大字典傳入前端 Jinja2 模板
後端:
@app.route("/student_dict") def student_dict(): return render_template("student_dict.html", student=STUDENT_DICT)
前端:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Old Boy EDU</title> </head> <body> Welcome to Old Boy EDU <table> {% for foo in student %} <tr> <td>{{ foo }}</td> <td>{{ student.get(foo).name }}</td> <td>{{ student[foo].get("age") }}</td> <td>{{ student[foo]["gender"] }}</td> </tr> {% endfor %} </table> </body> </html>
在遍歷字典的時候,foo 其實是相當於拿出了字典中的Key
結果:
4.結合所有的字串兒全部專遞前端Jinja2 模板
後端:
@app.route("/allstudent") def all_student(): return render_template("all_student.html", student=STUDENT , student_list = STUDENT_LIST, student_dict= STUDENT_DICT)
前端:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Old Boy EDU</title> </head> <body> <div> _____________________________________</div> Welcome to Old Boy EDU : student <div>{{ student }}</div> <table border="1px"> <tr> <td>{{ student.name }}</td> <td>{{ student["age"] }}</td> <td>{{ student.get("gender") }}</td> </tr> </table> <div> _____________________________________</div> Welcome to Old Boy EDU : student_list <div>{{ student_list }}</div> <table border="1xp"> {% for foo in student_list %} <tr> <td>{{ foo }}</td> <td>{{ foo.name }}</td> <td>{{ foo.get("age") }}</td> <td>{{ foo["gender"] }}</td> </tr> {% endfor %} </table> <div> _____________________________________</div> Welcome to Old Boy EDU : student_dict <div>{{ student_dict }}</div> <table border="1xp"> {% for foo in student_dict %} <tr> <td>{{ foo }}</td> <td>{{ student_dict.get(foo).name }}</td> <td>{{ student_dict[foo].get("age") }}</td> <td>{{ student_dict[foo]["gender"] }}</td> </tr> {% endfor %} </table> </body> </html>
結果:
這裡可以看出來,render_template中可以傳遞多個關鍵字
5.利用 **{}字典的方式傳遞引數
前端不變(標題4的前端程式碼)
後端:
@app.route("/allstudent") def all_student(): return render_template("all_student.html", **{"student":STUDENT , "student_list" : STUDENT_LIST, "student_dict": STUDENT_DICT})
6. Jinja2 的高階用法
Jinja2 模板語言為我們提供了很多功能接下來看一下它有什麼高階的用法
6.1. safe : 此時你與HTML只差一個 safe
後端程式碼:
from flask import Flask from flask import render_template app = Flask(__name__) @app.route("/") def index(): tag = "<input type='text' name='user' value='DragonFire'>" return render_template("index.html",tag=tag) app.run("0.0.0.0",5000)
前端程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ tag }} </body> </html>前端程式碼
如果我們直接執行程式碼直接訪問,你會在頁面看到什麼呢?
似乎和我們想要結果不太一樣,有兩種解決方案,
第一種,從前端入手
前端程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ tag | safe}} <!-- 加上個 \ 管道符,然後 safe --> </body> </html>前端程式碼
還有一種方式是從後端入手
後端程式碼:
from flask import Flask from flask import render_template from flask import Markup # 匯入 flask 中的 Markup 模組 app = Flask(__name__) @app.route("/") def index(): tag = "<input type='text' name='user' value='DragonFire'>" markup_tag = Markup(tag) # Markup幫助咱們在HTML的標籤上做了一層封裝,讓Jinja2模板語言知道這是一個安全的HTML標籤 print(markup_tag, type(markup_tag)) # <input type='text' name='user' value='DragonFire'> <class 'markupsafe.Markup'> return render_template("index.html", tag=markup_tag) app.run("0.0.0.0", 5000, debug=True)
兩種得到的效果是一樣
6.2 在Jinja2中執行Python函式(模板中執行函式)
首先在檔案中定義一個函式
後端程式碼:
from flask import Flask from flask import render_template from 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)
前端程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ tag }} <br> {{ tag(99,1) }} </body> </html>
看到結果就是,函式加()執行得到結果
還可以定義全域性函式,無需後端傳遞給前端,Jinja2直接就可以執行的函式
後端程式碼:
from flask import Flask from flask import render_template from 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)
前端程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ a_b_sum(99,1) }} <br> {{ 1 | a_b_c_sum(197,2) }} </body> </html>
兩個函式的呼叫方式不太一樣
尤其是@app.template_filter() 它的呼叫方式比較特別,這是兩個Flask中的特殊裝飾器
6.3 Jinja2模板複用 block
如果我們前端頁面有大量重複頁面,沒必要每次都寫,可以使用模板複用的方式複用模板
前端程式碼:
index.html 檔案中的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Welcome OldboyEDU</h1> <h2>下面的內容是不一樣的</h2> {% block content %} {% endblock %} <h2>上面的內容是不一樣的,但是下面的內容是一樣的</h2> <h1>OldboyEDU is Good</h1> </body> </html>index.html
login.html 檔案中的內容
{% extends "index.html" %} {% block content %} <form> 使用者名稱:<input type="text" name="user"> 密碼:<input type="text" name="pwd"> </form> {% endblock %}login.html
home.html 檔案中的內容
{% extends "index.html" %} {% block content %} <h1>歡迎來到老男孩教育</h1> {% endblock %}home.html
後端程式碼:
from flask import Flask from flask import render_template app = Flask(__name__) @app.route("/login") def login(): return render_template("login.html") @app.route("/home") def home(): return render_template("home.html") app.run("0.0.0.0", 5000, debug=True)
然後我們可以看到什麼呢?
大概是這樣一個效果
在這兩個頁面中,只有 block 中的內容發生了變化,其他的位置完全一樣
6.4 Jinja2模板語言的模組引用 include
login.html 檔案中的內容:
<form> 使用者名稱:<input type="text" name="user"> 密碼:<input type="text" name="pwd"> </form>
index.html 檔案中的內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Welcome OldboyEDU</h1> <h2>下面的內容是不一樣的</h2> {% include "login.html" %} <h2>上面的內容是不一樣的,但是下面的內容是一樣的</h2> <h1>OldboyEDU is Good</h1> </body> </html>
後端程式碼:
from flask import Flask from flask import render_template app = Flask(__name__) @app.route("/") def index(): return render_template("index.html") app.run("0.0.0.0", 5000, debug=True)
看到的結果
這就是將 login.html 當成一個模組,載入到 index.html 頁面中
6.5 Jinja2模板語言中的巨集定義
前端程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>Welcome OldboyEDU</h1> {% macro type_text(name,type) %} <input type="{{ type }}" name="{{ name }}" value="{{ name }}"> {% endmacro %} <h2>在下方是使用巨集來生成input標籤</h2> {{ type_text("one","text") }} {{ type_text("two","text") }} </body> </html>
巨集定義一般情況下很少應用到,但是要知道有這麼個概念
是時候開始寫個前端了,Flask中預設的模板語言是Jinja2
現在我們來一步一步的學習一下 Jinja2 捎帶手把 render_template 中留下的疑問解決一下
首先我們要在後端定義幾個字串,用於傳遞到前端
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模板中的流程控制:
I. Jinja2模板語言中的 for
{% for foo in g %}
{% endfor %}
II. Jinja2模板語言中的 if
{% if g %}
{% elif g %}
{% else %}
{% endif %}
接下來,我們對這幾種情況分別進行傳遞,並在前端顯示成表格
1. 使用STUDENT字典傳遞至前端
後端:
@app.route("/student") def index(): return render_template("student.html", student=STUDENT)
前端:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Old Boy EDU</title> </head> <body> Welcome to Old Boy EDU <div>{{ student }}</div> <table border="1px"> <tr> <td>{{ student.name }}</td> <td>{{ student["age"] }}</td> <td>{{ student.get("gender") }}</td> </tr> </table> </body> </html>
結果:
從這個例子中,可以看出來,字典傳入前端Jinja2 模板語言中的取值操作, 與Python中的Dict操作極為相似,並且多了一個student.name的物件操作
2. STUDENT_LIST 列表傳入前端Jinja2 模板的操作:
後端:
@app.route("/student_list") def student_list(): return render_template("student_list.html", student=STUDENT_LIST)
前端:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Old Boy EDU</title> </head> <body> Welcome to Old Boy EDU <div>{{ student }}</div> <table border="1xp"> {% for foo in student %} <tr> <td>{{ foo }}</td> <td>{{ foo.name }}</td> <td>{{ foo.get("age") }}</td> <td>{{ foo["gender"] }}</td> </tr> {% endfor %} </table> </body> </html>
結果:
這裡我們可以看出如果是需要迴圈遍歷的話,Jinja2 給我們的方案是
{% for foo in student %} <tr> <td>{{ foo }}</td> </tr> {% endfor %}
上述程式碼中的 foo 就是列表中的每一個字典,再使用各種取值方式取出值即可
3.STUDENT_DICT 大字典傳入前端 Jinja2 模板
後端:
@app.route("/student_dict") def student_dict(): return render_template("student_dict.html", student=STUDENT_DICT)
前端:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Old Boy EDU</title> </head> <body> Welcome to Old Boy EDU <table> {% for foo in student %} <tr> <td>{{ foo }}</td> <td>{{ student.get(foo).name }}</td> <td>{{ student[foo].get("age") }}</td> <td>{{ student[foo]["gender"] }}</td> </tr> {% endfor %} </table> </body> </html>
在遍歷字典的時候,foo 其實是相當於拿出了字典中的Key
結果:
4.結合所有的字串兒全部專遞前端Jinja2 模板
後端:
@app.route("/allstudent") def all_student(): return render_template("all_student.html", student=STUDENT , student_list = STUDENT_LIST, student_dict= STUDENT_DICT)
前端:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Old Boy EDU</title> </head> <body> <div> _____________________________________</div> Welcome to Old Boy EDU : student <div>{{ student }}</div> <table border="1px"> <tr> <td>{{ student.name }}</td> <td>{{ student["age"] }}</td> <td>{{ student.get("gender") }}</td> </tr> </table> <div> _____________________________________</div> Welcome to Old Boy EDU : student_list <div>{{ student_list }}</div> <table border="1xp"> {% for foo in student_list %} <tr> <td>{{ foo }}</td> <td>{{ foo.name }}</td> <td>{{ foo.get("age") }}</td> <td>{{ foo["gender"] }}</td> </tr> {% endfor %} </table> <div> _____________________________________</div> Welcome to Old Boy EDU : student_dict <div>{{ student_dict }}</div> <table border="1xp"> {% for foo in student_dict %} <tr> <td>{{ foo }}</td> <td>{{ student_dict.get(foo).name }}</td> <td>{{ student_dict[foo].get("age") }}</td> <td>{{ student_dict[foo]["gender"] }}</td> </tr> {% endfor %} </table> </body> </html>
結果:
這裡可以看出來,render_template中可以傳遞多個關鍵字
5.利用 **{}字典的方式傳遞引數
前端不變(標題4的前端程式碼)
後端:
@app.route("/allstudent") def all_student(): return render_template("all_student.html", **{"student":STUDENT , "student_list" : STUDENT_LIST, "student_dict": STUDENT_DICT})
6. Jinja2 的高階用法
Jinja2 模板語言為我們提供了很多功能接下來看一下它有什麼高階的用法
6.1. safe : 此時你與HTML只差一個 safe
後端程式碼:
from flask import Flask from flask import render_template app = Flask(__name__) @app.route("/") def index(): tag = "<input type='text' name='user' value='DragonFire'>" return render_template("index.html",tag=tag) app.run("0.0.0.0",5000)
前端程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ tag }} </body> </html>前端程式碼
如果我們直接執行程式碼直接訪問,你會在頁面看到什麼呢?
似乎和我們想要結果不太一樣,有兩種解決方案,
第一種,從前端入手
前端程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> {{ tag | safe}} <!-- 加上個 \ 管道符,然後 safe --> </body> </html>前端程式碼
還有一種方式是從後端入手
後端程式碼:
from flask import Flask from flask import render_template from flask import Markup # 匯入 flask 中的 Markup 模組 app = Flask(__name__) @app.route("/") def index(): tag = "<input type='text' name='user' value='DragonFire'>" markup_tag = Markup(tag) # Markup幫助咱們在HTML的標籤上做了一層封裝,讓Jinja2模板語言知道這是一個安全的HTML標籤 print(markup_tag, type(markup_tag)) # <input type='text' name='user' value='DragonFire'> <class 'markupsafe.Markup'> return render_template("index.html", tag=markup_tag) app.run("0.0.0.0", 5000, debug=True)
兩種得到的效果是一樣
6.2 在Jinja2中執行Python函式(模板中執行函式)
首先在檔案中定義一個函式
後端程式碼:
from flask import Flask from flask import render_template from 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)
前端程式碼:
相關推薦
Flask中模板語言Jinja2以及render_template
是時候開始寫個前端了,Flask中預設的模板語言是Jinja2 現在我們來一步一步的學習一下 Jinja2 捎帶手把 render_template 中留下的疑問解決一下 首先我們要在後端定義幾個字串,用於傳遞到前端 STUDENT = {'name': 'Ol
Flask初識,第四篇 Jinja2 及 render_template 的深度用法 Flask最強攻略 - 第四篇 Flask 中的模板語言 Jinja2 及 render_template 的深度用法
Flask最強攻略 - 第四篇 Flask 中的模板語言 Jinja2 及 render_template 的深度用法 是時候開始寫個前端了,Flask中預設的模板語言是Jinja2 現在我們來一步一步的學習一下 Jinja2 捎帶手把 render_templat
第四篇 Flask 中的模板語言 Jinja2 及 render_template 的深度用法
是時候開始寫個前端了,Flask中預設的模板語言是Jinja2 現在我們來一步一步的學習一下 Jinja2 捎帶手把 render_template 中留下的疑問解決一下 首先我們要在後端定義幾個字串,用於傳遞到前端 STUDENT = {'name': 'Old', 'age': 38, 'ge
Flask中的模板語言Jinja2及render_template
b- 復用 情況下 裝飾 ren bsp type form 管道符 Flask中默認的模板語言是Jinja2 在學習Jinja2前render_template中留下的問題解決 1.首先我們要在後端定義幾個字符串,用於傳遞到前端 STUDENT = {‘name
第三篇 Flask 中的模板語言 Jinja2 及 render_template 的深度用法
tab bsp () 我們 ood 代碼 它的 ldb oct 是時候開始寫個前端了,Flask中默認的模板語言是Jinja2 現在我們來一步一步的學習一下 Jinja2 捎帶手把 render_template 中留下的疑問解決一下 首先我們要在後端定義幾個字符串,用
Flask 第四篇 Flask 中的模板語言 Jinja2 及 render_template 的深度用法
訪問 學習 turn hide index 模板語言 post login title 是時候開始寫個前端了,Flask中默認的模板語言是Jinja2 現在我們來一步一步的學習一下 Jinja2 捎帶手把 render_template 中留下的疑問解決一下 首
flask中一對一,一對多以及多對多關係的設定
一對多關係: class Grade(db.Model): id=db.Column(db.Integer,primary_key=True) name=db.Column(db.String(20),nullable=False) num = db.Column(db.Int
python中模板引擎Jinja2學習
1.Jinja2 Jinja2是基於python的模板引擎,功能比較類似於於PHP的smarty,J2ee的Freemarker和velocity。 它能完全支援unicode,並具有整合的沙箱執行環境,應用廣泛。使用Jinja2的方式一般是,先建立一個包括{
Flask中的模型類以及資料的增刪改查操作
總結: 模型類如下: class Role(db.Model): """使用者角色/身份表""" __tablename__ = "tbl_roles" # 表名 # 欄位名 型別 約束 id = db.Colum
Flask中模板及其使用(一)
Flask中模板及其使用 所謂模板,其實就是一個包含響應文字的檔案,其中用佔位符(變數)表示動態部分,告訴模板引擎其具體的值需要從使用的
Python Flask,模板,Jinja2模板,模板變數,過濾器
demo.py(模板變數,過濾器): # coding:utf-8 from flask import Flask, render_template # 匯入render_template app = Flask(__name__) @app.route("/ind
Flask中模板及其使用(二)
Flask中模板及其使用(二)一.Flask模板中的特殊變數和函式 用途:可以在自己的模板中訪問一些Flask預設內建的函式和物件.當然,這些變數在檢視
第三章 Flask——模板語言之Jinja2及render_template
第三章 Flask——模板語言之Jinja2及render_template 一、Jinja2介紹 二、Flask中的render_template 一、Jinja2介紹 什麼是Jinja2(what): Flask中預設的模板語言是Jinja2,Jinja2是基於p
Python框架學習之Flask中的Jinja2模板
代碼復用 表單 filter 中繼 IT AD 存在 開啟 技術分享 前面也提到過在Flask中最核心的兩個組件是Werkzeug和Jinja2模板。其中Werkzeug在前一節已經詳細說明了。現在這一節主要是來談談Jinja2模板。 一、為什麽需要引入模板: 在進
114 flask第一天 request 引數 response jinja2(模板語言) session
主要內容:https://www.cnblogs.com/DragonFire/p/9259999.html 1 django, flask, tornado框架的總結 a : django web 優點:大而全,ORM models ,model Form ,admin ,cs
Flask中render_template的使用和模板的繼承
這就是傳說中的MVC:Model-View-Controller,中文名“模型-檢視-控制器”。 Python處理URL的函式就是C:Controller,Controller負責業務邏輯,比如檢查使用者名稱是否存在,取出使用者資訊等等; 包含變數{{
Flask框架(flask模板(jinja2)與字串過濾器、列表過濾器以及自定義過濾器)
模板變數 : {{name}} 1. 模板的定義: 模板變數 : {{name}} 2. 模板的渲染: render_template("模板名字",鍵=值,鍵=值) 例如: render_template
flask中的session,render_template()第二和參數是字典
ren 字典 保險 登入 com session nbsp ssi png 1. 設置一個secret_key 2.驗證登入後加上session,這是最簡單,不保險 . 3.註意render_template傳的參數是字典 flask中的session,render_
flask如何設置模板語言Jinjia?如何查看路由視圖函數映射?
文件 命名 temp 函數 靜態 sta static clas char 首先flask的模板和靜態文件命名必須是確定的templates和static pycharm的模板語言設置 flask如何設置模板語言Jinjia?如何查看路由視圖函數映射?
flask中jinjia2模板引擎使用詳解1
模板 文本文 安全 檢查 引擎 分解 擴展名 結果 解釋 在之前的文章中我們介紹過flask調用jinja2模板的基本使用,這次我們來說一下jinjia2模板的使用 Jinja2 在其是一個 Python 2.4 庫之前,被設計 為是靈活、快速和安全的。 模板僅僅是文本文件