Flask 四）模板系统_flask 模板-CSDN博客

本文链接：https://blog.csdn.net/weixin_42998312/article/details/146423775

Flask 使用 Jinja2 作为其模板引擎，提供了强大的 HTML 生成能力，使前后端分离更加清晰。本章将详细介绍 Flask 模板系统的基础知识，包括模板语法、模板变量、模板过滤器、自定义过滤器、模板继承等。

4.1 Flask 模板的基础概念

4.1.1 什么是模板？

模板是一个包含静态 HTML 代码和动态内容占位符的文件。Flask 使用 Jinja2 作为模板引擎，使得可以通过模板动态渲染 HTML。

4.1.2 模板文件存放位置

Flask 约定所有模板文件应存放在 templates/ 目录下：

my_flask_app/

│── app.py

│── templates/

│ ├── index.html

│ ├── about.html

4.2 渲染模板

4.2.1 render_template() 渲染 HTML

在 Flask 视图函数中，可以使用 render_template() 渲染 HTML 文件：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run(debug=True)

在 templates/index.html 里添加：

<!DOCTYPE html><html><head>

    <title>Flask Template</title></head><body>

    <h1>Welcome to Flask Template</h1></body></html>

访问 http://127.0.0.1:5000/，即可看到渲染后的 HTML 页面。

4.3 变量与表达式

4.3.1 传递变量到模板

在 app.py 里：

@app.route('/user/<name>')
def user(name):

    return render_template('user.html', name=name)

在 templates/user.html 里：

<!DOCTYPE html><html><head>

    <title>User Page</title></head><body>

    <h1>Hello, {{ name }}!</h1></body></html>

访问 http://127.0.0.1:5000/user/Alice，会显示 "Hello, Alice!"。

4.3.2 变量默认值

<p>Welcome, {{ name or 'Guest' }}</p>

如果 name 变量未提供，则默认显示 "Guest"。

4.4 条件与循环

4.4.1 if 语句

{% if age >= 18 %}

    <p>Welcome, adult user!</p>

{% else %}

    <p>Sorry, you must be 18 or older.</p>

{% endif %}

4.4.2 for 循环

<ul>

{% for user in users %}

    <li>{{ user }}</li>

{% endfor %}</ul>

如果 users = ['Alice', 'Bob', 'Charlie']，会渲染为：

<ul>

    <li>Alice</li>

    <li>Bob</li>

    <li>Charlie</li></ul>

4.5 过滤器

Jinja2 提供了多种过滤器，用于处理变量的格式化和转换。

4.5.1 常见过滤器示例

<p>{{ message | upper }}</p>
<!-- 转大写 -->
<p>{{ message | lower }}</p>   
<!-- 转小写 -->
<p>{{ price | round(2) }}</p>  
<!-- 四舍五入 -->
<p>{{ users | length }}</p>    
<!-- 计算列表长度 -->
<p>{{ date | default('N/A') }}</p> 
<!-- 变量为空时提供默认值 -->

4.5.2 自定义过滤器

在 app.py 里：

def reverse_string(s):
    return s[::-1]

app.jinja_env.filters['reverse'] = reverse_string

在 templates/index.html 里：

<p>{{ 'hello' | reverse }}</p>

页面显示 "olleh"。

4.6 模板继承

模板继承可以避免重复代码，提高模板的可维护性。

4.6.1 创建 base.html

在 templates/base.html 里：

<!DOCTYPE html>
<html><head>

    <title>{% block title %}Flask App{% endblock %}</title></head><body>

    <header>

        <h1>My Website</h1>

    </header>

    <main>

        {% block content %}{% endblock %}

    </main>

    <footer>

        <p>© 2025 My Website</p>

    </footer></body>
</html>

4.6.2 创建子模板 home.html

在 templates/home.html 里：

{% extends 'base.html' %}

{% block title %}Home Page{% endblock %}

{% block content %}

    <p>Welcome to the Home Page!</p>

{% endblock %}

4.6.3 渲染模板

@app.route('/home')
def home():

    return render_template('home.html')

访问 http://127.0.0.1:5000/home，会看到继承 base.html 的页面。

4.7 静态文件管理

4.7.1 Flask 处理静态文件

Flask 约定所有静态文件存放在 static/ 目录下：

static/

│── css/

│ ├── styles.css

│── js/

│ ├── script.js

│── images/

│ ├── logo.png

4.7.2 引入 CSS

创建 static/css/styles.css：

body {

    background-color: #f4f4f4;

    font-family: Arial, sans-serif;

}

在 base.html 里引入 CSS：

<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">

4.7.3 引入 JavaScript

创建 static/js/script.js：

document.addEventListener('DOMContentLoaded', function() {

    alert("Welcome to Flask!");

});

在 base.html 里引入 JS：

<script src="{{ url_for('static', filename='js/script.js') }}"></script>

4.8 结语

本章介绍了 Flask 模板系统的基础知识，包括模板变量、条件语句、循环、过滤器、自定义过滤器、模板继承和静态文件管理。在下一章，我们将深入探讨 Flask 的表单处理与验证。