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

flask实现一个登录界面

news 2026/2/5 20:03:24

在这里插入图片描述

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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

.Net框架，除了EF还有很多很多......

文章目录 1. 引言2. Dapper2.1 概述与设计原理2.2 核心功能与代码示例基本查询多映射查询存储过程调用 2.3 性能优化原理2.4 适用场景 3. NHibernate3.1 概述与架构设计3.2 映射配置示例Fluent映射XML映射 3.3 查询示例HQL查询Criteria APILINQ提供程序 3.4 高级特性3.5 适用场…...

编程新知 2026/2/1 19:26:16

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2026/2/4 12:43:08

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...

编程新知 2026/1/26 9:48:34

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2026/1/11 0:40:53

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

编程新知 2026/1/29 17:56:19

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/12/13 4:04:33

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/10/20 9:03:01

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51