flask实现一个登录界面

在这里插入图片描述

flask实现一个登录界面

基础的Flask项目结构

  1. forms.py:定义登录表单和表单字段的文件。
  2. templates/login.html:用于渲染登录表单的 HTML 模板文件。
  3. routes.py:定义应用的路由和视图函数的文件。
  4. __init__.py:创建并初始化 Flask 应用的文件。
  5. run.py:启动应用的文件。
/myproject/myproject__init__.pyroutes.pyforms.py/templateslogin.html/staticrun.py

安装 Flask 和 Flask-WTF (一个用于处理表单的 Flask 扩展):

pip install flask flask-wtf

创建表单的定义 (forms.py):

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequiredclass LoginForm(FlaskForm):username = StringField('Username', validators=[DataRequired()])password = PasswordField('Password', validators=[DataRequired()])submit = SubmitField('Login')

这个文件中,我们定义了一个名为 LoginForm 的类,它代表登录表单。这个表单有两个字段:username 和 password,这两个字段都使用了 DataRequired 验证器,意味着这两个字段是必填的。在表单的最后,我们还定义了一个 submit 字段,它是一个提交按钮。

创建一个 HTML 模板来渲染表单 (templates/login.html):

<html>
<body><form method="POST">{{ form.hidden_tag() }}<p>{{ form.username.label }}<br>{{ form.username(size=32) }}</p><p>{{ form.password.label }}<br>{{ form.password(size=32) }}</p><p>{{ form.submit() }}</p></form>
</body>
</html>

这个 HTML 文件定义了一个表单,它使用 POST 方法提交。这个表单的每个字段都来自 LoginForm 类。我们使用了 Flask-WTF 提供的特殊语法 {{ form.field_name }} 来渲染这些字段。使用这种方式,Flask-WTF 会自动处理字段的渲染,包括字段的验证错误等。

routes.py 文件中定义一个路由,以处理表单的提交和页面的渲染:


from flask import Flask, render_template, flash, redirect, url_for
from .forms import LoginFormapp = Flask(__name__)
app.config['SECRET_KEY'] = 'you-will-never-guess'@app.route('/login', methods=['GET', 'POST'])
def login():form = LoginForm()if form.validate_on_submit():flash('Login requested for user {}, remember_me={}'.format(form.username.data, form.remember_me.data))return redirect(url_for('login'))return render_template('login.html', title='Sign In', form=form)

在这个文件中,我们首先创建了一个 Flask 应用,并且设置了一个名为 ‘SECRET_KEY’ 的配置项,这个配置项用于启用所有 Flask 和某些其扩展的加密功能。

然后我们定义了一个名为 login 的视图函数。这个函数首先创建了一个 LoginForm 实例,然后检查这个表单是否通过了所有的验证(即所有的字段都已填写)。如果表单通过了验证,我们会显示一条消息,然后重定向到登录页。否则,我们会渲染登录模板,并将表单传递给模板。

form.validate_on_submit()是Flask-WTF扩展提供的一个方便的方法,它将处理表单提交的所有事务。

当你在视图函数中调用form.validate_on_submit(),它将会做两件事:

  1. 它首先检查请求方法是否是 POST 或 PUT,这两种方法常常用于提交表单。在 HTTP 协议中,GET 请求通常用于获取数据,而 POST 和 PUT 请求通常用于提交数据。
  2. 如果请求方法是 POST 或 PUT,那么 validate_on_submit() 进一步调用 form.validate() 来运行每个字段的验证器。这些验证器是在你的 Form 类中定义的(例如在 LoginForm 中的 DataRequired)。如果所有的字段都通过了验证,form.validate() 将返回 True,否则返回 False。

所以,如果 form.validate_on_submit() 返回 True,那么这意味着客户端发起了一个 POST 或 PUT 请求,且所有的字段都已填写(通过验证)。这是提交表单的一个常见模式。

__init__.py中,引入并初始化 Flask 应用和路由:

from flask import Flask
from .routes import app

创建一个run.py来启动应用:

from myproject import appif __name__ == '__main__':app.run(debug=True)

补充

