Flask中的模板的使用

简介: Flask中的模板的使用

Flask中的模板的使用


简介:本文讲解Flask中的模板的使用。


Flask项目创建参考这篇文章:通过命令行的方式快速创建一个flask项目


创建模板文件


在应用程序目录下创建一个名为 templates 的文件夹,用于存放模板文件。在 templates 文件夹中创建一个名为 index.html 的 HTML 模板文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Template Example</title>
</head>
<body>
    <h1>Hello, Flask!</h1>
    <p>Welcome to Flask template example.</p>
</body>
</html>


模板中的变量


Flask 允许我们在模板中使用变量,以便动态地显示内容。可以在视图函数中将数据传递给模板,在模板中使用 Jinja2 模板语法来渲染变量。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    username = 'John'
    return render_template('index.html', username=username)

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

在模板中,我们可以通过双花括号 {{ variable }} 来渲染变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello, {{ username }}</title>
</head>
<body>
    <h1>Hello, {{ username }}!</h1>
    <p>Welcome to Flask template example.</p>
</body>
</html>

  • 运行结果展示


模板中的控制结构


除了渲染变量外,Flask 模板还支持使用控制结构,如条件语句和循环语句。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User List</title>
</head>
<body>
    <h1>User List</h1>
    <ul>
        {% for user in users %}
        <li>{{ user }}</li>
        {% endfor %}
    </ul>
</body>
</html>

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    users = ['Alice', 'Bob', 'Charlie']
    return render_template('user_list.html', users=users)

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

  • 运行结果展示


模板的继承


Flask 模板支持继承,这使得我们可以创建一个基础模板,并在其他模板中扩展和覆盖它。

base.html:

<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>{% block title %}My Website{% endblock %}</title>
  </head>
  <body>
      <nav>
          <a href="/">Home</a>
          <a href="/about">About</a>
      </nav>
      {% block content %}
      {% endblock %}
  </body>
  </html>

index.html:

{% extends 'base.html' %}

{% block title %}Home - My Website{% endblock %}

{% block content %}
<h1>Welcome to My Website!</h1>
<p>This is the home page.</p>
{% endblock %}

  • 运行结果

编写一个运行的后端代码

相关文章
|
6天前
|
存储 移动开发 前端开发
Flask狼书笔记 | 03_模板
3 模板 模板(template):包含固定内容和动态部分的可重用文件。Jinja2模板引擎可用于任何纯文本文件。 3.1 模板基本使用
35 0
|
6天前
|
开发框架 Python
Web 框架 Flask 快速入门(一)flask基础与模板
🌴 Flask基础和模板 1、web框架的作用 避免重复造轮子,app程序不必关心于服务器的沟通方式,而专注于核心的业务逻辑实现。 稳定,可扩展性强
48 0
|
6月前
|
JavaScript 前端开发 知识图谱
flask-模板用法
flask-模板用法
33 0
|
9月前
|
数据可视化 定位技术 Python
可视化 | 分享一套Flask+Pyecharts可视化模板
可视化 | 分享一套Flask+Pyecharts可视化模板
|
10月前
|
前端开发 JavaScript Python
Flask之jinja2模板(三)
Flask之jinja2模板(三)
|
10月前
|
索引 Python
Flask之jinja2模板(二)
Flask之jinja2模板(二)
|
10月前
|
前端开发 JavaScript 数据处理
Flask之jinja2模板(一)
Flask之jinja2模板(一)
|
前端开发 JavaScript Python
Flask热更新html模板文件和静态文件
Flask热更新html模板文件和静态文件
178 0
|
前端开发 JavaScript Python
Flask学习与项目实战3:简单入手模板及高阶使用
声明:本学习系列笔记是来源B站 知了传课 up主的教学视频的个人学习笔记,原up主教学视频地址:https://www.bilibili.com/video/BV17r4y1y7jJ?p=10。
Flask学习与项目实战3:简单入手模板及高阶使用
|
存储 JSON 缓存
python flask template 模板应用
python flask template 模板应用
python flask template 模板应用