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

使用 Flask 3 搭建问答平台（三）：注册页面模板渲染

news 2026/3/26 3:54:20

前言

前端文件下载

链接icon-default.png?t=N7T8https://pan.baidu.com/s/1Ju5hhhhy5pcUMM7VS3S5YA?pwd=6666%C2%A0

知识点

1. 在路由中渲染前端页面

2. 使用 JinJa 2 模板实现前端代码复用

一、auth.py

from flask import render_template@bp.route('/register', methods=['GET'])
def register():return render_template("register.html")

@bp.route('/register', methods=['GET'])

这一行代码是一个装饰器，用于定义一个路由：

  • @bp.route：bp 是一个蓝图对象（Blueprint），用于将相关的路由和视图函数组织在一起。route 方法将 URL 路径与视图函数绑定。
  • '/register'：URL 路径，当用户访问 http://<your-domain>/register 时，这个路由会被触发。
  • methods=['GET']：指定 HTTP 方法，这里仅允许 GET 请求。GET 请求通常用于从服务器获取数据，如加载一个网页。

def register():

定义一个名为 register 的视图函数。当用户访问 '/register' 路径时，这个函数会被调用。

return render_template("register.html")

视图函数的返回值，用于呈现注册页面：

  • render_template：Flask 提供的一个函数，用于渲染模板。它会从模板文件夹中找到指定的 HTML 文件，渲染它并返回给客户端。
  • "register.html"：模板文件的名称。Flask 会在应用的模板文件夹中查找这个文件，并将其渲染为 HTML 页面。

完成后访问页面如下 

二、副模板

新建一个 base.html 文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="../static/bootstrap/bootstrap.4.6.min.css"><link rel="stylesheet" href="../static/css/init.css">{% block head %}{% endblock %}<title>{% block title %}{% endblock %}</title>
</head><body><nav class="navbar navbar-expand-lg navbar-light bg-light"><div class="container"><a class="navbar-brand" href="#">知了问答</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="/static">首页 <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">发布问答</a></li><li class="nav-item ml-2"><form class="form-inline my-2 my-lg-0" method="GET" action="#"><input class="form-control mr-sm-2" type="search" placeholder="关键字" aria-label="Search" name="q"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button></form></li></ul><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">登录</a></li><li class="nav-item"><a class="nav-link" href="#">注册</a></li></ul></div></div></nav><div class="container">{% block body %}{% endblock %}</div>
</body></html>

{% block head %} ... {% endblock %}

这是一个模板块定义，具体用途如下：

  • {% ... %}：这是Jinja2模板语言的语法，用于包含控制结构（如循环、条件语句）和模板继承块。
  • block head：定义一个名为 head 的模板块。block 是Jinja2的关键字，用于定义可重写的内容区域。head 是块的名称，可以是任意的，但通常与HTML文档结构相关。
  • {% endblock %}：结束块定义。所有在 block head 和 endblock 之间的内容都是这个块的一部分。

三、register.html

修改源代码

{% extends "base.html" %}{% block title %}问答平台-注册
{% endblock %}{% block head %}{% endblock %}{% block body %}<div class="container"><div class="row mt-4"><div class="col"></div><div class="col"><form method="POST" action="#"><div class="form-group"><label for="exampleInputEmail1">邮箱</label><input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" name="email"><small id="emailHelp" class="form-text text-muted">我们不会把邮箱用于其他用户</small></div><div class="form-group"><label for="exampleInputEmail1">验证码</label><div class="input-group"><input type="text" class="form-control" name="captcha"><div class="input-group-append"><button class="btn btn-outline-secondary" type="button" id="captcha-btn">获取验证码</button></div></div></div><div class="form-group"><label for="exampleInputEmail1">用户名</label><input type="text" class="form-control" name="username"></div><div class="form-group"><label for="exampleInputPassword1">密码</label><input type="password" class="form-control" id="exampleInputPassword1" name="password"></div><div class="form-group"><label for="exampleInputPassword1">确认密码</label><input type="password" class="form-control" name="password_confirm"></div><button type="submit" class="btn btn-primary btn-block">立即注册</button></form></div><div class="col"></div></div></div>
{% endblock %}

相关文章：

使用 Flask 3 搭建问答平台（三）：注册页面模板渲染

前言 前端文件下载 链接https://pan.baidu.com/s/1Ju5hhhhy5pcUMM7VS3S5YA?pwd6666%C2%A0 知识点 1. 在路由中渲染前端页面 2. 使用 JinJa 2 模板实现前端代码复用 一、auth.py from flask import render_templatebp.route(/register, methods[GET]) def register():re…...

