编程部落

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

作者：

风君子

在

文章目录
  • 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内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！ 您可能感兴趣的文章: Python Flask JinJa2 语法使用示例详解 flask结合jinja2使用详解 Flask中jinja2的继承实现方法及实例 Flask模板引擎Jinja2使用实例 flask框架jinja2模板与模板继承实例分析 Flask模板引擎之Jinja2语法介绍 Python的Flask框架标配模板引擎Jinja2的使用教程 Python的Flask框架中的Jinja2模板引擎学习教程
    • 目录
    • 一、基础模板渲染
      • 1. 项目结构准备
      • 2. 基本渲染示例
    • 二、高级模板技巧
      • 1. 模板继承（Layout系统）
      • 2. 宏（Macros）实现组件复用
    • 三、动态数据与JS交互
      • 1. 直接传递JSON到JS
      • 2. AJAX动态加载（推荐）
    • 四、常见问题解决方案
      • 1. 缓存问题
      • 2. 处理表单数据
    • 五、性能优化建议
      • 六、安全注意事项
        • 七、完整工作流程示例

          在 Flask 中结合 Jinja2 模板引擎返回渲染后的 HTML 是核心功能之一。以下是详细实现方法和最佳实践：

          myapp/
          ├── app.py          # Flask主程序
          ├── templates/      # 模板目录
          │   └── index.html  # Jinja2模板
          └── static/         # 静态资源（CSS/JS/图片）

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


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


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


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


          # 提供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(', ')}`;
  });

          开发时禁用缓存：

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


          @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内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客！

          您可能感兴趣的文章:

          • Python Flask JinJa2 语法使用示例详解
          • flask结合jinja2使用详解
          • Flask中jinja2的继承实现方法及实例
          • Flask模板引擎Jinja2使用实例
          • flask框架jinja2模板与模板继承实例分析
          • Flask模板引擎之Jinja2语法介绍
          • Python的Flask框架标配模板引擎Jinja2的使用教程
          • Python的Flask框架中的Jinja2模板引擎学习教程

          更多文章

          站内搜索

          标签云

          iphone 三星 信用卡 信贷 华为 小米 微软 快科技 手机 投资理财 支付宝 特斯拉 理财知识 电脑 科技 程序 股票 芯片 苹果 贷款 路由器 银行 银行卡 额度

          热门文章

          友情链接