使用 Flask 3 搭建问答平台(三):注册页面模板渲染

前言

前端文件下载

链接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.routebp 是一个蓝图对象(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 headendblock 之间的内容都是这个块的一部分。

三、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 %}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/379820.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity XR Interaction Toolkit的安装(二)

提示&#xff1a;文章有错误的地方&#xff0c;还望诸位大神不吝指教&#xff01; 文章目录 前言一、安装1.打开unity项目2.打开包管理器&#xff08;PackageManage&#xff09;3.导入Input System依赖包4.Interaction Layers unity设置总结 前言 安装前请注意&#xff1a;需要…

JVM(day2)经典垃圾收集器

经典垃圾收集器 Serial收集 使用一个处理器或一条收集线程去完成垃圾收集工作&#xff0c;更重要的是强调在它进行垃圾收集时&#xff0c;必须暂停其他所有工作线程&#xff0c;直到它收集结束。 ParNew收集器 ParNew 收集器除了支持多线程并行收集之外&#xff0c;其他与 …

Redis 关于内存碎片的解决方法

今天生产机报内存爆满异常被叫过去查看问题&#xff0c;通过各种排除最终定位到了Redis的内存碎片的问题&#xff0c;这篇博客将详细介绍Redis内存碎片问题并给出最佳实践解决此问题。 Redis的内存碎片原理 先引用Redis官方的原话&#xff1a; 当键被删除时&#xff0c;Redis …

类和对象(二)

默认成员函数 默认成员函数就是用户没有显式实现&#xff0c;编译器会⾃动⽣成的成员函数称为默认成员函数。 C有六个默认成员函数&#xff0c;不写的情况下编译器会默认⽣成以下6个默认成员函数&#xff0c;最重要的是前4个&#xff0c;最后两个了解⼀下即可。另外&#xff…

Java垃圾收集器选择与优化策略

1.垃圾收集算法有哪些,可以聊一下吗? 如何确定一个对象是垃圾? 要想进行垃圾回收,得先知道什么样的对象是垃圾。 1.1 引用计数法 对于某个对象而言,只要应用程序中持有该对象的引用,就说明该对象不是垃圾。如果一个对象没有任何指针对其引用,它就是垃圾。 弊端:如果…

成像光谱遥感技术中的AI革命:ChatGPT

遥感技术主要通过卫星和飞机从远处观察和测量我们的环境&#xff0c;是理解和监测地球物理、化学和生物系统的基石。ChatGPT是由OpenAI开发的最先进的语言模型&#xff0c;在理解和生成人类语言方面表现出了非凡的能力&#xff0c;ChatGPT在遥感中的应用&#xff0c;人工智能在…

LeetCode 232.用栈实现队列 C写法

LeetCode 232.用栈实现队列 C写法 思路&#x1f9d0;&#xff1a; 栈代码在本篇中。与队列实现栈类似&#xff0c;不过这里我们建立两个栈&#xff0c;一个栈专门存放入队数据&#xff0c;一个专门存放出队数据&#xff0c;不需要再来回导数据。原理在于一个栈的数据到另一个栈…

安卓逆向入门(2)------Xpose初级

项目配置 在AndroidMainfest.xml中添加 <meta-dataandroid:name"xposedmodule"android:value"true" /><meta-dataandroid:name"xposeddescription"android:value"Xposed模块初体验" /><meta-dataandroid:name"xp…

python爬虫获取网易云音乐评论歌词以及歌曲地址

python爬虫获取网易云音乐评论歌词以及歌曲地址 一.寻找数据接口二.对负载分析三.寻找参数加密过程1.首先找到评论的请求包并找到发起程序2.寻找js加密的代码 四.扣取js的加密源码1.加密函数参数分析①.JSON.stringify(i0x)②bse6Y(["流泪", "强"])③bse6Y…

算法日记day 11(KMP算法)