编程日记 2024/7/20 1:09:17

pycharm如何debug for循环里面的错误值

一般debug时&#xff0c;在for循环里面的话&#xff0c;需要自己一步一步点。如果循环几百次那种就比较麻烦。此时可以采用try except的方式来解决 例子如下 #ptyhon debug for循环的代码 num[1,2,3,s,4] ans0 for i in num:try:ansiexcept:print(错误) print(ans) 结果如下&a…...

编程日记 2024/7/20 1:05:13

解决网页中的 video 标签在移动端浏览器（如百度访问网页）视频脱离文档流播放问题

问题现象 部分浏览器视频脱离文档流&#xff0c;滚动时&#xff0c;视频是悬浮出来&#xff0c;在顶部播放 解决方案 添加下列属性&#xff0c;可解决大部分浏览器的脱离文档流的问题 <videowebkit-playsinline""playsInlinex5-playsinlinet7-video-player-t…...

编程日记 2024/7/20 1:03:11

.Net--CLS，CTS，CLI，BCL，FCL

1.什么是CLS&#xff1f; 所以.NET专门为此参考每种语言(例如C# &#xff0c;VB&#xff0c;F#)并找出了语言间的共性&#xff0c;然后定义了一组规则&#xff0c;开发者都遵守这个规则来编码&#xff0c;那么代码就能被任意.NET平台支持的语言所通用。 而与其说是规则&#x…...

编程日记 2024/7/20 1:02:10

Stable Diffusion：质量高画风清新细节丰富的二次元大模型二次元插图

今天和大家分享一个基于Pony模型训练的二次元模型&#xff1a;二次元插图。关于该模型有4个不同的分支版本。 1.5版本&#xff1a;loar模型&#xff0c;推荐底模型niji-动漫二次元4.5。 xl版本&#xff1a;SDXL模型版本 mix版本&#xff1a;光影减弱&#xff0c;减少SDXL版本…...

编程日记 2024/7/20 0:59:04

数读MEME之争：以太坊获更高价值共识，抢占热点成Solana流量密码

在当前显著的加密牛市中&#xff0c;以太坊和Solana之间的竞争不仅在币价表现上显而易见&#xff0c;生态发展方面也备受关注。特别是在这轮MEME行情中&#xff0c;双方阵营的MEME代币呈现出不同的特点和趋势。 市场表现对比 以太坊的优势&#xff1a; 市场份额和认可度更高&…...

编程日记 2024/7/20 0:58:01

python的with语句

1.with语句的作用 在 Python 中&#xff0c;with 语句用于创建一个上下文管理器&#xff0c;以更简洁和安全的方式管理资源。 其主要优点是可以确保在代码块执行完毕后&#xff0c;相关资源能够被正确释放或清理&#xff0c;即使在代码块内部发生了异常。 以下是一个使用 with…...

编程日记 2024/7/20 0:57:00

Selenium原理深度解析

在自动化测试领域&#xff0c;Selenium无疑是最受欢迎和广泛使用的工具之一。它支持多种浏览器和操作系统&#xff0c;为开发人员和测试人员提供了强大的自动化测试解决方案。本文将深入探讨Selenium的工作原理&#xff0c;包括其架构、核心组件、执行流程以及它在自动化测试中…...

编程日记 2024/7/20 0:54:57

算法复杂度＜数据结构 C版＞

什么是算法复杂度&#xff1f; 简单来说算法复杂度是用来衡量一个算法的优劣的&#xff0c;一个程序在运行时&#xff0c;对运行时间和运行空间有要求&#xff0c;即时间复杂度和空间复杂度。 目录 什么是算法复杂度&#xff1f; 大O的渐近表达式 时间复杂度示例 空间复杂度…...

编程日记 2024/7/20 0:52:55

【XSS】

文章目录 0x01 简介0x02 XSS Payload用法XSS攻击平台及调试JavaScript 0x03 XSS绕过XSS漏洞防御策略 跨站脚本攻击&#xff0c;Cross Site Script。&#xff08;重点在于脚本script&#xff09; 有关XSS可以造成的 危害&#xff0c;见 0x02 XSS Payload用法 分类 反射型、存储…...

编程日记 2024/7/20 0:45:47

Go网络编程-RPC程序设计

gRPC 通信 RPC 介绍 RPC, Remote Procedure Call&#xff0c;远程过程调用。与 HTTP 一致&#xff0c;也是应用层协议。该协议的目标是实现&#xff1a;调用远程过程&#xff08;方法、函数&#xff09;就如调用本地方法一致。 如图所示&#xff1a; 说明&#xff1a; Servi…...

