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

news2025/2/26 11:57:37

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

# 添加模板渲染
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 文件以渲染这些模板：

# app.py
from flask import Flask, jsonify, render_template

app = 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_template

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

# app.py
from flask import Flask, jsonify, render_template, request, redirect, url_for

app = 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.coloradmin.cn/o/2306345.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

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

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

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

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

1 集成百度智能云-千帆大模型 百度智能云-千帆ModelBuilder百度智能云千帆大模型服务与开发平台ModelBuilder&#xff08;以下简称千帆ModelBuilder&#xff09;是面向企业开发者的一站式大模型开发及服务运行平台。千帆ModelBuilder不仅提供了包括文心一言底层模型和第三方开源…
阅读更多...
前缀和代码解析

前缀和代码解析

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

【前端基础】Day 1 HTML

总结&#xff1a; 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标准…
阅读更多...
【前端基础】Day 2 HTML

【前端基础】Day 2 HTML

目录 1.表格标签 2.列表标签 3.表单标签 4.综合案例 5.查阅文档 1.表格标签 <body><table align"center" border"1" cellpadding"0" cellspacing"0" width"500" height"100"><thead> …
阅读更多...
若依前后端分离框架修改3.8.9版本（重点在安全框架讲解与微信小程序登录集成）

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

若依模板改造&#xff08;3.8.9&#xff09; 1、基础改造 下载代码 从[RuoYi-Vue: &#x1f389; 基于SpringBoot&#xff0c;Spring Security&#xff0c;JWT&#xff0c;Vue & Element 的前后端分离权限管理系统&#xff0c;同时提供了 Vue3 的版本](https://gitee.co…
阅读更多...
selenium爬取苏宁易购平台某产品的评论

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

目录 selenium的介绍 1、 selenium是什么&#xff1f; 2、selenium的工作原理 3、如何使用selenium&#xff1f; webdriver浏览器驱动设置 关键步骤 代码 运行结果 注意事项 selenium的介绍 1、 selenium是什么&#xff1f; 用于Web应用程序测试的工具。可以驱动浏览…
阅读更多...
kubernetes-完美下载

kubernetes-完美下载

话不多说&#xff0c;直接开始从0搭建k8s集群 环境&#xff1a;centous7.9 2核 20G k8s-master 192.168.37.20 k8s-node1 192.168.37.21 k8s-node2 192.168.37.22 一&#xff1a;设置主机名 #设置主机名 hostnamectl set-hostname k8s-master hostnamectl set-h…
阅读更多...
【初阶数据结构】树和二叉树

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

目录 前言树的概念与结构树的概念树的相关概念树的表示 二叉树的概念及结构二叉树的概念几种特殊的二叉树1.满二叉树2.完全二叉树 二叉树的性质二叉树的存储结构1、顺序存储2、链式存储 前言 前面我们学习了顺序表&#xff0c;单链表&#xff0c;栈和队列&#xff0c;它们在逻…
阅读更多...
【中等】59.螺旋矩阵Ⅱ

【中等】59.螺旋矩阵Ⅱ

题目描述 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&#xff1a;n…
阅读更多...
Spring Boot + Vue 接入腾讯云人脸识别API（SDK版本3.1.830）

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

一、需求分析 这次是基于一个Spring Boot Vue的在线考试系统进行二次开发&#xff0c;添加人脸识别功能以防止学生替考。其他有对应场景的也可按需接入API&#xff0c;方法大同小异。 主要有以下两个步骤&#xff1a; 人脸录入&#xff1a;将某个角色&#xff08;如学生&…
阅读更多...
JAVA中包装类和泛型 通配符

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…
阅读更多...
Qt TCP服务端和客户端程序

Qt TCP服务端和客户端程序

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

level2Day5

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

minio作为K8S后端存储

docker部署minio mkdir -p /minio/datadocker run -d \-p 9000:9000 \-p 9001:9001 \--name minio \-v /minio/data:/data \-e "MINIO_ROOT_USERjbk" \-e "MINIO_ROOT_PASSWORDjbjbjb123" \quay.io/minio/minio server /data --console-address ":90…
阅读更多...
redis小记

redis小记

redis小记 下载redis sudo apt-get install redis-server redis基本命令 ubuntu16下的redis没有protected-mode属性&#xff0c;就算sudo启动&#xff0c;也不能往/var/spool/cron/crontabs写计划任务&#xff0c;感觉很安全 #连接到redis redis-cli -h 127.0.0.1 -p 6379 …
阅读更多...
计算机视觉(opencv-python)入门之图像的读取,显示,与保存

计算机视觉(opencv-python)入门之图像的读取,显示,与保存

在计算机视觉领域&#xff0c;Python的cv2库是一个不可或缺的工具&#xff0c;它提供了丰富的图像处理功能。作为OpenCV的Python接口&#xff0c;cv2使得图像处理的实现变得简单而高效。 示例图片 目录 opencv获取方式 图像基本知识 颜色空间 RGB HSV CV2常用图像处理方…
阅读更多...
ActiveMQ之VirtualTopic

ActiveMQ之VirtualTopic

一句话总结&#xff1a; VirtualTopic是为了解决持久化模式下多消费端同时接收同一条消息的问题。 现实中多出现这样一个场景&#xff1a; 生产端产生了一笔订单&#xff0c;作为消息MessageOrder发了出去。 这笔订单既要入订单系统归档&#xff0c;又要入结算系统收款&#x…
阅读更多...
UE5 Computer Shader学习笔记

UE5 Computer Shader学习笔记

首先这里是绑定.usf文件的路径&#xff0c;并声明是用声明着色器 上面就是对应的usf文件路径&#xff0c;在第一张图进行链接 Shader Frequency 的作用 Shader Frequency 是 Unreal Engine 中用于描述着色器类型和其执行阶段的分类。常见的 Shader Frequency 包括&#xff1a…
阅读更多...
2.1部署logstash:9600

2.1部署logstash:9600

实验环境&#xff1a;关闭防火墙&#xff0c;完成java环境 yum -y install wget wget https://d6.injdk.cn/oraclejdk/8/jdk-8u341-linux-x64.rpm yum localinstall jdk-8u341-linux-x64.rpm -y java -version 1.安装logstash tar xf logstash-6.4.1.tar.gz -C /usr/local…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023