flask实现一个登录界面

在这里插入图片描述

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()])

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

解压缩软件WinRAR-bandizip-7z--洛

个人收集的解压软件&#xff01;后期还会更新 ------------------------------------------------------------------- WinRAR&#xff1a;密码1234WinRARhttps://wwzb.lanzoue.com/b0485ldcj BandiZip&#xff1a;密码1234 Bandizip-Professionalhttps://wwzb.lanzoue.com/…

SpringBoot内嵌的Tomcat:

SpringBoot内嵌Tomcat源码&#xff1a; 1、调用启动类SpringbootdemoApplication中的SpringApplication.run()方法。 SpringBootApplication public class SpringbootdemoApplication {public static void main(String[] args) {SpringApplication.run(SpringbootdemoApplicat…

windows下载安装FFmpeg

FFmpeg是一款强大的音视频处理软件&#xff0c;下面介绍如何在windows下下载安装FFmpeg 下载 进入官网: https://ffmpeg.org/download.html, 选择Windows, 然后选择"Windows builds from gyan.dev" 在弹出的界面中找到release builds, 然后选择一个版本&#xff0…

如何在MacBook上彻底删除mysql

好久以前安装过&#xff0c;但是现在配置mysql一直出错&#xff0c;索性全部删掉重新配置。 一、停止MySQL服务 首先&#xff0c;请确保 MySQL 服务器已经停止运行&#xff0c;以免影响后续的删除操作。 sudo /usr/local/mysql/support-files/mysql.server stop如果你输入之…

【RTT驱动框架分析03】- sfus flash 操作库的分析和基于STM32F103RCT6+CUBEMX的SFUS移植教程

