制作一个用户登录界面

Flask-WTF扩展使用Python类来表示web表单。表单类只是将表单的字段定义为类变量。

再次考虑到分离的问题,我将使用一个新的app/forms.py模块来存储我的web表单类。首先,让我们定义一个用户登录表单,它要求用户输入用户名和密码。表单还将包括一个“记住我”复选框和一个提交按钮:

app/forms.py:

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, BooleanField, SubmitField
from wtforms.validators import DataRequiredclass LoginForm(FlaskForm):username = StringField('Username', validators=[DataRequired()])password = PasswordField('Password', validators=[DataRequired()])remember_me = BooleanField('Remember Me')submit = SubmitField('Sign In')

大多数Flask扩展使用flask_<name>命名约定作为它们的顶级导入符号。在本例中,Flask-WTF的所有符号都在flask_wtf下。这就是从app/forms.py顶部导入FlaskForm基类的地方。

表示我用于此表单的字段类型的四个类是直接从WTForms包导入的,因为Flask-WTF扩展不提供自定义版本。对于每个字段,在LoginForm类中创建一个作为类变量的对象。每个字段都有一个描述或标签作为第一个参数。

您在某些字段中看到的可选validators参数用于将验证行为附加到字段。datarerequired验证器只是检查提交的字段是否为空。有更多的验证器可用,其中一些将以其他形式使用。

下一步是将表单添加到HTML模板中,以便它可以在web页面上呈现。好消息是,在LoginForm类中定义的字段知道如何将自己呈现为HTML,因此此任务相当简单。下面你可以看到登录模板,我将把它存储在app/templates/login.html文件中:

app/templates/login.html:

{% extends "base.html" %}{% block content %}<h1>Sign In</h1><form action="" method="post" novalidate>{{ 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.remember_me() }} {{ form.remember_me.label }}</p><p>{{ form.submit() }}</p></form>
{% endblock %}

此时,您可以运行应用程序并在web浏览器中查看表单:在浏览器的地址栏中输入http://localhost:5000/

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

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

相关文章

Vue3 + Vite + Ts + Router搭建项目

1、新建文件夹 从新建的文件夹cmd进入终端 2、安装vite—依据vite创建vue3项目 2.1、运行 npm init vitelatest2.2.1、输入项目名称 2.2.2、选择vue 2.2.3、选择TypeScript语言 3、安装依赖项 3.1、进入刚才创建的文件夹 cd vite-project 3.2、查看镜像 #查看当前源 npm con…

LeetCode111. Minimum Depth of Binary Tree

文章目录 一、题目二、题解 一、题目 Given a binary tree, find its minimum depth. The minimum depth is the number of nodes along the shortest path from the root node down to the nearest leaf node. Note: A leaf is a node with no children. Example 1: Inpu…

mac M2 pytorch_geometric安装

我目前的环境是mac M2&#xff0c;我在base环境中安装了pytorch_geometric,仅仅做测试用的&#xff0c;不做真正跑代码的测试 首先我的base环境的设置如下&#xff1a; pip install pyg_lib torch_scatter torch_sparse torch_cluster torch_spline_conv -f https://data.pyg.…

创建多层级行索引,创建多层级行索引的DataFrameMultiIndex.from_product()

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 创建多层级行索引, 创建多层级行索引的DataFrame MultiIndex.from_product() [太阳]选择题 使用pd.MultiIndex.from_product()&#xff0c;下列输出正确的是&#xff1a; import pandas as pd…

浏览器输入url,到看到页面会发生什么?

当在浏览器中输入 URL 并按下回车后&#xff0c;以下是通常发生的主要步骤&#xff1a; 1&#xff1a;URL 解析&#xff1a;浏览器会解析输入的 URL&#xff0c;提取出协议&#xff08;如 HTTP、HTTPS&#xff09;、域名和路径等信息。 2&#xff1a;DNS 解析&#xff1a;浏览…

【React入门实战】实现Todo代办

文章目录 效果功能-状态管理相关接口定义相关方法定义 UIinput输入框&#xff1a;回车添加todo标题列表列表项Main 总体代码 非常简单入门的react-todo练习&#xff0c;代码写的很小白。 效果 技术栈&#xff1a;react-typeScript 数据分为代办Todo和已办完Done&#xff0c;可…

我为什么要使用GPT????

作为一名Java程序员&#xff0c;经常需要搜索和学习与编程相关的内容。在遇到自己不会的问题时&#xff0c;使用ChatGPT可以帮助我快速找到答案。ChatGPT是一种自然语言生成模型&#xff0c;它可以根据我提供的问题或关键词生成相关的答案或信息。 -----------------哈哈哈其实…

