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

flask实现一个登录界面

news 2026/4/2 11:30: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

iMeta | 浙江农科院卢立志/曾涛联合中南大学湘雅医院揭示人参皂苷Rg3缓解肝脏铁死亡的新机制

点击蓝字 关注我们一种生物活性人参皂苷改善非酒精性脂肪性肝炎中氧化磷脂积累引起的肝细胞铁死亡iMeta主页&#xff1a;http://www.imeta.science研究论文● 原文: iMeta(IF 33.2, 中科院双一区Top)● 英文题目: A bioactive ginsenoside alleviates hepatocellular ferroptos…...

编程新知 2026/4/2 11:00:22

ai辅助开发：借助快马ai模型为直播应用添加弹幕情感分析与摘要生成功能

最近在开发一个直播应用时&#xff0c;发现弹幕互动是直播体验的重要组成部分&#xff0c;但海量弹幕中往往隐藏着观众的真实反馈和直播亮点。于是尝试用AI技术来增强直播应用的智能化功能&#xff0c;这里分享一下如何快速实现一个弹幕情感分析与摘要生成的工具页面。 项目构思…...

编程新知 2026/4/2 10:52:20

Phi-4-mini-reasoning助力Web前端开发：智能UI组件设计与代码生成

Phi-4-mini-reasoning助力Web前端开发&#xff1a;智能UI组件设计与代码生成 1. 引言&#xff1a;当AI遇见前端开发 想象一下这样的场景&#xff1a;产品经理拿着一份复杂的需求文档找到你&#xff0c;描述了一个需要实时数据更新、多状态切换、动态交互的仪表盘界面。传统开…...

编程新知 2026/4/2 10:09:51

Graphormer入门指南：无需编程基础，通过Web界面完成专业级分子建模

Graphormer入门指南&#xff1a;无需编程基础&#xff0c;通过Web界面完成专业级分子建模 1. 什么是Graphormer&#xff1f; Graphormer是微软研究院开发的一款基于纯Transformer架构的图神经网络模型&#xff0c;专门用于分子属性预测。它能够直接处理分子图结构&#xff08…...

编程新知 2026/4/2 10:07:50

别再只用Arduino了！用ESP32+TSW-30浑浊度传感器做个智能鱼缸水质监测器（附完整代码）

ESP32TSW-30浑浊度传感器打造智能鱼缸水质监测系统 养鱼爱好者都知道&#xff0c;水质是鱼类健康生长的关键因素。传统的人工检测方式不仅费时费力&#xff0c;还难以做到实时监控。今天我们就来动手打造一个基于ESP32和TSW-30浑浊度传感器的智能鱼缸水质监测系统&#xff0c;让…...

编程新知 2026/4/2 9:27:05

Anthropic代码泄露，AI江湖风云再起？

过去24小时&#xff0c;AI圈因Anthropic的两次泄露事件炸开了锅。Claude Code源码泄露&#xff0c;Mythos跑分也流出。这一系列事件不仅暴露了模型细节&#xff0c;还引发对Anthropic未来的诸多猜测。两次泄露&#xff0c;引发行业震动先是Claude Code源码意外泄露&#xff0c;…...

编程新知 2026/4/2 9:25:00

3步让旧款iOS设备重获新生：Legacy-iOS-Kit性能拯救全指南

3步让旧款iOS设备重获新生&#xff1a;Legacy-iOS-Kit性能拯救全指南 【免费下载链接】Legacy-iOS-Kit An all-in-one tool to restore/downgrade, save SHSH blobs, jailbreak legacy iOS devices, and more 项目地址: https://gitcode.com/gh_mirrors/le/Legacy-iOS-Kit …...

编程新知 2026/4/2 8:32:06

利用快马平台十分钟搭建worldmonitor数据监控原型

最近在做一个全球数据监控的小项目&#xff0c;需要快速验证原型效果。传统开发流程从环境搭建到功能实现至少需要几天时间&#xff0c;但这次尝试用InsCode(快马)平台后&#xff0c;十分钟就搭出了可运行的worldmonitor原型。分享下具体实现思路和操作体验&#xff1a; 明确核…...

编程新知 2026/4/2 7:07:02

PlugY终极指南：暗黑破坏神2单机模式完全解放方案

PlugY终极指南&#xff1a;暗黑破坏神2单机模式完全解放方案 【免费下载链接】PlugY PlugY, The Survival Kit - Plug-in for Diablo II Lord of Destruction 项目地址: https://gitcode.com/gh_mirrors/pl/PlugY 还在为暗黑破坏神2单机模式的储物箱空间不足而烦恼吗&am…...

编程新知 2026/4/2 6:32:35

别再搞混了！海康相机Bayer、Mono、YUV格式详解与选型避坑指南

工业相机图像格式全解析&#xff1a;从Bayer到YUV的实战选型策略 第一次接触工业相机参数表时&#xff0c;看到BayerRG8、Mono12 Packed、YUV422这些术语是不是感觉像在读天书&#xff1f;去年我在自动化检测项目上就曾因为选错图像格式&#xff0c;导致整套视觉算法推倒重来。…...

编程新知 2026/4/2 6:14:26