sfus flash 操作库的分析 sfus 抽象 /*** serial flash device*/ typedef struct {char *name; /**< serial flash name */size_t index; /**< index of flash device information table see flash_…

IntelliJ IDEA流行的构建工具——Gradle

IntelliJ IDEA&#xff0c;是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具&#xff0c;尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超常的。 如…

Hive之窗口函数lag()/lead()

一、函数介绍 lag()与lead函数是跟偏移量相关的两个分析函数 通过这两个函数可以在一次查询中取出同一字段的前N行的数据(lag)和后N行的数据(lead)作为独立的列,从而更方便地进行进行数据过滤&#xff0c;该操作可代替表的自联接&#xff0c;且效率更高 lag()/lead() lag(c…

《GreenPlum系列-部署维护》GreenPlum数据库Standby故障处理

一、Standby故障 1.检查监控中心数据库状态 2.查看master节点数据库状态 su - gpadmin gpstate -f二、重启数据库 1.快速关闭数据库 [gpadminmdw pg_log]$ gpstop -M fast ... Continue with Greenplum instance shutdown Yy|Nn (defaultN): > y ...2.开启数据库 [gpad…

短视频矩阵源码开发搭建分享--多账号授权管理

目录 文章目录 前言 一、矩阵号系统是什么&#xff1f; 二、使用步骤 1.创建推广项目 2.多账号授权 3.企业号智能客服系统 总结 前言 短视频多账号矩阵系统&#xff0c;通过多账号一键授权管理的方式&#xff0c;为运营人员打造功能强大及全面的“矩阵式“管理平台。…

EMC学习笔记(二十)EMC常用元件简单介绍(二)

EMC常用元件简单介绍&#xff08;二&#xff09; 1.瞬态抑制二极管&#xff08;TVS&#xff09;2.气体放电管3.半导体放电管 电磁兼容性元件是解决电磁干扰发射和电磁敏感度问题的关键,正确选择和使用这些元件是做好电磁兼容性设计的前提。由于每一种电子元件都有它各自的特性,…

关于Java的多线程实现

多线程介绍 进程&#xff1a;进程指正在运行的程序。确切的来说&#xff0c;当一个程序进入内存运行&#xff0c;即变成一个进程&#xff0c;进程是处于运行过程中的程序&#xff0c;并且具有一定独立功能。 线程&#xff1a;线程是进程中的一个执行单元&#xff0c;负责当前进…

LabVIEW开发小型减阻试验平台

LabVIEW开发小型减阻试验平台 湍流摩擦在粘性流体的阻力中起着重要作用&#xff0c;减少湍流摩擦是流体力学领域的热门话题之一。在油气管道的长距离流体输送中&#xff0c;泵站提供的几乎所有动力都用于克服流体的胫骨摩擦。在流体输送领域&#xff0c;船舶的蒙皮摩擦阻力占总…

使用 monaco-editor-nls 汉化 右键菜单汉化部分失败原因

首先使用npm或者其他包管理工具安装依赖插件&#xff1a; npm install monaco-editor --save npm install monaco-editor-nls --save npm install monaco-editor-webpack-plugin --save npm install monaco-editor-esm-webpack-plugin --save-dev如果右键菜单汉化一部分失败&a…

【C语言】扫雷(保姆级教程+内含源码)

C系列文章目录 前言 一&#xff0c;模块化编程 二&#xff0c;游戏思路与逻辑 三&#xff0c;实现游戏步骤/过程 1&#xff0c;菜单界面(menu) 2&#xff0c;实现多行多列扫雷 3&#xff0c; 实现多个雷 4,棋盘初始化 5&#xff0c;棋盘的打印 6&#xff0c;布置雷…

Modbus Poll 软件----下载和安装

Modbus Poll 下载 modbus tools 官网地址&#xff1a;https://www.modbustools.com/ 步骤1 点击进入官网&#xff0c;然后点击 DOWNLOAD&#xff0c;进入下载界面。 步骤2 在下载界面&#xff0c;点击 Download 64bit &#xff0c;下载 Modbus Poll。 步骤3 下载完成 Mo…

缓存数据同步技术Canal

说明&#xff1a;缓存数据同步&#xff0c;以Redis为例&#xff0c;如何保证从Redis中取出来的数据与MySQL中的一致&#xff1f;在微服务架构下&#xff0c;通常可以用以下两种技术来实现&#xff1a; MQ&#xff1a;在修改数据的同时&#xff0c;发送一个消息修改缓存&#x…

谷粒商城第七天-商品服务之分类管理下的删除、新增以及修改商品分类

目录 一、总述 1.1 前端思路 1.2 后端思路 二、前端部分 2.1 删除功能 2.2 新增功能 2.3 修改功能 三、后端部分 3.1 删除接口 3.2 新增接口 3.3 修改接口 四、总结 一、总述 1.1 前端思路 删除和新增以及修改的前端无非就是点击按钮&#xff0c;就向后端发送请求…

7.事件类型

7.1鼠标事件 案例-轮播图点击切换 需求&#xff1a;当点击左右的按钮&#xff0c;可以切换轮播图 分析: ①右侧按钮点击&#xff0c;变量&#xff0c;如果大于等于8&#xff0c;则复原0 ②左侧按钮点击&#xff0c;变量–&#xff0c;如果小于0&#xff0c;则复原最后一张 ③鼠…

OpenCV实现高斯模糊加水印

# coding:utf-8 # Email: wangguisendonews.com # Time: 2023/4/21 10:07 # File: utils.pyimport cv2 import PIL from PIL import Image import numpy as np from watermarker.marker import add_mark, im_add_mark import matplotlib.pyplot as plt# PIL Image转换成OpenCV格…

【后端面经】微服务构架 (1-6) | 隔离:如何确保心悦会员体验无忧?唱响隔离的鸣奏曲!

文章目录 一、前置知识1、什么是隔离?2、为什么要隔离?3、怎么进行隔离?A) 机房隔离B) 实例隔离C) 分组隔离D) 连接池隔离 与 线程池隔离E) 信号量隔离F) 第三方依赖隔离二、面试环节1、面试准备2、基本思路3、亮点方案A) 慢任务隔离B) 制作库与线上库分离三、章节总结 …