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

devtools/2025/3/1 5:33:07/

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

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

✅ 实践任务：

  1. 创建templates目录

  2. 使用Jinja2语法制作包含循环和条件判断的模板

  3. 实现一个注册表单（GET/POST处理）

  4. 使用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 文件以渲染这些模板：

python"># 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 的内容。

运行应用：

确保你的项目结构如下：

python">/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 中传递一个用户列表到模板中：

python"># 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，用于显示注册表单。

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 请求。

python"># 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 美化后的页面。


http://www.ppmy.cn/devtools/163533.html

相关文章

网络基础 —HTTP与HTTPS的基本介绍

网络基础 —HTTP与HTTPS的基本介绍

网络基础 —HTTP与HTTPS的基本介绍 前言1. HTTP的基本概念1.1 什么是HTTP&#xff1f;1.2 HTTP的工作原理1.3 HTTP的特点1.4 HTTP的常见方法 2. HTTPS的基本概念2.1 什么是HTTPS&#xff1f;2.2 HTTPS的工作原理2.3 HTTPS的特点2.4 HTTPS的证书 3. HTTP与HTTPS的区别4. 为什么需…
阅读更多...
测试用例详解

测试用例详解

一、通用测试用例八要素 　 1、用例编号&#xff1b; 　　 2、测试项目&#xff1b; 　 3、测试标题&#xff1b; 4、重要级别&#xff1b; 　　 5、预置条件&#xff1b; 　　 6、测试输入&#xff1b; 　　 7、操作步骤&#xff1b; 　　 8、预期输出 二、具体分析通…
阅读更多...
C++ 设计模式 十二:责任链模式 (读书 现代c++设计模式)

C++ 设计模式 十二:责任链模式 (读书 现代c++设计模式)

责任链 文章目录 责任链场景指针链代理链总结**责任链模式的核心思想****何时需要使用责任链模式&#xff1f;****责任链模式解决的核心问题****与其他设计模式的协同使用****与其他模式的对比****经典应用场景****实现步骤与关键点****注意事项****总结** 今天是第十二种设计模…
阅读更多...
三轴加速度推算姿态角的方法，理论分析和MATLAB例程

三轴加速度推算姿态角的方法，理论分析和MATLAB例程

三轴加速度推算三轴姿态的方法与MATLAB代码实现 文章目录 基本原理与方法概述静态姿态解算（仅俯仰角与横滚角）扩展（融合陀螺仪与加速度计）MATLAB代码 例程四元数动态姿态解算（融合加速度与陀螺仪）注意事项与扩展基本原理与方法概述 三轴加速度计通过测量重力分量在载体坐…
阅读更多...
基于TensorFlow.js与Web Worker的智能证件照生成方案

基于TensorFlow.js与Web Worker的智能证件照生成方案

功能简介 本文基于TensorFlow.js与Web Worker实现了常用的“证件照”功能&#xff0c;可以对照片实现抠图并替换背景。值得一提的是&#xff0c;正常抠图的操作应该由后端进行&#xff0c;这里只是主要演示该功能实现步骤&#xff0c;并不建议该功能由前端全权处理。 限于个人技…
阅读更多...
Tattu发布全新行业无人机电池NEO系列，专为长续航设计

Tattu发布全新行业无人机电池NEO系列，专为长续航设计

Tattu一直致力于为行业无人机提供高性能的电池解决方案。如今&#xff0c;我们推出全新NEO系列&#xff0c;这是Tattu首款专为行业无人机设计的智能电池系列&#xff0c;与以往的软包电池组相比&#xff0c;NEO系列集成了Tattu自研电池管理系统(BMS)和多项技术创新&#xff0c;…
阅读更多...
Java中JDK、JRE，JVM之间的关系

Java中JDK、JRE，JVM之间的关系

Java中的JDK、JRE和JVM是三个核心概念&#xff0c;其关系可概括为JDK > JRE > JVM&#xff0c;具体如下&#xff1a; 一、定义与作用 JDK&#xff08;Java Development Kit&#xff09; 定义&#xff1a;Java开发工具包&#xff0c;用于开发和编译Java程序。包含内容&…
阅读更多...
nvm下载安装教程（node.js 下载安装教程）

nvm下载安装教程（node.js 下载安装教程）

前言 nvm 官网地址&#xff1a;https://nvm.uihtm.com nvm 是一个 node.js 的版本管理工具&#xff0c;相比于仅安装 node.js&#xff0c;我们可以使用 nvm 直接下载或卸载 node.js&#xff0c;可以同时安装多个 node.js 版本&#xff0c;并动态的切换本地环境中的 node.js 环…
阅读更多...
最新文章

Copyright @ 2022~2023