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

flask实现一个登录界面

news 2025/9/15 17:35:48

在这里插入图片描述

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 表单元素。

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

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

在这里插入图片描述

相关文章：

flask实现一个登录界面

flask实现一个登录界面 基础的Flask项目结构 forms.py&#xff1a;定义登录表单和表单字段的文件。templates/login.html&#xff1a;用于渲染登录表单的 HTML 模板文件。routes.py&#xff1a;定义应用的路由和视图函数的文件。__init__.py&#xff1a;创建并初始化 Flask 应…...

编程日记 2023/7/29 17:41:47

redis的四种模式优缺点

redis简介 Redis是一个完全开源的内存数据结构存储工具&#xff0c;它支持多种数据结构&#xff0c;以及多种功能。Redis还提供了持久化功能&#xff0c;可以将数据存储到磁盘上&#xff0c;以便在重启后恢复数据。由于其高性能、可靠性和灵活性&#xff0c;Redis被广泛应用于…...

编程日记 2023/7/29 17:40:45

maven本地仓库地址修改+maven国内镜像设置+maven运行所需pos.xml文件配置基本写法

1&#xff0c;maven本地仓库地址修改 maven在使用过程中&#xff0c;本地项目仓库其空间占用会越来越大&#xff0c;但是其默认仓库位置往往是以C盘为主&#xff0c;C盘作为系统盘常常会遇到所在盘空间占满的情况&#xff0c;所以我们将其改至其他硬盘空间位置为适合做法&#…...

编程日记 2023/7/29 17:39:44

Jenkins集成SonarQube保姆级教程

Jenkins是自动化部署平台&#xff0c;一个粗眉大眼的糙汉子&#xff01; SonarQube是代码扫描平台&#xff0c;一个眉目清秀的小女子&#xff01; 有一天&#xff0c;上天交给我一个任务&#xff0c;去撮合撮合他们&#xff01; 我抬头看了看天&#xff0c; 不&#xff0c;…...

编程日记 2023/7/29 17:38:42

Git的安装以及本地仓库的创建和配置

文章目录 1.Git简介2.安装Git2.1在Centos上安装git2.2 在ubuntu上安装git 3.创建本地仓库4.配置本地仓库 1.Git简介 Git是一个分布式版本控制系统&#xff0c;用于跟踪和管理文件的更改。它可以记录和存储代码的所有历史版本&#xff0c;并可以方便地进行分支管理、合并代码和协…...

编程日记 2023/7/29 17:37:41

现在运动耳机什么牌子的好用、最好的运动耳机推荐

对于注重身体健康的小伙伴来说&#xff0c;每周必然都少不了有规律的运动&#xff0c;而运动的时候耳边没有音乐的陪伴总是稍显枯燥无味&#xff0c;很难让人提起干劲来。有些小伙伴觉得运动的时候戴着耳机&#xff0c;稍微跳动几下耳机就开始松动&#xff0c;随时都要分心提防…...

编程日记 2023/7/29 17:36:40

监控指标与监控类型

监控体系中最基础的是监控指标&#xff0c;监控系统就是围绕指标的采集、传输、存储、分析、可视化的一个系统。 监控指标是指数值类型的监控数据&#xff0c;比如某个机器的内存利用率&#xff0c;某个 MySQL 实例的当前连接数&#xff0c;某个 Redis 的最大内存上限等等。不…...

编程日记 2023/7/29 17:35:38

Vue实现柱状图横向自动滚动

Vue实现柱状图横向自动滚动 1. 前言2. 代码3、实现效果图 1. 前言 原理&#xff1a;通过定时器修改Echarts的配置&#xff08;options&#xff09;达到我们想要的效果。 此外&#xff0c;我们还需要了解Echarts中dataZoom这个组件&#xff0c;这个组件用于&#xff1a;用于区域…...

编程日记 2023/7/29 17:34:37

解决构建maven工程时，配置了阿里云的前提下，依旧使用中央仓库下载依赖导致失败的问题！！！

问题描述&#xff1a; 在使用spring进行构建项目时&#xff0c;出现下载依赖迟迟不成功&#xff0c;显示maven wrapper 下载失败的问题。 Maven wrapper Cannot download ZIP distribution from https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.8.7/ap…...

编程日记 2023/7/29 17:33:36

MYSQL DCL语句

MySQL DCL语句 简介 DQL是用于查询和检索数据库数据的重要工具。它具有丰富的功能和灵活性&#xff0c;可以根据不同的查询需求进行条件过滤、排序、聚合计算等操作。通过合理使用DQL&#xff0c;可以从数据库中提取有用的数据以进行数据分析和决策支持。 DCL语句的分类 DC…...

编程日记 2023/7/29 17:32:34

4H-SiC nMOSFETs的亚阈值漏电流扫描滞后特性

目录 标题&#xff1a;On the Subthreshold Drain Current Sweep Hysteresis of 4H-SiC nMOSFETs研究了什么文章创新点文章的研究方法文章得出的结论 标题&#xff1a;On the Subthreshold Drain Current Sweep Hysteresis of 4H-SiC nMOSFETs 亚阈值滞后&#xff08;Subthresh…...

编程日记 2023/7/29 17:31:34

设计模式（单例模式）