编程日记 2024/7/20 0:44:46

Linux 性能优化：轻松入门

文章目录 前言一、磁盘性能优化1、 磁盘 RAID 模式选择2、文件系统优化 二、优化 CPU1、性能监控 &#xff1a;2、进程优先级调整 &#xff1a;3、进程与 CPU 绑定 &#xff1a; 三、优化内存四、网络性能优化1、调整 TCP 缓冲区大小2、修改系统级别的文件描述符的数量3、调整 …...

编程日记 2024/7/20 0:42:44

C++相关概念和易错语法（22）（final、纯虚函数、继承多态难点）

1.final final在继承和多态中都可以使用&#xff0c;在继承中是指不想将自己被继承&#xff0c;在多态中是指不想该函数被重写&#xff0c;比较简单&#xff0c;下面是一些使用例子。 2.纯虚函数 当我们需要抽象一个类的时候&#xff0c;我们就需要用到纯虚函数。所谓抽象的类…...

编程日记 2024/7/20 0:40:42

状态管理的艺术：探索Flutter的Provider库

状态管理的艺术&#xff1a;探索Flutter的Provider库 前言 上一篇文章中&#xff0c;我们详细介绍了 Flutter 应用中的状态管理&#xff0c;以及 StatefulWidget 和 setState 的使用。 本篇我们继续介绍另一个实现状态管理的方式&#xff1a;Provider。 Provider优缺点 基…...

编程日记 2024/7/20 0:39:41

玩转HarmonyOS NEXT之IM应用首页布局

本文从目前流行的垂类市场中&#xff0c;选择即时通讯应用作为典型案例详细介绍HarmonyOS NEXT的各类布局在实际开发中的综合应用。即时通讯应用的核心功能为用户交互&#xff0c;主要包含对话聊天、通讯录&#xff0c;社交圈等交互功能。 应用首页 创建一个包含一列的栅格布…...

编程日记 2024/7/20 0:35:38

GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建

原文链接&#xff1a;GPT-4o大语言模型优化、本地私有化部署、从0-1搭建、智能体构建https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247608565&idx3&snd4e9d447efd82e8dd8192f7573886dab&chksmfa826912cdf5e00414e01626b52bab83a96199a6bf69cbbef7f7fe…...

编程日记 2024/7/20 0:31:34

记录些MySQL题集（4）

1、数据库的三范式是什么&#xff1f; 第一范式&#xff1a;列不可再分 第二范式&#xff1a;在第一范式的基础上&#xff0c;要求数据库表中的所有非主键列完全依赖于主键&#xff0c;而不是仅依赖于主键的一部分 第三范式&#xff1a;满足第二范式的基础上&#xff0c;所有…...

编程日记 2024/7/20 0:29:32

pdf提取其中一页怎么操作？提取PDF其中一页的方法

pdf提取其中一页怎么操作&#xff1f;需要从一个PDF文件中提取特定页码的操作通常是在处理文档时常见的需求。这种操作允许用户选择性地获取所需的信息&#xff0c;而不必操作整个文档。通过选择性提取页面&#xff0c;你可以更高效地管理和利用PDF文件的内容&#xff0c;无论是…...

编程日记 2024/7/20 0:26:29

godot使用ws

go服务端 package mainimport ("encoding/json""fmt""github.com/gorilla/websocket""net/http" )var upgrader websocket.Upgrader{ReadBufferSize: 1024,WriteBufferSize: 1024, }// 处理函数 func handleWebSocket(w http.Respo…...

编程日记 2024/7/20 0:23:26

Windows FFmpeg 开发环境搭建