一、KMP算法 基本原理&#xff1a; KMP算法&#xff08;Knuth-Morris-Pratt算法&#xff09;是一种用于在一个文本串&#xff08;字符串&#xff09;中查找一个模式串&#xff08;子串&#xff09;的高效算法。它的主要优点是在匹配过程中避免了回溯&#xff08;backtracking…

新版网页无插件H.265播放器EasyPlayer.js如何测试demo视频?

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器&#xff0c;可支持多种流媒体协议播放&#xff0c;支持H.264与H.265编码格式&#xff0c;性能稳定、播放流畅&#xff1b;支持WebSocket-FLV、HTTP-FLV&#xff0c;HLS&#xff08;m3u8&#xff0…

cleanshot Mac 上的截图工具

笔者闲来无事&#xff0c;最近在找一些mac上好用的工具其中一款就是cleanShot。为什么不用原有的mac自带的呢。因为相对来说编辑功能不算全面&#xff0c;不支持长截图。那有没有一款软件支持关于截图的好用工具呢。 所以笔者找了这款。安装包是直接安装就可使用的。请大家点赞…

MATLAB quiver矢量图 设置colorbar

给三维矢量图按照不同高度设置箭头颜色 figure clf X surfaceuz(:,1); Y surfaceuz(:,2); Z surfaceuz(:,3); hold onzcolor jet; % qquiver3(X,Y,Z,X,Y,W) for i 1:length(surfaceuz)quiver3(X(i),Y(i),Z(i),X(i),Y(i), Z(i),...Color,zcolor(floor((Z(i) - -0.1) * 2…

【Linux学习】常用基本指令

&#x1f525;个人主页&#xff1a; Forcible Bug Maker &#x1f525;专栏&#xff1a;Linux学习 目录 &#x1f308;前言&#x1f525;XShell的一些使用查看Linux主机IP使用XShell登录主机XShell下的复制粘贴 &#x1f525;Linux下常用基本指令ls指令pwd指令cd指定touch指令…

【JVM基础02】——组成-程序计数器解读

目录 1- 引言&#xff1a;程序计数器1-1 程序计数器是什么&#xff1f;为什么用程序计数器&#xff1f;(What)(Why) 2- 核心&#xff1a;程序计数器的原理&#xff08;How&#xff09;2-1 使用 javap 查看程序计数器的作用2-2 多线程下程序计数器原理举例 3- 小结&#xff1a;什…

完美解决ImportError: cannot import name ‘PILLOW_VERSION‘的正确解决方法,亲测有效!!!

完美解决ImportError: cannot import name PILLOW_VERSION’的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 亲测有效 完美解决ImportError: cannot import name PILLOW_VERSION的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xf…

专业PDF编辑工具:Acrobat Pro DC 2024.002.20933绿色版,提升你的工作效率!

软件介绍 Adobe Acrobat Pro DC 2024绿色便携版是一款功能强大的PDF编辑和转换软件&#xff0c;由Adobe公司推出。它是Acrobat XI系列的后续产品&#xff0c;提供了全新的用户界面和增强功能。用户可以借助这款软件将纸质文件转换为可编辑的电子文件&#xff0c;便于传输、签署…

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

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

通过docker构建基于LNMP的WordPress项目

目录 1.准备nginx 2.准备mysql 3.准备php 4.构建各镜像 5.运行wordpress 1、项目环境&#xff1a; 1.1 &#xff08;1&#xff09;公司在实际的生产环境中&#xff0c;需要使用Docker 技术在一台主机上创建LNMP服务并运行Wordpress网站平台。然后对此服务进行相关的性能…

01数据结构 - 顺序表

这里是只讲干货不讲废话的炽念&#xff0c;这个系列的文章是为了我自己以后复习数据结构而写&#xff0c;所以可能会用一种我自己能够听懂的方式来描述&#xff0c;不会像书本上那么枯燥和无聊&#xff0c;且全系列的代码均是可运行的代码&#xff0c;关键地方会给出注释^_^ 全…