FlaskForm(或者更准确地说,它的基类 Form)的字段类型由 WTForms 库提供。以下是一些常用的字段类型:

  1. StringField:用于处理 <input type="text"> 类型的 HTML 表单元素。
  2. PasswordField:用于处理 <input type="password"> 类型的 HTML 表单元素。
  3. TextAreaField:用于处理 <textarea> 类型的 HTML 表单元素。
  4. HiddenField:用于处理 <input type="hidden"> 类型的 HTML 表单元素。
  5. DateField:用于处理含有 date 数据的表单元素。
  6. DateTimeField:用于处理含有 datetime 数据的表单元素。
  7. IntegerField:用于处理 <input type="number"> 类型的 HTML 表单元素。
  8. DecimalField:用于处理含有 decimal 数据的表单元素。
  9. FloatField:用于处理含有 float 数据的表单元素。
  10. BooleanField:用于处理 <input type="checkbox"> 类型的 HTML 表单元素。
  11. RadioField:用于处理 <input type="radio"> 类型的 HTML 表单元素。
  12. SelectField:用于处理 <select> 类型的 HTML 表单元素。
  13. SelectMultipleField:用于处理可以选择多个选项的 <select> 类型的 HTML 表单元素。
  14. FileField:用于处理 <input type="file"> 类型的 HTML 表单元素。
  15. SubmitField:用于处理 <input type="submit"> 类型的 HTML 表单元素。

所有这些字段都可以附加一个或多个验证器,如 DataRequiredLengthEmail 等,用于验证用户输入的数据。

你可以选择使用这些字段中的任何一个来创建你的表单。只需在你的 FlaskForm 子类中定义一个类变量,并将其设置为你选择的字段类型的实例即可。例如,username = StringField('Username', validators=[DataRequired()])

在这里插入图片描述

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

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

相关文章

Java Spring和Spring集成Mybatis

0目录 1.Spring 2.Spring集成Mybatis 1.Spring 特性 IOC&#xff1a;控制反转 AOP&#xff1a;面向切面 Spring组成部分 在SMM中起到的作用&#xff08;粘合剂&#xff09; Spring理念 OOP核心思想【万物皆对象】 Spring核心思想【万物皆Bean组件】 Spring优势 低侵入式 …

MySQL学习笔记 ------ 排序查询

一、语法 SELECT 查询列表 FROM 表名 【WHERE 筛选条件】 ORDER BY 排序列表 【ASC}DESC】&#xff1b;#支持多个排序条件&#xff0c;以逗号分隔 二、特点 1、ASC &#xff1a;升序&#xff0c;如果不写默认升序 DESC&#xff1a;降序 2、排序列表 支持 单个字段…

基于新浪微博海量用户行为数据、博文数据数据分析:包括综合指数、移动指数、PC指数三个指数

基于新浪微博海量用户行为数据、博文数据数据分析&#xff1a;包括综合指数、移动指数、PC指数三个指数 项目介绍 微指数是基于海量用户行为数据、博文数据&#xff0c;采用科学计算方法统计得出的反映不同事件领域发展状况的指数产品。微指数对于收录的关键词&#xff0c;在指…

Java运算符

大体上&#xff0c;与C语言差不多&#xff0c;不同的地方&#xff0c;我用红色字体标注了 算术运算符 1. 基本四则运算符&#xff1a;加减乘除模 ( - * / %) int a 10 ; int b 20 ; System . out . println ( a b ); // 30 System . out . println ( a - b…

数据结构--线性表2-1

目录 一、线性结构的定义 二、线性表的表示 三、顺序表的实现&#xff08;或操作&#xff09; 1、修改&#xff1a; 2、插入&#xff1a; 四、顺序表的运算效率分析&#xff1a;时间效率分析&#xff1a; 一、线性结构的定义 若结构时非空有限集&#xff0c;则有且仅有一个…

8 个线程池最佳实践和坑!使用不当直接生产事故!!

这篇文章我会简单总结一下我了解的使用线程池的时候应该注意的坑以及一些优秀的实践。拿来即用&#xff0c;美滋滋&#xff01; 1、正确声明线程池 线程池必须手动通过 ThreadPoolExecutor 的构造函数来声明&#xff0c;避免使用Executors 类创建线程池&#xff0c;会有 OOM …

线性代数的学习和整理2:用EXCEL进行矩阵计算

目录 矩阵的各种概念 矩阵的维数 矩阵的基底 矩阵的列向量 矩阵的平直概念 矩阵的乘法的映射图 矩阵的秩 矩阵的乘法具有不可交换性 矩阵的模 矩阵的各种概念 矩阵的维数 &#xff08;a1,a2&#xff09;是2维的&#xff08;a1,a2,a3&#xff09;是3维的&#xff08;a…

一文复习Java基础面试知识

申明&#xff1a;本人于公众号Java筑基期&#xff0c;CSDN先后发当前文章&#xff0c;标明原创&#xff0c;转载二次发文请注明转载公众号&#xff0c;另外请不要再标原创 &#xff0c;注意违规 Java基础知识 1、基本数据类型 在Java中&#xff0c;共有八种基本数据类型&…

