Flask如何結(jié)合Jinja2模板引擎返回渲染后HTML
更新時(shí)間：2025年06月25日 10:02:30 作者：大霸王龍
在 Flask 中結(jié)合 Jinja2 模板引擎返回渲染后的 HTML 是核心功能之一,本文主要介紹了詳細(xì)實(shí)現(xiàn)方法和最佳實(shí)踐,有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
在 Flask 中結(jié)合 Jinja2 模板引擎返回渲染后的 HTML 是核心功能之一。以下是詳細(xì)實(shí)現(xiàn)方法和最佳實(shí)踐：
一、基礎(chǔ)模板渲染
1. 項(xiàng)目結(jié)構(gòu)準(zhǔn)備
myapp/
├── app.py # Flask主程序
├── templates/ # 模板目錄
│ └── index.html # Jinja2模板
└── static/ # 靜態(tài)資源（CSS/JS/圖片）
2. 基本渲染示例
# app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html',
title='首頁',
user={'name': '張三', 'age': 25})
<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link href="{{ url_for('static', filename='css/style.css') }}" rel="external nofollow" rel="stylesheet">
</head>
<body>
<h1>歡迎, {{ user.name }}!</h1>
{% if user.age >= 18 %}
<p>您是成年人</p>
{% else %}
<p>您是未成年人</p>
{% endif %}
</body>
</html>
二、高級(jí)模板技巧
1. 模板繼承（Layout系統(tǒng)）
<!-- templates/layout.html -->
<html>
<head>
{% block head %}
<title>{% block title %}{% endblock %}</title>
{% endblock %}
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>
<!-- templates/page.html -->
{% extends "layout.html" %}
{% block title %}子頁面{% endblock %}
{% block content %}
<h1>這是子頁面內(nèi)容</h1>
{% endblock %}
2. 宏（Macros）實(shí)現(xiàn)組件復(fù)用
<!-- templates/macros.html -->
{% macro render_user(user) %}
<div class="user-card">
<h3>{{ user.name }}</h3>
<p>年齡: {{ user.age }}</p>
</div>
{% endmacro %}
<!-- 使用宏 -->
{% from "macros.html" import render_user %}
{{ render_user({'name': '李四', 'age': 30}) }}
三、動(dòng)態(tài)數(shù)據(jù)與JS交互
1. 直接傳遞JSON到JS
# Flask路由
@app.route('/data')
def get_data():
return render_template('data.html',
items=[1, 2, 3],
config={'debug': True})
<script>
const APP_CONFIG = {{ config | tojson | safe }};
const ITEMS = {{ items | tojson | safe }};
console.log(APP_CONFIG.debug); // true
ITEMS.forEach(item => console.log(item));
</script>
2. AJAX動(dòng)態(tài)加載（推薦）
# 提供JSON API
@app.route('/api/data')
def api_data():
return jsonify({'data': [4,5,6]})
// 前端通過fetch獲取
fetch('/api/data')
.then(res => res.json())
.then(data => {
document.getElementById('output').innerHTML =
`服務(wù)器數(shù)據(jù): ${data.data.join(', ')}`;
});
四、常見問題解決方案
1. 緩存問題
開發(fā)時(shí)禁用緩存：
@app.after_request
def add_header(response):
if 'Cache-Control' not in response.headers:
response.headers['Cache-Control'] = 'no-store'
return response
2. 處理表單數(shù)據(jù)
@app.route('/submit', methods=['POST'])
def submit():
username = request.form.get('username')
return render_template('result.html', username=username)
<form method="POST" action="/submit">
<input type="text" name="username">
<button type="submit">提交</button>
</form>
五、性能優(yōu)化建議
1.模板緩存（生產(chǎn)環(huán)境啟用）：
app.config['TEMPLATES_AUTO_RELOAD'] = False # 生產(chǎn)環(huán)境設(shè)為False
2.靜態(tài)文件版本控制：
<link href="/static/css/style.css?v={{ config.VERSION }}" rel="external nofollow" rel="stylesheet">
3.異步加載：
<script defer src="{{ url_for('static', filename='js/app.js') }}"></script>
六、安全注意事項(xiàng)
1.始終轉(zhuǎn)義變量：
<!-- 安全 -->
<p>{{ user_input | escape }}</p>
<!-- 危險(xiǎn)！避免直接渲染HTML -->
<p>{{ user_input | safe }}</p>
2.內(nèi)容安全策略（CSP）：
@app.after_request
def add_csp(response):
response.headers['Content-Security-Policy'] = "default-src 'self'"
return response
七、完整工作流程示例
# app.py
from flask import Flask, render_template, request
app = Flask(__name__)
@app.route('/search')
def search():
query = request.args.get('q', '')
results = [] # 這里替換為實(shí)際搜索邏輯
return render_template('search.html',
query=query,
results=results)
if __name__ == '__main__':
app.run(debug=True)
<!-- templates/search.html -->
{% extends "layout.html" %}
{% block content %}
<form action="/search">
<input type="text" name="q" value="{{ query }}">
<button>搜索</button>
</form>
<ul>
{% for item in results %}
<li>{{ item }}</li>
{% endfor %}
</ul>
{% endblock %}
通過以上方法，您可以高效地在Flask中實(shí)現(xiàn)：
- 動(dòng)態(tài)HTML渲染
- 前后端數(shù)據(jù)交互
- 組件化開發(fā)
- 安全的內(nèi)容輸出
關(guān)鍵點(diǎn)是合理使用Jinja2的模板繼承、控制結(jié)構(gòu)和過濾器，同時(shí)注意安全性和性能優(yōu)化。
到此這篇關(guān)于Flask如何結(jié)合Jinja2模板引擎返回渲染后HTML的文章就介紹到這了,更多相關(guān)Flask Jinja2返回渲染后HTML內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決python gdal投影坐標(biāo)系轉(zhuǎn)換的問題
今天小編就為大家分享一篇解決python gdal投影坐標(biāo)系轉(zhuǎn)換的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-01-01
Python利用Spire.PDF for Python庫抽取PDF文檔文本
在當(dāng)今數(shù)字化的世界中,PDF無疑是最普遍的文檔格式之一,無論是報(bào)告、合同、發(fā)票還是學(xué)術(shù)論文,PDF都承載著海量的信息,本文將深入探討如何利用Spire.PDF for Python庫,高效、準(zhǔn)確地從PDF文檔中提取文本,需要的朋友可以參考下2026-02-02
Java byte數(shù)組操縱方式代碼實(shí)例解析
這篇文章主要介紹了Java byte數(shù)組操縱方式代碼實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
python基于TCP實(shí)現(xiàn)的文件下載器功能案例
這篇文章主要介紹了python基于TCP實(shí)現(xiàn)的文件下載器功能,結(jié)合具體實(shí)例形式分析了Python使用socket模塊實(shí)現(xiàn)的tcp協(xié)議下載功能客戶端與服務(wù)器端相關(guān)操作技巧,需要的朋友可以參考下2019-12-12
Python生成器next方法和send方法區(qū)別詳解
這篇文章主要介紹了Python生成器next方法和send方法區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
python實(shí)現(xiàn)爬蟲統(tǒng)計(jì)學(xué)校BBS男女比例（一）
這篇文章主要介紹了python實(shí)現(xiàn)爬蟲統(tǒng)計(jì)學(xué)校BBS男女比例，,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了Python終端輸出彩色字符方法詳解,需要的朋友可以參考下2020-02-02
Python Docx庫完美操作word文檔實(shí)例探究
這篇文章主要為大家介紹了Python Docx庫完美操作word文檔,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2024-01-01
Python刪除列表中多個(gè)元素的四種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Python刪除列表中多個(gè)元素的四種方法,在Python中想要?jiǎng)h除列表的某個(gè)元素,可以使用本文介紹的方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
python中的property及屬性與特性之間的優(yōu)先權(quán)
這篇文章主要介紹了python中的property及屬性與特性之間的優(yōu)先權(quán)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2022-07-07