当前位置：首页 > article >正文

学习Flask：Day 2：模板与表单开发

article 2026/4/6 15:44:36

学习目标：前后端混合开发

# 添加模板渲染
from flask import render_template@app.route('/profile')
def profile():return render_template('profile.html', username="开发者",skills=['Vue', 'JavaScript'])

✅ 实践任务：

创建templates目录
使用Jinja2语法制作包含循环和条件判断的模板
实现一个注册表单（GET/POST处理）
使用Bootstrap美化页面

要在 Flask 应用中创建 templates 目录以支持 HTML 模板，你可以按照以下步骤进行：

创建 templates 目录：在你的项目根目录下创建一个名为 templates 的文件夹。

创建 HTML 文件：在 templates 目录中创建 HTML 文件，例如 home.html 和 profile.html。

更新 Flask 路由：修改 Flask 路由以渲染这些模板。

以下是一个示例，展示了如何实现这些步骤：

1. 创建 templates 目录和 HTML 文件

在项目根目录下创建 templates 文件夹，并在其中创建以下两个文件：

home.html

profile.html

home.html 内容：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body><h1>欢迎来到首页！</h1>
</body>
</html>

profile.html 内容：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>用户资料</title>
</head>
<body><h1>这是用户资料页面。</h1>
</body>
</html>

2. 更新 Flask 路由

接下来，更新 app.py 文件以渲染这些模板：

# app.py
from flask import Flask, jsonify, render_templateapp = Flask(__name__)@app.route('/')
def home():return render_template('home.html')@app.route('/profile')
def profile():return render_template('profile.html')@app.route('/api')
def api():return jsonify({"message": "这是API端点。"})if __name__ == '__main__':app.run(debug=True)

说明：

使用 render_template 函数来渲染 HTML 模板。

当访问首页时，Flask 将返回 home.html 的内容；访问用户资料页面时，将返回 profile.html 的内容。

运行应用：

确保你的项目结构如下：

/your_project_directory├── app.py└── templates├── home.html└── profile.html

然后在终端中运行 python app.py，并在浏览器中访问相应的路由来查看效果。

使用 Jinja2 语法，你可以在模板中实现循环和条件判断。以下是如何在 Flask 应用中使用 Jinja2 创建包含循环和条件判断的模板的示例。

1. 更新 home.html 模板

我们将更新 home.html 模板，以展示一个包含循环和条件判断的示例。假设我们有一个用户列表，并根据用户的状态显示不同的信息。

更新后的 home.html 内容：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>首页</title>
</head>
<body><h1>欢迎来到首页！</h1><h2>用户列表</h2><ul>{% for user in users %}<li>{{ user.name }} - {% if user.active %}<span style="color: green;">活跃</span>{% else %}<span style="color: red;">不活跃</span>{% endif %}</li>{% endfor %}</ul>
</body>
</html>

2. 更新 app.py 文件

接下来，我们需要在 app.py 中传递一个用户列表到模板中：

# app.py
from flask import Flask, jsonify, render_templateapp = Flask(__name__)@app.route('/')
def home():users = [{"name": "张三", "active": True},{"name": "李四", "active": False},{"name": "王五", "active": True}]return render_template('home.html', users=users)@app.route('/profile')
def profile():return render_template('profile.html')@app.route('/api')
def api():return jsonify({"message": "这是API端点。"})if __name__ == '__main__':app.run(debug=True)

说明：

在 home.html 中，使用 {% for user in users %} 语法来循环遍历用户列表。

使用 {% if user.active %} 语法来判断用户是否活跃，并根据条件显示不同的文本。

在 app.py 中，我们创建了一个用户列表，并将其传递给模板。

运行应用：

确保你的项目结构仍然正确，然后在终端中运行 python app.py。访问首页时，你将看到用户列表及其状态的显示。

要实现一个注册表单并处理 GET 和 POST 请求，你可以按照以下步骤进行：

1. 创建注册表单模板