FFmpeg 开发环境搭建 FFmpeg命令行环境搭建使用FFmpeg官方编译的库Windows编译FFmpeg1. 下载[msys2](https://www.msys2.org/#installation)2. 安装完成之后,将安装⽬录下的msys2_shell.cmd中注释掉的 rem set3. 修改pacman 镜像源并安装依赖4. 下载并编译源码 FFmpeg命令行环境…...

编程日记 2024/7/20 0:21:23

OpenClaw监控告警：GLM-4.7-Flash任务异常自动通知设置

OpenClaw监控告警&#xff1a;GLM-4.7-Flash任务异常自动通知设置 1. 为什么需要监控告警系统 上周我部署了一个基于GLM-4.7-Flash的自动化日报生成任务&#xff0c;结果连续三天都没收到输出。检查后发现是模型服务意外重启导致任务中断——这种"静默失败"在自动化…...

编程新知 2026/3/26 3:49:21

Buck变换器的闭环控制在恒功率负载场景下是个挺有意思的挑战。最近用Simulink搭了个完整的仿真平台，这里把建模过程和控制策略掰开揉碎了聊聊

恒功率负载下Buck变换器的建模与控制simulink仿真文 件 亲手搭建 现代控制理论 附赠参考文献 另有一份word或PDF报告可加价先看电路拓扑结构&#xff0c;典型的Buck电路由开关管、续流二极管、LC滤波电路组成。在恒功率负载条件下&#xff0c;负阻抗特性会导致系统稳定性问题—…...

编程新知 2026/3/26 2:55:09

专业的无代码多端协同办公哪家好

在当今数字化办公的浪潮下&#xff0c;无代码多端协同办公平台成为众多企业提升办公效率、降低数字化门槛的首选。然而&#xff0c;市场上的相关产品众多&#xff0c;企业该如何选择呢&#xff1f;今天&#xff0c;我们就来详细分析一下&#xff0c;为大家推荐一款优秀的无代码…...

编程新知 2026/3/26 2:23:02

**发散创新：用Go语言构建高性能服务网格代理——从零实现Sidecar模式**在微服务架构日益普及的今天，

发散创新&#xff1a;用Go语言构建高性能服务网格代理——从零实现Sidecar模式 在微服务架构日益普及的今天&#xff0c;服务网格&#xff08;Service Mesh&#xff09; 已成为保障流量治理、安全认证与可观测性的核心基础设施。传统基于API网关的集中式控制方式已难以满足动态…...

编程新知 2026/3/26 1:46:56

小型团队离线部署大模型指南：别先追参数，先把“能长期跑”的系统搭起来

小型团队离线部署大模型指南&#xff1a;别先追参数&#xff0c;先把“能长期跑”的系统搭起来 在很多人的想象里&#xff0c;离线部署大模型是一件很“硬核”的事&#xff1a;上几张高端 GPU&#xff0c;把一个足够大的模型拉起来&#xff0c;再配个网页聊天界面&#xff0c;似…...

编程新知 2026/3/26 0:02:17

【2025最新】基于SpringBoot+Vue的小型企业客户关系管理系统管理系统源码+MyBatis+MySQL

摘要 在当今竞争激烈的商业环境中&#xff0c;小型企业亟需高效的客户关系管理&#xff08;CRM&#xff09;系统来优化客户交互、提升销售效率并增强客户忠诚度。传统的客户管理方式依赖人工记录和电子表格&#xff0c;存在数据冗余、查询效率低、信息共享困难等问题。随着信息…...

编程新知 2026/3/25 21:40:41

【事务】Spring Framework核心——事务管理：ACID特性、隔离级别、传播行为、@Transactional底层原理、失效场景

文章目录事务管理一、事务核心基石&#xff1a;ACID四大特性二、事务并发问题与隔离级别2.1 并发事务引发的3大核心读异常2.2 SQL标准4大隔离级别2.3 核心补充&#xff1a;MVCC与隔离级别的关联三、Spring事务传播行为3.1 第一类&#xff1a;支持当前事务&#xff08;优先加入已…...

编程新知 2026/3/25 21:36:39

电商API接口数据采集与应用行业分析

电商 API 接口数据采集与应用行业&#xff0c;已从早期的 “数据获取工具” 升级为电商数字化的核心基础设施&#xff0c;正处于合规化、智能化、全链路整合的高速发展期。2025 年中国电商数据服务市场规模约1800 亿元&#xff0c;年复合增长率25%-30%&#xff1b;全球跨境电商…...

编程新知 2026/3/25 21:06:01

5步高效掌握Python安卓调试：从设备连接到自动化测试全指南

5步高效掌握Python安卓调试&#xff1a;从设备连接到自动化测试全指南 【免费下载链接】adb_shell 项目地址: https://gitcode.com/gh_mirrors/ad/adb_shell 在移动应用开发过程中&#xff0c;开发者常常面临设备连接不稳定、调试流程繁琐、批量操作效率低下等问题。Py…...

编程新知 2026/3/25 17:51:08

3个核心优势助力企业级管理系统低代码开发

3个核心优势助力企业级管理系统低代码开发 【免费下载链接】next-admin An out-of-the-box admin based on NextJS and AntDesign | 一款基于nextjsantd5.0的中后台系统 项目地址: https://gitcode.com/gh_mirrors/ne/next-admin Next-Admin 是一款基于 Next.js 和 Ant …...

编程新知 2026/3/25 17:27:01