如何在腾讯云做网站,怎么做软件推广赚钱,网站建设运营与维护标准,网页设计速成班培训在 Flask 中结合 Jinja2 模板引擎返回渲染后的 HTML 是核心功能之一。以下是详细实现方法和最佳实践#xff1a; 一、基础模板渲染
1. 项目结构准备
myapp/
├── app.py # Flask主程序
├── templates/ # 模板目录
│ └── index.html # Jinja2模板
…在 Flask 中结合 Jinja2 模板引擎返回渲染后的 HTML 是核心功能之一。以下是详细实现方法和最佳实践 一、基础模板渲染
1. 项目结构准备
myapp/
├── app.py # Flask主程序
├── templates/ # 模板目录
│ └── index.html # Jinja2模板
└── static/ # 静态资源CSS/JS/图片2. 基本渲染示例
# app.py
from flask import Flask, render_templateapp Flask(__name__)app.route(/)
def home():return render_template(index.html, title首页,user{name: 张三, age: 25})!-- templates/index.html --
!DOCTYPE html
html
headtitle{{ title }}/titlelink href{{ url_for(static, filenamecss/style.css) }} relstylesheet
/head
bodyh1欢迎, {{ 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 classuser-cardh3{{ user.name }}/h3p年龄: {{ 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));
/script2. 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-storereturn response2. 处理表单数据
app.route(/submit, methods[POST])
def submit():username request.form.get(username)return render_template(result.html, usernameusername)form methodPOST action/submitinput typetext nameusernamebutton typesubmit提交/button
/form五、性能优化建议 模板缓存生产环境启用 app.config[TEMPLATES_AUTO_RELOAD] False # 生产环境设为False静态文件版本控制 link href/static/css/style.css?v{{ config.VERSION }} relstylesheet异步加载 script defer src{{ url_for(static, filenamejs/app.js) }}/script六、安全注意事项 始终转义变量 !-- 安全 --
p{{ user_input | escape }}/p!-- 危险避免直接渲染HTML --
p{{ user_input | safe }}/p 内容安全策略CSP app.after_request
def add_csp(response):response.headers[Content-Security-Policy] default-src selfreturn response七、完整工作流程示例
# app.py
from flask import Flask, render_template, requestapp Flask(__name__)app.route(/search)
def search():query request.args.get(q, )results [] # 这里替换为实际搜索逻辑return render_template(search.html,queryquery,resultsresults)if __name__ __main__:app.run(debugTrue)!-- templates/search.html --
{% extends layout.html %}{% block content %}
form action/searchinput typetext nameq value{{ query }}button搜索/button
/formul{% for item in results %}li{{ item }}/li{% endfor %}
/ul
{% endblock %}通过以上方法您可以高效地在Flask中实现
动态HTML渲染前后端数据交互组件化开发安全的内容输出
关键点是合理使用Jinja2的模板继承、控制结构和过滤器同时注意安全性和性能优化。