基于深度学习淡水鱼体重智能识别模型研究

工作原理为&#xff1a;首先对大众淡水鱼图片进行数据清洗并做标签分类&#xff0c;之后基于残差网络ResNet50模型进行有监督的分类识别训练&#xff0c;获取识别模型。其次通过搭建回归模型设计出体重模型&#xff0c;对每一类淡水鱼分别拟合出对应的回归方程&#xff0c;将获…

Ubuntu ImportError: No module named ‘_tkinter‘问题解决方式

尝试安装tkinter模块.出现以下问题 sudo pip3 install tkinter [sudo] password for Ns3: DEPRECATION: Python 3.5 reached the end of its life on September 13th, 2020. Please upgrade your Python as Python 3.5 is no longer maintained. pip 21.0 will drop support …

go 排序 接口排序

Go sort 包主要提供了三种排序能力&#xff1a; &#xff08;1&#xff09;基本类型切片排序&#xff1b; &#xff08;2&#xff09;任意类型切片排序 &#xff1b; &#xff08;3&#xff09;任意数据结构排序 (实现接口方法排序) 一、基本类型切片排序 为了便于对常用数据…

Android OpenGL ES Camera2 实现实时抠图效果

前面文章人像抠图 + OpenGL ES 还能这样玩?没想到吧,我们介绍了利用人像抠图算法生成的 mask 图,然后结合 OpenGL 可以产生一些有趣的效果。 抠图技术应用很广泛,比如很多手机的相机自带“人像留色”滤镜:人体区域保留彩色,人体区域之外灰度化。所以人像留色的关键技术在…

java后端接口实现302跳转

正常来说&#xff0c;接口返回String是"redirect:"url或者“r:”url就能实现前端接收到返回后自动302.但是我在自己的一个项目中这么写了之后发现返回的是纯字符串&#xff0c;很奇怪。 最后发现&#xff0c;如果你的controller层有RestController注解&#xff0c;那…

【vue】Vue中解读关于this.$emit()的用法:

文章目录 一、Vue.sync修饰符与this.$emit(‘update:xxx‘, newXXX)二、this.$emit()传多个参数 一、Vue.sync修饰符与this.$emit(‘update:xxx‘, newXXX) 二、this.$emit()传多个参数

Qt Core学习日记——第八天QMetaObject(下)

QMetaObject::normalizedType 将名称规范化。 例如&#xff1a; QByteArray normType QMetaObject::normalizedType(" int const *"); // normType is now "const int*" QMetaObject::connect(const QObject *sender, int signal_index, const QObject…

Langchain 的 ConversationSummaryBufferMemory

Langchain 的 ConversationSummaryBufferMemory ConversationSummaryBufferMemory 在内存中保留最近交互的缓冲区&#xff0c;但不仅仅是完全刷新旧的交互&#xff0c;而是将它们编译成摘要并使用两者。但与之前的实现不同的是&#xff0c;它使用令牌长度而不是交互次数来确定何…

Jmeter性能测试配置

Jmeter检查点/断言 在上一章节中&#xff0c;我们通过调试脚本&#xff0c;通过人工验证脚本可以完成业务功能&#xff0c; 但在性能测试中&#xff0c;我们希望能通过自动验证脚本是否完成业务功能&#xff0c;在Jmeter 中我们可以通过检查点&#xff0c;也就是断言来实现自动…

【R3F】0.8drei使用

安装引用 npm install @react-three/drei@9.50 //这里是为了和之前版本对应控制器 通过 three/examples/jsm/controls/OrbitControls.js 引入使用 查看 通过 @react-three/drei 方式很简单直接添加上对应的节点就可以可以了 import {OrbitControls, TransformControls } from …

VR全景在酒店的发展状况如何?酒店该如何做营销?

现阶段&#xff0c;VR全景技术已经被酒店、民宿、旅游景区、房产楼盘、校园等行业所应用&#xff0c;每天都有不少人通过VR全景展示来了解酒店的设施环境&#xff0c;而酒店也可以借此机会&#xff0c;详细展示自身优势&#xff0c;更大范围吸引顾客。 VR酒店拥有真实、立体的全…

Git Gui相关术语

文章目录 Git Gui主界面相关术语- Amend Last Commit&#xff08;修正最后一次提交&#xff09;- Rescan&#xff08;重新扫描&#xff09;- Sign Off&#xff08;签名&#xff09;- Stage Changed Git Gui Commit菜单相关术语- Stage to Commit&#xff08;暂存到提交&#xf…