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

flask实现一个登录界面

news 2025/11/5 16:54:05

在这里插入图片描述

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

大话软工笔记—需求分析概述

需求分析&#xff0c;就是要对需求调研收集到的资料信息逐个地进行拆分、研究&#xff0c;从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要&#xff0c;后续设计的依据主要来自于需求分析的成果&#xff0c;包括: 项目的目的…...

编程新知 2025/11/3 10:32:07

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2025/11/3 13:25:48

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/9/5 21:18:15

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

编程新知 2025/11/5 10:19:24

验证redis数据结构

一、功能验证 1.验证redis的数据结构&#xff08;如字符串、列表、哈希、集合、有序集合等&#xff09;是否按照预期工作。 2、常见的数据结构验证方法&#xff1a; ①字符串&#xff08;string&#xff09; 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...

编程新知 2025/10/5 5:37:09

嵌入式面试常问问题

以下内容面向嵌入式/系统方向的初学者与面试备考者，全面梳理了以下几大板块，并在每个板块末尾列出常见的面试问答思路，帮助你既能夯实基础，又能应对面试挑战。 一、TCP/IP 协议 1.1 TCP/IP 五层模型概述 链路层（Link Layer） 包括网卡驱动、以太网、Wi‑Fi、PPP 等。负责…...

编程新知 2025/7/17 4:25:39

STL 2迭代器

文章目录 1.迭代器2.输入迭代器3.输出迭代器1.插入迭代器 4.前向迭代器5.双向迭代器6.随机访问迭代器7.不同容器返回的迭代器类型1.输入 / 输出迭代器2.前向迭代器3.双向迭代器4.随机访问迭代器5.特殊迭代器适配器6.为什么 unordered_set 只提供前向迭代器&#xff1f; 1.迭代器…...

编程新知 2025/10/2 23:42:13

IP选择注意事项

IP选择注意事项 MTP、FTP、EFUSE、EMEMORY选择时&#xff0c;需要考虑以下参数&#xff0c;然后确定后选择IP。 容量工作电压范围温度范围擦除、烧写速度/耗时读取所有bit的时间待机功耗擦写、烧写功耗面积所需要的mask layer...

编程新知 2025/10/26 7:24:53