概念 保证指定的类只有一个实例&#xff0c;不能创建出其他的实例 实现方式 1.饿汉模式 1.1 代码展示 package 设计模式;/*** Created with IntelliJ IDEA.* Description:* User: wuyulin* Date: 2023-07-28* Time: 11:28*///单例模式&#xff08;饿汉模式&#xff09; //保证…...

编程日记 2023/7/29 17:30:32

[SQL挖掘机] - 算术函数 - sqrt

介绍: 当谈到 SQL 中的 sqrt 函数时&#xff0c;它用于计算一个数值的平方根。 用法: sqrt 函数使用以下语法&#xff1a; sqrt(x)其中&#xff0c;x 是要计算平方根的数值。 注意: 当使用负数参数调用 SQL 中的 sqrt 函数时&#xff0c;具体的错误消息可能因不同的数据库…...

编程日记 2023/7/29 17:29:31

数据结构--顺序表、单链表

线性表是指顺序表和单链表 //顺序表数据结构 typedef struct { ElemType data[MaxSize];//顺序表元素 int length; //顺序表当前长度 }SqList; //单链表结点数据结构 typedef struct LNode { ElemType data;//数据域 struct LNode *next;//指针域 }LNode,*LinkList; 顺序表 …...

编程日记 2023/7/29 17:28:30

云安全攻防（一）之 云原生

前言 随着公有云和私有云的广泛部署&#xff0c;云计算基础设施成为企业部署新业务的首选。可以说&#xff0c;云计算已进入下半场&#xff0c;各大云计算服务商的厮杀日益激烈&#xff0c;新的概念也不断的层出不穷。近年来&#xff0c;云原生安全&#xff08;Cloud Native C…...

编程日记 2023/7/29 17:27:29

#vue3报错 Cannot read properties of null (reading ‘isCE‘)#

场景&#xff1a;使用 npm 安装依赖包的时候&#xff0c;如如安装 npm i xlsx npm i file-saver 重新运行报错 Cannot read properties of null (reading isCE)# 解决办法&#xff1a; 使用的vite vue 在vite.config.ts添加如下配置&#xff1a; dedupe: [ vue ]...

编程日记 2023/7/29 17:26:28

【计算机视觉中的 GAN 】 - 生成学习简介（1）

一、说明 在阅读本文之前&#xff0c;强烈建议先阅读预备知识&#xff0c;否则缺乏必要的推理基础。本文是相同理论GAN原理的具体化范例&#xff0c;阅读后有两个好处&#xff1a;1 巩固了已经建立的GAN基本概念 2 对具体应用的过程和套路进行常识学习&#xff0c;这种练习题一…...

编程日记 2023/7/29 17:25:27

深度学习实战44-Keras框架下实现高中数学题目的智能分类功能应用

大家好，我是微学AI ,今天给大家介绍一下深度学习实战44-Keras框架实现高中数学题目的智能分类功能应用，该功能是基于人工智能技术的创新应用，通过对数学题目进行智能分类，提供个性化的学习辅助和教学支持。该功能的实现可以通过以下步骤：首先，采集大量的高中数学题目数据…...

编程日记 2023/7/29 17:24:25

Redis Sentinel 及 Redis Cluster

Redis Sentinel Redis-Sentinel(哨兵模式)是Redis官方推荐的高可用性(HA)解决方案&#xff0c;当用Redis做Master-slave的高可用方案时&#xff0c;假如master宕机了&#xff0c;Redis本身(包括它的很多客户端)都没有实现自动进行主备切换&#xff0c;而Redis-sentinel本身也是…...

编程日记 2023/7/29 17:22:21

shell中按照特定字符分割字符串，并且在切分后的每段内容后加上特定字符(串)，然后再用特定字符拼接起来

文件中的内容&#xff0c;可以这么写&#xff1a; awk -F, -v OFS, {for(i1;i<‌NF;i){$i$i"_suffix"}}1 input.txt-F,&#xff1a;设置输入字段分隔符为逗号&#xff08;,&#xff09;&#xff0c;这将使awk按照逗号分割输入文本。-v OFS‘,’&#xff1a;设置输…...

编程日记 2023/7/29 17:21:19

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/9/15 11:03:08

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/8/13 18:32:28

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/9/9 22:50:58

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2025/9/3 15:40:48

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/9/4 14:20:38

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2025/9/1 17:56:35

Rust 开发环境搭建

环境搭建 1、开发工具RustRover 或者vs code 2、Cygwin64 安装 https://cygwin.com/install.html 在工具终端执行&#xff1a; rustup toolchain install stable-x86_64-pc-windows-gnu rustup default stable-x86_64-pc-windows-gnu ​ 2、Hello World fn main() { println…...

编程新知 2025/9/2 16:53:49

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...

编程新知 2025/9/14 12:09:11

基于鸿蒙(HarmonyOS5)的打车小程序

1. 开发环境准备 安装DevEco Studio (鸿蒙官方IDE)配置HarmonyOS SDK申请开发者账号和必要的API密钥 2. 项目结构设计 ├── entry │ ├── src │ │ ├── main │ │ │ ├── ets │ │ │ │ ├── pages │ │ │ │ │ ├── H…...

编程新知 2025/7/7 16:04:22