Flask如何结合Jinja2模板引擎返回渲染后HTML

更新时间：2025年06月25日 10:02:30 作者：大霸王龙

在 Flask 中结合 Jinja2 模板引擎返回渲染后的 HTML 是核心功能之一,本文主要介绍了详细实现方法和最佳实践,有需要的小伙伴可以跟随小编一起学习一下

一、基础模板渲染

1. 项目结构准备

myapp/
├── app.py # Flask主程序
├── templates/ # 模板目录
│ └── index.html # Jinja2模板
└── static/ # 静态资源（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>

二、高级模板技巧

1. 模板继承（Layout系统）

<!-- 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>这是子页面内容</h1>
{% endblock %}

2. 宏（Macros）实现组件复用

<!-- 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}) }}

三、动态数据与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动态加载（推荐）

# 提供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 = 
          `服务器数据: ${data.data.join(', ')}`;
  });

四、常见问题解决方案

1. 缓存问题

开发时禁用缓存：

@app.after_request
def add_header(response):
    if 'Cache-Control' not in response.headers:
        response.headers['Cache-Control'] = 'no-store'
    return response

2. 处理表单数据

@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>

五、性能优化建议

1.模板缓存（生产环境启用）：

app.config['TEMPLATES_AUTO_RELOAD'] = False  # 生产环境设为False

2.静态文件版本控制：

<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>

六、安全注意事项

1.始终转义变量：

<!-- 安全 -->
<p>{{ user_input | escape }}</p>

<!-- 危险！避免直接渲染HTML -->
<p>{{ user_input | safe }}</p>

2.内容安全策略（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 = []  # 这里替换为实际搜索逻辑
    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中实现：

动态HTML渲染
前后端数据交互
组件化开发
安全的内容输出

关键点是合理使用Jinja2的模板继承、控制结构和过滤器，同时注意安全性和性能优化。

到此这篇关于Flask如何结合Jinja2模板引擎返回渲染后HTML的文章就介绍到这了,更多相关Flask Jinja2返回渲染后HTML内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

flask
jinja2

解决python gdal投影坐标系转换的问题
今天小编就为大家分享一篇解决python gdal投影坐标系转换的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-01-01
Python利用Spire.PDF for Python库抽取PDF文档文本
在当今数字化的世界中,PDF无疑是最普遍的文档格式之一,无论是报告、合同、发票还是学术论文,PDF都承载着海量的信息,本文将深入探讨如何利用Spire.PDF for Python库,高效、准确地从PDF文档中提取文本,需要的朋友可以参考下
2026-02-02
Java byte数组操纵方式代码实例解析
这篇文章主要介绍了Java byte数组操纵方式代码实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-07-07
python基于TCP实现的文件下载器功能案例
这篇文章主要介绍了python基于TCP实现的文件下载器功能,结合具体实例形式分析了Python使用socket模块实现的tcp协议下载功能客户端与服务器端相关操作技巧,需要的朋友可以参考下
2019-12-12
Python生成器next方法和send方法区别详解
这篇文章主要介绍了Python生成器next方法和send方法区别详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
python实现爬虫统计学校BBS男女比例（一）
这篇文章主要介绍了python实现爬虫统计学校BBS男女比例，,需要的朋友可以参考下
2015-12-12
Python终端输出彩色字符方法详解
这篇文章主要介绍了Python终端输出彩色字符方法详解,需要的朋友可以参考下
2020-02-02
Python Docx库完美操作word文档实例探究
这篇文章主要为大家介绍了Python Docx库完美操作word文档,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2024-01-01
Python删除列表中多个元素的四种方法总结
这篇文章主要给大家介绍了关于Python删除列表中多个元素的四种方法,在Python中想要删除列表的某个元素,可以使用本文介绍的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-09-09
python中的property及属性与特性之间的优先权
这篇文章主要介绍了python中的property及属性与特性之间的优先权，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07