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

flask实现一个登录界面

news 文章来源：https://blog.csdn.net/weixin_41777118/article/details/131947902 2025/5/4 14:33:47

在这里插入图片描述

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

探寻智能化未来：AI与Web3共创金融领域巨大潜力

人工智能&#xff08;AI&#xff09;和Web3技术的迅猛发展为我们带来了许多新的机遇和影响。在数字经济和社会的浪潮中&#xff0c;结合了AI的智能化能力和Web3的去中心化与区块链技术&#xff0c;我们将进入一个智能化的Web3时代。人工智能和Web3技术是开拓生产力极限和重新定…...

编程日记 2023/7/29 17:20:18

Django学习笔记-表单（forms）的使用

在Django中提供了了form表单&#xff0c;可以更为简单的创建表单模板信息&#xff0c;简化html的表单。 一、网页应用程序中表单的应用 表单通常用来作为提交数据时候使用。 1.1 创建表单模板文件夹 在项目文件夹下创建一个template文件夹&#xff0c;用于存储所有的html模…...

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

机器学习分布式框架ray运行TensorFlow实例

使用Ray来实现TensorFlow的训练是一种并行化和分布式的方法&#xff0c;它可以有效地加速大规模数据集上的深度学习模型的训练过程。Ray是一个高性能、分布式计算框架&#xff0c;可以在集群上进行任务并行化和数据并行化&#xff0c;从而提高训练速度和可扩展性。 以下是实现…...

编程日记 2023/7/29 17:18:15

QT【day4】

chat_QT服务器端&#xff1a; //.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include<QTcpServer> //服务器类 #include<QTcpSocket> //客户端类 #include<QMessageBox> //对话框类 #include<QList> //链表容器 #inc…...

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

java中方法相关知识点详解

方法 简介 方法是一段用来完成特定功能的代码片段&#xff0c;用于定义该类或该类的实例的行为特征和功能实现语句块【复合语句】 语句块中定义的变量只能用于自己&#xff0c;外部不能使用 语句块可以使用外部的变量&#xff0c;而外部不能使用语句块的变量语法 [修饰符1 修饰…...

编程日记 2023/7/29 17:16:13

【算法训练营】Fibonacci数列+合法括号序列判断+两种排序方法

7.29 Fibonacci数列题目解析代码 合法括号序列判断题目题解代码 两种排序方法题目&#xff1a;题解代码 Fibonacci数列 题目 题目链接: 点击跳转 解析 【题目解析】&#xff1a; 本题是对于Fibonacci数列的一个考察&#xff0c;Fibonacci数列的性质是第一项和第二项都为1&am…...

编程日记 2023/7/29 17:15:11

【Rasa】入门案例学习

Rasa初体验--构建对话机器人 NLU数据 version: "3.1"nlu:- intent: greetexamples: |- Hi- Hey!- Hello- Good day- Good morning- intent: subscribeexamples: |- I want to get the newsletter- Can you send me the newsletter?- Can you sign me up for the ne…...

编程日记 2023/7/29 17:14:10

基于java的坦克大战游戏的设计与实现--开题报告--【毕业论文】

文章目录 本系列校训毕设的技术铺垫文章主体层次选题目的和意义&#xff1a;与本课题相关的技术和方法综述&#xff1a;主要设计内容&#xff1a;设计的环境、方法及措施&#xff1a;参考文献 配套资源 本系列校训 互相伤害互相卷&#xff0c;玩命学习要你管&#xff0c;天生我…...

编程日记 2023/7/29 17:13:08

学习笔记|百度文心千帆大模型平台测试及页面交互简易代码

目前百度文心一言的内测资格申请相当拉胯&#xff0c;提交申请快3个月&#xff0c;无任何音讯。不知道要等到什么时候。 百度适时开放了百度文心千帆大模型平台&#xff0c;目前可以提交申请测试&#xff0c;貌似通过的很快&#xff0c;已取得测试申请资格&#xff0c;可以用起…...

编程日记 2023/7/29 17:12:07

Python中的数据科学实验库有哪些？

Python中有许多数据科学实验库可供使用。以下是一些常用的库&#xff1a; NumPy&#xff1a;用于处理大型多维数组和矩阵的基础数学库。Pandas&#xff1a;用于数据处理和分析的库&#xff0c;提供了灵活的数据结构和数据操作工具。Matplotlib&#xff1a;用于创建静态、动态和…...

编程日记 2023/7/29 17:11:06