Lazarus安装和入门资料

azarus-2.2.6-fpc-3.2.2-win64 下载地址 Lazarus 基础教程 - Lazarus Tutorials for Beginners Lazarus Tutorial #1 - Learning programming_哔哩哔哩_bilibili https://www.devstructor.com/index.php?pagetutorials Lazarus是一款开源免费的object pascal语言RAD IDE&…

全志T507-H技术帖 | 去掉IO扩展芯片后保留扩展引脚功能的实现方法

飞凌嵌入式推出的OKT507-C作为一款广受欢迎的开发板拥有丰富的功能接口&#xff0c;而实际上OKT507-C开发板的CPU引脚资源是比较紧缺的&#xff0c;那么它究竟是如何提供如此丰富的接口资源的呢&#xff1f;答案就是IO扩展芯片——TCA6424A。 这是一个24 位 I2C 和系统管理总线…

计算机视觉与深度学习 | 基于视觉惯性紧耦合的SLAM后端优化算法

===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== 基于视觉惯性紧耦合的SLAM后端优化算法 引言视觉惯性联合初始化非线性优…

BSP-STM32移植FreeRTOS

在stm32裸机工程中的Middlewares目录添加freeRtos源码 在裸机工程中的main中调用freertos接口

python+pytorch人脸表情识别

概述 基于深度学习的人脸表情识别&#xff0c;数据集采用公开数据集fer2013&#xff0c;可直接运行&#xff0c;效果良好&#xff0c;可根据需求修改训练代码&#xff0c;自己训练模型。 详细 一、概述 本项目以PyTorch为框架&#xff0c;搭建卷积神经网络模型&#xff0c;训…

计算机视觉与深度学习 | 视频/图像转换及保存播放(Matlab源码)

===================================================== github:https://github.com/MichaelBeechan CSDN:https://blog.csdn.net/u011344545 ===================================================== 视频/图像转换及保存/播放 avi2img.m 功能:将视频转换为单张图片avi2m…

WebGL智慧城市软件项目

WebGL开发智慧城市项目时&#xff0c;需要考虑多个方面&#xff0c;包括技术、隐私、安全和可持续性。以下是一些需要注意的关键问题&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.隐私和数据安全…

[100天算法】-定长子串中元音的最大数目(day 67)

题目描述 给你字符串 s 和整数 k 。请返回字符串 s 中长度为 k 的单个子字符串中可能包含的最大元音字母数。英文中的 元音字母 为&#xff08;a, e, i, o, u&#xff09;。示例 1&#xff1a;输入&#xff1a;s "abciiidef", k 3 输出&#xff1a;3 解释&#xf…

Java 设计模式——解释器模式

目录 1.概述2.结构3.案例实现3.1.抽象表达式类3.2.终结表达式3.3.非终结表达式3.4.环境类3.5.测试 4.优缺点5.使用场景 1.概述 &#xff08;1&#xff09;如下图&#xff0c;设计一个软件用来进行加减计算。我们第一想法可能就是使用工具类&#xff0c;提供对应的加法和减法的…

el-table实现单选框+隐藏多选框+回显

0 效果 1 单选框 2 隐藏多选框 3 回显 回显数据要在el-table中添加两个属性

Django文件配置、request对象、连接MySQL、ORM

文章目录 Django静态文件及相关配置静态文件前言静态文件相关配置 form表单request对象request请求结果GET请求POST请求 pycharm连接数据库Django连接MySQLDjango ORM简介 Django静态文件及相关配置 在此篇博客我将以一个用户登录页面来引入相关知识 首先我们先编写一个html页面…

爬虫框架Scrapy学习笔记-3

Scrapy管道详解&#xff1a;数据存储和图片下载 引言 在网络爬虫开发中&#xff0c;数据的存储和处理是至关重要的环节。Scrapy作为Python中一款强大的网络爬虫框架&#xff0c;提供了丰富的数据存储和处理功能&#xff0c;其中最重要的概念之一就是管道&#xff08;Pipeline…

【JavaEESpring】Spring Web MVC⼊⻔

Spring Web MVC 1. 什么是 Spring Web MVC1.1 什么是 MVC ?1.2 是什么 Spring MVC? 2. 学习 Spring MVC2.1 建立连接2.2 请求2.3 响应 3. 相关代码链接 1. 什么是 Spring Web MVC 官⽅对于 Spring MVC 的描述是这样的&#xff1a; 1.1 什么是 MVC ? MVC 是 Model View C…