首先，在 templates 目录中创建一个新的 HTML 文件，例如 register.html，用于显示注册表单。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>注册</title>
</head>
<body><h1>注册表单</h1><form method="POST" action="/register"><label for="username">用户名:</label><input type="text" id="username" name="username" required><br><label for="password">密码:</label><input type="password" id="password" name="password" required><br><button type="submit">注册</button></form>
</body>
</html>

2. 更新 app.py 文件

接下来，更新 app.py 文件以处理注册表单的 GET 和 POST 请求。

# app.py
from flask import Flask, jsonify, render_template, request, redirect, url_forapp = Flask(__name__)@app.route('/')
def home():users = [{"name": "张三", "active": True},{"name": "李四", "active": False},{"name": "王五", "active": True}]return render_template('home.html', users=users)@app.route('/register', methods=['GET', 'POST'])
def register():if request.method == 'POST':username = request.form['username']password = request.form['password']# 在这里可以添加用户注册逻辑，例如保存到数据库print(f"注册用户: {username}, 密码: {password}")  # 仅用于示例return redirect(url_for('home'))  # 注册后重定向到首页return render_template('register.html')@app.route('/profile')
def profile():return render_template('profile.html')@app.route('/api')
def api():return jsonify({"message": "这是API端点。"})if __name__ == '__main__':app.run(debug=True)

说明：

在 register.html 中，创建了一个简单的注册表单，包含用户名和密码字段，使用 POST 方法提交。

在 app.py 中，添加了 /register 路由，处理 GET 和 POST 请求：

当请求方法为 POST 时，获取表单数据并打印（在实际应用中，你可以将其保存到数据库）。

注册成功后，使用 redirect 和 url_for 重定向到首页。

当请求方法为 GET 时，渲染注册表单。

运行应用：

确保你的项目结构正确，然后在终端中运行 python app.py。访问 http://127.0.0.1:5000/register 来查看注册表单，填写信息并提交后将重定向到首页。

要使用 Bootstrap 美化你的 Flask 应用页面，你可以按照以下步骤进行：

1. 引入 Bootstrap

在你的 HTML 模板中引入 Bootstrap 的 CSS 和 JS 文件。你可以使用 Bootstrap 的 CDN（内容分发网络）来快速引入。

2. 更新模板

我们将更新 home.html 和 register.html 模板，以使用 Bootstrap 的样式和组件。

更新后的 home.html 内容：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>首页</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body><div class="container"><h1 class="mt-5">欢迎来到首页！</h1><h2>用户列表</h2><ul class="list-group">{% for user in users %}<li class="list-group-item">{{ user.name }} - {% if user.active %}<span class="text-success">活跃</span>{% else %}<span class="text-danger">不活跃</span>{% endif %}</li>{% endfor %}</ul></div>
</body>
</html>

更新后的 register.html 内容：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>注册</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body><div class="container"><h1 class="mt-5">注册表单</h1><form method="POST" action="/register"><div class="form-group"><label for="username">用户名:</label><input type="text" id="username" name="username" class="form-control" required></div><div class="form-group"><label for="password">密码:</label><input type="password" id="password" name="password" class="form-control" required></div><button type="submit" class="btn btn-primary">注册</button></form></div>
</body>
</html>

说明：

在每个模板的 <head> 部分引入了 Bootstrap 的 CSS 文件。

使用 Bootstrap 的类来美化页面：

在 home.html 中，使用 container 类来设置页面的边距，使用 list-group 和 list-group-item 类来美化用户列表。

在 register.html 中，使用 form-group 和 form-control 类来美化表单输入框，使用 btn 和 btn-primary 类来美化按钮。

运行应用：

确保你的项目结构正确，然后在终端中运行 python app.py。访问首页和注册页面，你将看到使用 Bootstrap 美化后的页面。

学习Flask：Day 2：模板与表单开发

学习目标：前后端混合开发 # 添加模板渲染 from flask import render_templateapp.route(/profile) def profile():return render_template(profile.html, username"开发者",skills[Vue, JavaScript]) ✅ 实践任务： 创建templates目录使用J…...

