flask实现一个登录界面

news2024/11/27 12:51:00

在这里插入图片描述

flask实现一个登录界面

基础的Flask项目结构

  1. forms.py:定义登录表单和表单字段的文件。
  2. templates/login.html:用于渲染登录表单的 HTML 模板文件。
  3. routes.py:定义应用的路由和视图函数的文件。
  4. __init__.py:创建并初始化 Flask 应用的文件。
  5. run.py:启动应用的文件。
/myproject
    /myproject
        __init__.py
        routes.py
        forms.py
        /templates
            login.html
        /static
    run.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 DataRequired

class 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 LoginForm

app = 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 app

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

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

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

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/793786.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ubuntu 20.04 Ubuntu18.04安装录屏软件Kazam

1.在Ubuntu Software里面输入Kazam&#xff0c;就可以找不到这个软件&#xff0c;直接点击install就可以了 2.使用方法&#xff1a; 选择Screencast&#xff08;录屏&#xff09; Fullscreen&#xff08;全屏&#xff09;-----Windows&#xff08;窗口&#xff09;--------Ar…

Rust vs Go:常用语法对比(十一)

题目来自 Rust Vs Go: Which Language Is Better For Developing High-Performance Applications?[1] 202. Sum of squares Calculate the sum of squares s of data, an array of floating point values. 计算平方和 package mainimport ( "math")func main() { da…

5、joern安装

文章目录 一、安装环境二、安装步骤1、joern地址2、安装中可能出现的问题 一、安装环境 1. java 8   2. gradle 2.0.0(按照官网步骤安装)   3. Graphviz (sudo apt install graphviz-dev)   4. python > 3.5 二、安装步骤 1、joern地址 joern地址 2、安装中可能出…

flutter开发实战-旋转loading指示器

flutter开发实战-旋转loading指示器。 一、交织动画 有些时候我们可能会需要一些复杂的动画&#xff0c;这些动画可能由一个动画序列或重叠的动画组成。一个动画组合在不同阶段包含了多种动画&#xff0c;要实现这种效果&#xff0c;需要使用交织动画&#xff08;Stagger Anim…

同步网盘使用中的五大突出优势

同步网盘是一种流行的云存储解决方案&#xff0c;它可以将您本地计算机上的文件与云端存储空间同步&#xff0c;以保证文件的备份和访问。那么&#xff0c;同步网盘使用中的突出优势是什么呢&#xff1f;下面就为您详细介绍。 一、数据备份 同步网盘最大的优势之一就是可以自动…

【042】解密C++ STL:深入理解并使用queue容器

解密C STL&#xff1a;深入理解并使用queue容器 引言一、queue容器概述二、queue容器的底层实现原理三、queue容器常用API四、queue的使用案例4.1、使用queue容器实现一个高效的算法4.2、实现生产者-消费者模型 总结 引言 &#x1f4a1; 作者简介&#xff1a;一个热爱分享高性能…

基于linux下的高并发服务器开发(第二章)- Linux多进程开发

基于linux下的高并发服务器开发&#xff08;第二章&#xff09;- 2.1 进程概述_呵呵哒(&#xffe3;▽&#xffe3;)"的博客-CSDN博客01 / 程序和进程02 / 单道、多道程序设计03 / 时间片04/ 并行和并发05/ 进程控制块&#xff08;PCB&#xff09;https://blog.csdn.net/w…

聊天机器人如何增加电子商务销售额

聊天机器人和自动化对企业和客户来说都是福音。自动对话和聊天机器人&#xff08;以下统称为“自动化”&#xff09;通过自动回答问题或分配会话信息来帮助用户浏览品牌网站或电商商店。即时答案对客户来说非常有用&#xff0c;使用自动化也可以让原本与客户聊天的客服员工专注…

jQueryAPI

文章目录 1.jQuery 选择器1.1 jQuery 基础选择器1.2 jQuery 层级选择器1.3 隐式迭代1.4 jQuery 筛选选择器1.5 jQuery 筛选方法1.6 jQuery 里面的排他思想1.7 链式编程 2.jQuery 样式操作2.1 操作 css 方法2.2 设置类样式方法2.3 类操作与className区别 3.jQuery 效果3.1 显示隐…

Nginx下载和安装教程、Nginx目录结构、Nginx具体应用

1、Nginx概述 Nginx是一款轻量级的开源Web服务器软件&#xff0c;也是一种反向代理服务器。它以其高性能和灵活性而被广泛应用于互联网领域。本文将介绍Nginx的概述、下载和安装以及目录结构。 &#xff08;1&#xff09;Nginx介绍 Nginx最初由Igor Sysoev开发&#xff0c;目…

【MangoDB】学习笔记

这里写自定义目录标题 1 简介1.1 和MySQL的概念对比1.2 数据类型 1 简介 1.1 和MySQL的概念对比 1.2 数据类型

005.PADS VX2.4自定义快捷键设置及修改

005.PADS VX2.4自定义快捷键设置及修改 若部分快捷键不符合操作习惯或者部分功能系统未设置快捷键&#xff0c;可自定义快捷键功能&#xff0c;自定义快捷键功能需要注意设置的按键需要与无模命令区分&#xff0c;以免与无模命令冲突&#xff1b;如若需要修改某个快捷功能&…

隐马尔可夫HMM算法

算法简介&#xff1a; 一个系统每时每刻都存在着不同的状态&#xff0c;他们的状态由各种复杂的机制形成&#xff0c;且状态随着变化而不断改变&#xff0c;而这些复杂的机制就是一些高度非线性且复杂的射关系。 举一个例子。例如&#xff1a;一辆汽车在一条从左往右的道路上行…

华为OD机试真题 Java 实现【数据分类】【2023 B卷 100分】,附详细解题思路

目录 专栏导读一、题目描述二、输入描述三、输出描述四、解题思路1、输入2、输出3、解题思路 五、Java算法源码六、效果展示1、输入2、输出 华为OD机试 2023B卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&…

去掉mysql数据库表中日期时间字段的6位微秒

问题&#xff1a; 在DRF框架的models.py中有一个字段&#xff1a; create_time models.DateTimeField(auto_now_addTrue) 问题是在向数据库中插入数据时&#xff0c;此字段会带有6位的微秒&#xff0c;对精度要求没那么高&#xff08;看着很不爽&#xff09;&#xff0c;需…

每日一题——多数元素

多数元素 题目链接 方法一&#xff1a;暴力解法 直接利用两层循环&#xff0c;外层循环用来枚举数组的每一个元素&#xff0c;内层循环用来计算每个元素出现的次数&#xff0c;这样就可以求出多数元素了。 显然&#xff0c;这个方法的时间复杂度为O(N^2)&#xff0c;效率太低…

C#is、as关键字及获取当前活动窗体的实例

这篇日志记录一下C#中is关键字及as关键字的用法。 Is&#xff1a;判断检查对象是否与给定类型兼容 As&#xff1a;将对象转换为指定类型&#xff08;强转&#xff09;&#xff0c;就跟&#xff08;int&#xff09;这样的用法是一样的。 获取当前窗体的活动子窗体。 有一个属…

【暑期每日一练】 day6

目录 选择题 &#xff08;1&#xff09; 解析 &#xff08;2&#xff09; 解析 &#xff08;3&#xff09; 解析 &#xff08;4&#xff09; 解析 &#xff08;5&#xff09; 解析 编程题 题一 描述 示例 提示 解析 代码实现 题二 描述 示例 提示 解…

如何将表格中的状态数据转换为Tag标签显示

考虑到系统前端页面的美观程度&#xff0c;通常通过Tag标签来代替某条数据中的状态信息。仅通过一点操作&#xff0c;便能够使得页面美观程度得到较大提升&#xff0c;前后对比如下所示。代码基于Vue以及Element-ui组件实现。 修改前&#xff1a; 修改后&#xff1a; 修改前…

阿里内部一份手打 524 页《Java 中高级核心知识》令人醍醐灌顶

说在前面 知乎上有个很热门的话题&#xff1a;中国的程序员数量是否已经饱和或者过剩&#xff1f; 今年大家都有一个共同的感受&#xff1a;工作不好找&#xff0c;面试越来越难。 其实&#xff0c;造成这种现象不仅是因为今年受疫情影响&#xff0c;倒闭了很多公司&#xff…