制作一个用户登录界面

news2024/11/25 18:56:48

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 DataRequired

class 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.coloradmin.cn/o/1191039.html

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

相关文章

【C++】类和对象的关系,对象的存储方式以及对象内存的计算

&#x1f490; &#x1f338; &#x1f337; &#x1f340; &#x1f339; &#x1f33b; &#x1f33a; &#x1f341; &#x1f343; &#x1f342; &#x1f33f; &#x1f344;&#x1f35d; &#x1f35b; &#x1f364; &#x1f4c3;个人主页 &#xff1a;阿然成长日记 …

【编程实践】黑框框里的打字小游戏,但是汇编语言

开始&#xff1a; 在学习王爽的《汇编语言》的过程中&#xff0c;我就真切地体会到编程实践对于理解的帮助。起初我没有安装书中的实验环境&#xff0c;看到100页左右就开始感觉无趣、吃力&#xff0c;看了后面忘前面&#xff0c;差点就要放弃这本书的学习。好在我后来还是装好…

苹果Ios系统app应用程序开发者如何获取IPA文件签名证书时需要注意什么?

今天呢想和大家介绍介绍苹果App开发者如何获取IPA文件签名证书的步骤和注意事项。对于苹果应用程序开发者而言&#xff0c;获取IPA文件签名证书是发布应用程序至App Store的重要步骤之一。签名证书能够确保应用程序的安全性和可信度&#xff0c;并使其能够在设备上正确运行。 …

芯驰科技出席2023云栖大会,探讨新汽车舱驾融合

10月31日-11月2日&#xff0c;2023云栖大会在杭州成功举办&#xff0c;全场景智能车芯引领者芯驰科技受邀参加斑马智行专场。 芯驰科技资深产品市场总监金辉在「新汽车舱驾融合趋势」研讨会上发表了主题演讲。在随后举办的圆桌论坛上&#xff0c;他和来自智能汽车域控制器、操…

机器学习 - 决策树:技术全解与案例实战

目录 一、引言二、决策树基础决策树模型概述构建决策树的关键概念特征选择决策树的生成 决策树的剪枝 三、算法研究进阶提升树和随机森林提升树&#xff08;Boosted Trees&#xff09;随机森林&#xff08;Random Forests&#xff09; 进化算法与决策树决策树结构的进化 多目标…

动态规划(3)---Leetcode509.斐波那契数

题目 分析 很明显的动态规划&#xff0c;直接写出。之前都是用递归来写。 题解 class Solution {public int fib(int n) {if (n0) return 0;if (n1) return 1;int q0,p1,r0;for(int i2;i<n;i){rqp;int tmpp;pr;qtmp; }return r;}

static关键字的三种用法

在C语言中&#xff0c;关键字"static"可以用于不同的上下文&#xff0c;具有不同的作用。以下是"static"在C语言中的主要作用&#xff1a; 1. 静态变量&#xff08;Static Variables&#xff09;&#xff1a; 在C语言中&#xff0c;使用static关键字来声明…

module ‘torch‘ has no attribute ‘_six‘

主要问题是torchvision的问题 在122服务器上的scvi-env2环境中 import torch import torch.nn as nnimport numpy as npfrom tqdm import tqdm from torchvision.utils import save_image, make_grid # Model Hyperparametersdataset_path ./datasetscuda True DEVICE tor…

18. 深度学习 - 从零理解神经网络

文章目录 本文目标预测趋势与关系波士顿房价预测 Hi, 你好。我是茶桁。 我们终于又开启新的篇章了&#xff0c;从今天这节课开始&#xff0c;我们会花几节课来理解一下深度学习的相关知识&#xff0c;了解神经网络&#xff0c;多层神经网络相关知识。并且&#xff0c;我们会尝…

vscode 访问本地或者远程docker环境

1、vscode 访问docker本地环境 直接点击左下角连接图标&#xff0c;弹出选项可以选择容器&#xff0c;只要容器在本地运行者&#xff0c;选择attach可以看到运行中的容器可以选择&#xff0c;选择其中需要选择的就行 ## 运行容器&#xff0c;可以-d后台运行都可以 docker run…

【Linux笔记】Linux环境变量与地址空间

【Linux笔记】Linux环境变量与地址空间 一、命令行参数1.1、main函数的参数1.2、main函数的第三个参数 二、环境变量的概念与内容2.1、环境变量的概念2.2、环境变量的分类2.3、环境变量的组织形式2.4、常见的环境变量 三、设置环境变量3.1、通过命令获取或设置环境变量3.2、通过…

开发一条公链多少钱

随着区块链技术的普及和发展&#xff0c;越来越多的企业和个人开始关注公链的开发和建设。那么&#xff0c;开发一条公链到底需要多少钱呢&#xff1f; 首先&#xff0c;我们需要了解公链开发的基本流程和成本构成。一般来说&#xff0c;开发一条公链需要考虑以下几个方面&…

leaflet:个性化配置,利用Leaflet-Geoman绘制多种图形(136)

第136个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+leaflet中个性化配置,利用Leaflet-Geoman绘制多种图形。 灵活地配置Leaflet-Geoman的属性,可以产生各种美妙的绘图效果。 直接复制下面的 vue+leaflet源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方…

探索人工智能领域——30个名词详解

目录 前言 正文 总结​​​​​​​ &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Filotimo__✍️原创&#xff0c;首发于CSDN&#x1f4da;。 &#x1f4e3;如需转载&#xff0c;请…

已解决:KeyError: ‘The truth value of a Series is ambiguous‘ 问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页: &#x1f405;&#x1f43e;猫头虎的博客&#x1f390;《面试题大全专栏》 &#x1f995; 文章图文并茂&#x1f996…

ros自定义消息包无法编译生成.h文件的问题解决

ros自定义消息包无法编译生成.h文件的问题解决 想要创建一个ROS功能包专门存放自己自定义的消息&#xff0c;想将这些消息都生成.h&#xff0c;可以由别的功能包来调用。 但是参照网上的诸多帖子未能解决&#xff0c;例如 https://blog.csdn.net/feidaji/article/details/10360…

干货 | 高效联动,携程机票IVR可视化的探索和实践

作者简介 Michael&#xff0c;携程全栈开发专家&#xff0c;追求以技术手段解决业务上的共性问题&#xff0c;构建灵活可配置且可视化的系统&#xff0c;提高生产力&#xff0c;降低沟通成本。 CunShun&#xff0c;携程后端开发工程师&#xff0c;专注系统架构、稳定性、低代码…

【面试经典150 | 】颠倒二进制位

文章目录 写在前面Tag题目来源题目解读解题思路方法一&#xff1a;逐位颠倒方法二&#xff1a;分治 写在最后 写在前面 本专栏专注于分析与讲解【面试经典150】算法&#xff0c;两到三天更新一篇文章&#xff0c;欢迎催更…… 专栏内容以分析题目为主&#xff0c;并附带一些对于…

狮子鱼社区团购小程序V18.9全开源独立版+小程序前端 安装教程

狮子鱼社区团购商城系统小程序V18.9独立开源版&#xff0c;该系统一直开源本身也非常完善&#xff0c;此系统拿来即用非常方便&#xff0c;同上一版一样播播资源特别优化很多细节首页美化了下&#xff0c;如小程序端授权窗口美化了下&#xff0c;该版本用户授权接口正常。功能测…

已解决:Python Error: IndentationError: expected an indented block 问题

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页: &#x1f405;&#x1f43e;猫头虎的博客&#x1f390;《面试题大全专栏》 &#x1f995; 文章图文并茂&#x1f996…