编程日记 2026/2/18 22:59:30

最长递增子序列（贪心算法）思路+源码

文章目录题目[](https://leetcode.cn/problems/longest-increasing-subsequence/)算法原理源码总结题目首先，要掌握动态规划加二分查找算法原理 1.回顾dp的解法状态表示：dp[i]表示：以i位置的元素为结尾的所有的子序列中，最长递增子序列的长度状态转移方程：dp[i]= m…...

编程日记 2026/4/4 4:00:16

Orange 开源项目 - 集成百度智能云-千帆大模型

1 集成百度智能云-千帆大模型百度智能云-千帆ModelBuilder百度智能云千帆大模型服务与开发平台ModelBuilder（以下简称千帆ModelBuilder）是面向企业开发者的一站式大模型开发及服务运行平台。千帆ModelBuilder不仅提供了包括文心一言底层模型和第三方开源…...

编程日记 2026/4/4 3:17:49

前缀和代码解析

前缀和是指数组一定范围的数的总和,常见的有两种,一维和二维,我会用两道题来分别解析一维 DP34 【模板】前缀和题目: 题目解析: 暴力解法直接遍历数组,遍历到下标为 l 时,开始进行相加,直到遍历到下标为 r ,最后返回总和.这样做的时间复杂度为: O(n) public class Main …...

编程日记 2026/4/5 20:16:54

C 语言结构体：从入门到进阶的全面解析

一、结构体类型的声明 1.1 结构的声明结构体是一种自定义的数据类型，允许将不同类型的数据组合成一个整体。声明语法如下： struct 结构体名 {数据类型成员1;数据类型成员2;// ... }; 示例： struct Student {char name[20];int age;fl…...

编程日记 2026/2/24 19:39:34

交换机与路由器连接方式

交换机和路由器连接的三种主要方式如下： 一、直连连接这是最简单直接的连接方式。通过一根网线将交换机的一个端口与路由器的一个LAN端口相连。这种连接方式适用于小型网络，其中交换机负责局域网内部的数据交换，而路由器则负责将内部网络连接…...

编程日记 2026/2/21 22:49:39

自适应增强技术

1. 传统图像处理中的自适应增强（如CLAHE） 难度：⭐容易实现方式：调用成熟的库（如OpenCV）函数即可完成。示例代码（CLAHE增强）： <PYTHON> import cv2# 输入灰度或彩…...

编程日记 2025/7/28 23:35:36

【前端基础】Day 1 HTML

总结： 1. Web标准的构成 2. 基本标签目录 1. Web标准的构成 2. 基本标签 2.1快捷键 2.2.1标题标签 2.2.2段落和换行标签 2.2.3文本格式化标签 2.2.4div和span标签 2.3.1 图像标签和路径 2.3.2路径 2.3.3超链接标签 2.4注释标签 2.5特殊字符 1. Web标准…...

编程日记 2026/4/5 13:10:01

【前端基础】Day 2 HTML

目录 1.表格标签 2.列表标签 3.表单标签 4.综合案例 5.查阅文档 1.表格标签 <body><table align"center" border"1" cellpadding"0" cellspacing"0" width"500" height"100"><thead> …...

编程日记 2026/4/4 3:40:57

Docker run --add-host参数解析（在容器启动时向/etc/hosts文件中添加自定义的主机名与IP映射）（适用于临时调试或测试）

文章目录 Docker run --add-host 参数解析一、参数概述二、工作原理三、应用场景1. **开发与调试**2. **环境隔离**3. **跨网络访问** 四、使用示例示例 1：单个自定义映射示例 2：多个映射同时使用五、注意事项六、总结 Docker run --add-host 参数解析 …...

编程日记 2025/10/26 8:37:10

电商网站如何解决高并发问题

电商网站如何解决高并发问题？当下电商行业蓬勃发展，电商网站面临的用户访问量和高并发问题日益严峻。在电商大促、节日促销等关键时期，如何确保网站稳定运行，提升用户体验，成为了电商企业亟需解决的问题。小编推荐大家…...

编程日记 2026/4/5 22:20:59

MySQL 入门“鸡”础

一、Win10 与Ubuntu安装以下是一篇针对 Ubuntu 安装 MySQL 的过程中写的示例： --- # Ubuntu 安装 MySQL 详细指南在本教程中，我们将向您展示如何在 Ubuntu 上安装 MySQL，并完成基本的安全配置。以下是具体步骤： # 1. 安装 …...

编程日记 2026/2/6 11:19:19

若依前后端分离框架修改3.8.9版本（重点在安全框架讲解与微信小程序登录集成）

若依模板改造（3.8.9） 1、基础改造下载代码从[RuoYi-Vue: 🎉 基于SpringBoot，Spring Security，JWT，Vue & Element 的前后端分离权限管理系统，同时提供了 Vue3 的版本](https://gitee.co…...

编程日记 2026/4/4 3:21:06

selenium爬取苏宁易购平台某产品的评论

目录 selenium的介绍 1、 selenium是什么？ 2、selenium的工作原理 3、如何使用selenium？ webdriver浏览器驱动设置关键步骤代码运行结果注意事项 selenium的介绍 1、 selenium是什么？ 用于Web应用程序测试的工具。可以驱动浏览…...

编程日记 2026/4/5 12:49:49

kubernetes-完美下载

话不多说，直接开始从0搭建k8s集群环境：centous7.9 2核 20G k8s-master 192.168.37.20 k8s-node1 192.168.37.21 k8s-node2 192.168.37.22 一：设置主机名 #设置主机名 hostnamectl set-hostname k8s-master hostnamectl set-h…...

编程日记 2026/4/3 4:19:39

PostgreSQL 常用函数

PostgreSQL 常用函数在数据库管理系统中，函数是执行特定任务的基本构建块。PostgreSQL 是一个功能强大的开源关系数据库管理系统，提供了丰富的内置函数，这些函数极大地增强了数据库操作的能力。以下是一些在 PostgreSQL 中常用的函数&#…...

编程日记 2025/8/19 14:30:02

【初阶数据结构】树和二叉树

目录前言树的概念与结构树的概念树的相关概念树的表示二叉树的概念及结构二叉树的概念几种特殊的二叉树1.满二叉树2.完全二叉树二叉树的性质二叉树的存储结构1、顺序存储2、链式存储前言前面我们学习了顺序表，单链表，栈和队列，它们在逻…...

编程日记 2026/4/4 6:14:19

【中等】59.螺旋矩阵Ⅱ

题目描述给你一个正整数 n ，生成一个包含 1 到 n2 所有元素，且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。示例 1： 输入：n 3 输出：[[1,2,3],[8,9,4],[7,6,5]]示例 2： 输入：n…...

编程日记 2026/4/4 7:14:13

Spring Boot + Vue 接入腾讯云人脸识别API（SDK版本3.1.830）

一、需求分析这次是基于一个Spring Boot Vue的在线考试系统进行二次开发，添加人脸识别功能以防止学生替考。其他有对应场景的也可按需接入API，方法大同小异。主要有以下两个步骤： 人脸录入：将某个角色（如学生&…...

编程日记 2026/3/19 14:26:16

测试工程师玩转DeepSeek之Prompt

以下是测试工程师使用DeepSeek的必知必会提示词指南，分为核心场景和高效技巧两大维度： 一、基础操作提示模板 1. 测试用例生成 "作为[金融系统/物联网设备/云服务]测试专家，请为[具体功能模块]设计测试用例，要求&#xff1…...

编程日记 2026/4/5 15:15:18

虚中断理解

虚中断（Virtual Interrupt）是指在计算机系统中，特别是在虚拟化环境下，虚拟机或虚拟操作系统中使用的一种中断机制。它允许虚拟机监控程序（Hypervisor）或虚拟化管理程序在虚拟机之间进行中断处理和资源管理。…...

编程日记 2025/7/14 5:29:50

PC端-发票真伪查验系统-Node.js全国发票查询接口

在现代企业的财务管理中，发票真伪的验证至关重要。随着电子发票的普及，假发票问题日益严峻，如何高效、准确的对发票进行真伪查验，已经成为各类企业在日常运营中必须解决的关键问题。翔云发票查验接口做企业财务管理、税务合规的好…...

编程日记 2026/2/26 5:21:26

给Python加入自己的函数

在日常研究中，我们有时候会写一些Python没有的，但是很多个脚本都需要用的函数，反复的复制函数太过麻烦，我们可以进行一些简单的操作来变成一个可以直接import的函数 1. 首先我们新建一个.py文件，把我们的函数放进去&a…...

编程日记 2025/8/24 9:11:11

JAVA中包装类和泛型通配符

目录 1. 包装类 1.1 基本数据类型和对应的包装类 1.2 装箱和封箱 1.3 自动自动装箱和封箱 2. 什么是泛型 3. 引出泛型 3.1 语法 4. 泛型类的使⽤ 4.1 语法 4.2 ⽰例 4.3 类型推导(Type Inference) 5 泛型的上界 5.1 语法 6. 通配符 6.1 通配符解决什么问题 6.2…...

编程日记 2026/4/4 6:46:57

Qt TCP服务端和客户端程序

1、服务端程序利用QtCreator新建QMainWindow或QWidget工程，绘制UI如下所示。 mainwindow.h代码如下： #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include <QTcpServer> #include <QTcpSocket> #include &l…...

编程日记 2026/4/5 8:41:45

level2Day5

Makefile make是工程管理器先写了1个f1.c里面写了一个函数然后f2.c里面也写了一个函数还有一个头节点又写了一个makefile的函数输入make编译，但是我没装make需要装一下。 sudo apt install make 然后make， Makefile变量的使用通过赋值&#xff…...

编程日记 2026/4/4 6:36:54

青少年学习编程如何平衡使用DeepSeek与独立思考

前言对于正在学习编程的青少年来说，DeepSeek生成代码的功能是一把双刃剑。如果合理使用，它可以成为青少年学习编程的有力助手；但如果过度依赖，可能会阻碍他们的思维发展和能力提升。关键在于引导青少年正确看待工具的作用&#…...

编程日记 2026/4/2 17:51:46

MySQL 8.0 Enterprise Backup (MEB) 备份与恢复实践指南

一、MEB 核心价值与特性 1.1 产品定位 MySQL Enterprise Backup (MEB) 是Oracle官方推出的企业级物理热备份工具，专为MySQL 8.0设计，支持InnoDB/XtraDB引擎的在线备份，同时兼容MyISAM表的锁定备份。 1.2 核心优势零停机热备份&#xff1…...

编程日记 2025/6/30 10:10:56

UE5从入门到精通之多人游戏编程常用函数

文章目录前言一、权限与身份判断函数1. 服务器/客户端判断2. 网络角色判断二、网络同步与复制函数1. 变量同步2. RPC调用三、连接与会话管理函数1. 玩家连接控制2. 网络模式判断四、实用工具函数前言 UE5给我们提供了非常强大的多人网路系统，让我们可以很方便的开发多人游戏…...

编程日记 2025/7/1 14:06:06

[Web 安全] 反序列化漏洞 - 学习笔记

关注这个专栏的其他相关笔记：[Web 安全] Web 安全攻防 - 学习手册-CSDN博客 0x01：反序列化漏洞 — 漏洞介绍反序列化漏洞是一种常见的安全漏洞，主要出现在应用程序将序列化数据重新转换为对象（即反序列化）的过程中…...

编程日记 2025/12/28 13:30:50

1. 创建 templates 目录和 HTML 文件

2. 更新 Flask 路由

说明：

运行应用：

1. 更新 home.html 模板

2. 更新 app.py 文件

说明：

运行应用：

1. 创建注册表单模板

2. 更新 app.py 文件

说明：

运行应用：

1. 引入 Bootstrap

2. 更新模板

更新后的 home.html 内容：

更新后的 register.html 内容：

说明：

运行应用：

相关文章：