Flask 实现用户登录功能的完整示例:前端与后端整合(附Demo)

目录

  • 前言
  • Demo

前言

对于python用户的登录,以下只是提供一个Demo用于学习

更多的python知识点可从我的专栏中进行学习

  1. python专栏
  2. 详细分析Flask中的蓝图Blueprint(附Demo)
  3. 详细分析Flask部署云服务器(图文介绍)
  4. 构建Flask前后端不分离项目(附Python Demo)

Demo

项目结构:

/project-directory/templateslogin.htmlapp.py

前端登录页面:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Login</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;}.container {width: 300px;margin: 100px auto;padding: 20px;background-color: white;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}h2 {text-align: center;}.form-group {margin-bottom: 15px;}.form-group label {display: block;}.form-group input {width: 100%;padding: 8px;box-sizing: border-box;}.form-group button {width: 100%;padding: 10px;background-color: #5cb85c;color: white;border: none;cursor: pointer;}.error {color: red;text-align: center;}</style>
</head>
<body><div class="container"><h2>Login</h2><form method="POST" action="/login"><div class="form-group"><label for="username">Username</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">Password</label><input type="password" id="password" name="password" required></div>{% if error %}<p class="error">{{ error }}</p>{% endif %}<div class="form-group"><button type="submit">Login</button></div></form></div>
</body>
</html>

后端应用:

from flask import Flask, render_template, request, redirect, url_for, flash, sessionapp = Flask(__name__)
app.secret_key = 'your_secret_key'  # 用于会话加密,可以换成自己的密钥# 假设的用户数据,实际应用应从数据库中获取
users = {'admin': '123456','ma': 'nong'
}@app.route('/')
def index():if 'username' in session:return f'Logged in as {session["username"]}. <a href="/logout">Logout</a>'return redirect(url_for('login'))@app.route('/login', methods=['GET', 'POST'])
def login():if request.method == 'POST':username = request.form['username']password = request.form['password']# 检查用户名和密码if username in users and users[username] == password:session['username'] = usernamereturn redirect(url_for('index'))else:error = 'Invalid username or password.'return render_template('login.html', error=error)return render_template('login.html')@app.route('/logout')
def logout():session.pop('username', None)return redirect(url_for('login'))if __name__ == '__main__':app.run(debug=True)

账号和密码分别是这两个

  • 账号:admin,密码: 123456
  • 账号:ma ,密码:nong

登录成功后:

在这里插入图片描述

包括登录失败 以及 字段没有输入的捕捉情况:

在这里插入图片描述

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

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

相关文章

2024 年 GitLab Global DevSecOps 报告解读

近日 GitLab 正式发布了 2024 年 GitLab Global DevSecOps 报告&#xff0c;报告主题为 What’s next in DevSecOps。在全球有超 5000 位 IT 人员参与了该报告的调研&#xff0c;超 70% 为企业管理者&#xff0c;50% 以上的受访者所在企业规模超过 500人。该报告深刻揭示了在 A…

深度学习_GPT2Block详解(casual attention)

一、GTP2Block 整体结构 1.1 block准备 import torch from torch import nn from transformers import GPT2Model, GPT2Config from transformers.models.gpt2.modeling_gpt2 import GPT2Blockcfg GPT2Config() print(cfg.add_cross_attention) blk GPT2Block(cfg, layer_…

《ECMAScript 与 JavaScript:差异与共通》

一、概念辨析 《ECMAScript 与 JavaScript&#xff1a;差异与共通》 ECMAScript&#xff08;简称 ES&#xff09;是一种由 Ecma International 标准化的脚本语言规范。它定义了脚本语言的核心特性&#xff0c;包括语法、类型、语句、关键字等。例如&#xff0c;ECMAScript 规定…

被要求撤回Blackwell?一家初创企业称英伟达侵权自家技术,忍无可忍!英伟达和伙伴微软被齐齐告上法庭,赔偿或高达数十亿!

刚刚&#xff0c;一家初创公司居然把巨头英伟达和微软一起告了&#xff01; 名为Xockets的初创公司在诉讼中称&#xff0c;英伟达和微软公司窃取了其DPU技术&#xff0c;用以开发AI产品&#xff0c;并相互串通以压低其技术的价格&#xff0c;是名副其实的垄断行为&#xff01;…

智汇创想pytest接口自动化测试框架

本测试框架是基于pytest搭建的接口自动化框架&#xff0c;对象为深圳智汇创想官方网站。深圳智汇创想科技有限责任公司&#xff08;深圳智汇创想科技有限责任公司&#xff09;&#xff0c;是一家专注于跨境电子商务的集团公司&#xff0c;全球电商平台多品类多品牌的零售商&…

MATLAB | R2024b更新了哪些好玩的东西?

Hey, 又到了一年两度的MATLAB更新时刻&#xff0c;MATLAB R2024b正式版发布啦&#xff01;&#xff0c;直接来看看有哪些我认为比较有意思的更新吧! 1 小提琴图 天塌了&#xff0c;我这两天才写了个半小提琴图咋画&#xff0c;MATLAB 官方就出了小提琴图绘制方法。 小提琴图…

客户端负载均衡Ribbon实例

文章目录 一&#xff0c;概述二&#xff0c;实现过程三&#xff0c;项目源码1. 源码放送&#xff1a;2. 部署方式 四&#xff0c;功能演示五&#xff0c;其他 一&#xff0c;概述 一般来说&#xff0c;提到负载均衡&#xff0c;大家一般很容易想到浏览器 -> NGINX -> 反…

加密与安全_ sm-crypto 国密算法sm2、sm3和sm4的Java库

文章目录 Presm-crypto如何使用如何引入依赖 sm2获取密钥对加密解密签名验签获取椭圆曲线点 sm3sm4加密解密 Pre 加密与安全_三种方式实现基于国密非对称加密算法的加解密和签名验签 sm-crypto https://github.com/antherd/sm-crypto 国密算法sm2、sm3和sm4的java版。基于js…

PMP--一模--解题--21-30

文章目录 9.资源管理21、 [单选] 项目经理发现一个不可预料的高影响风险已经成为项目的一个因素&#xff0c;团队成员之间的自身利益导致问题得不到解决&#xff0c;项目经理必须快速行动&#xff0c;让团队重新集中精力&#xff0c;以便项目恢复进度&#xff0c;项目经理应该使…

vue3项目实现全局国际化

本文主要梳理vue3项目实现全项目格式化&#xff0c;例如在我前面文章使用若依创建vue3的项目中&#xff0c;地址&#xff1a;若依搭建vue3项目在导航栏中切换&#xff0c;页面中所有的组件的默认语言随之切换&#xff0c;使用的组件库依旧是element-plus&#xff0c;搭配vue-i1…

09-排序1 排序(C)

这一节&#xff0c;测试各类排序算法的运行速度&#xff08;没有基数排序&#xff08;桶&#xff09; 其实在实际学习中&#xff0c;还是有意义的 给定 n 个&#xff08;长整型范围内的&#xff09;整数&#xff0c;要求输出从小到大排序后的结果。 本题旨在测试各种不同的排序…

Windows与Linux下 SDL2的第一个窗口程序

Windows效果和Linux效果如下&#xff1a; 下面是代码&#xff1a; #include <stdio.h> #include "SDL.h"int main(int argc, char* argv[]) { // 初始化SDL视频子系统if (SDL_Init(SDL_INIT_VIDEO) ! 0){// 如果初始化失败&#xff0c;打印错误信息printf(&…

proteus+51单片机+实验(LCD1620、定时器)

目录 1.LCD1602液晶显示屏 1.1基本概念 1.1.1LCD的简介 1.1.2LCD的显示原理 ​​​1.1.3LCD的硬件电路 1.1.4LCD的常见指令 1.1.5LCD的时序 ​​​​​​​1.2代码 1.2.1写命令和写数据操作 1.2.2初始化和测试代码 1. 3.3功能函数 1.3proteus代码 1.3.1器件代码 1.…

探索Python世界的隐藏宝石:Pika库的神秘力量

文章目录 探索Python世界的隐藏宝石&#xff1a;Pika库的神秘力量背景&#xff1a;为何选择Pika&#xff1f;Pik库简介如何安装Pika&#xff1f;简单库函数使用方法场景应用常见Bug及解决方案总结 探索Python世界的隐藏宝石&#xff1a;Pika库的神秘力量 背景&#xff1a;为何…

ELK预警方案:API+XXLJob

目录 步骤一&#xff1a;出一个接口&#xff0c;接口内查询出10分钟内是否有异常信息 步骤二&#xff1a;XXLJob中设置预警的频率 步骤三&#xff1a;在重要的业务处输出指定格式日志即可 步骤一&#xff1a;出一个接口&#xff0c;接口内查询出10分钟内是否有异常信息 {&qu…

Java | Leetcode Java题解之第402题移掉K位数字

题目&#xff1a; 题解&#xff1a; class Solution {public String removeKdigits(String num, int k) {Deque<Character> deque new LinkedList<Character>();int length num.length();for (int i 0; i < length; i) {char digit num.charAt(i);while (!…

C语言字符函数和字符串函数(20)

文章目录 前言一、字符分类函数小练习 二、字符转换函数三、strlen的使用和模拟实现四、strcpy的使用和模拟实现五、strcat的使用和模拟实现六、strcmp的使用和模拟实现七、strncpy函数的使用八、strncat函数的使用九、strncmp函数的使用十、strstr函数的使用和模拟实现十一、s…

OpenGL3.3_C++_Windows(37)

调试&#xff1a; 视觉错误与CPU调试不同&#xff0c;在GLSL代码中也不能设置断点&#xff0c;出现错误的时候寻找错误的源头可能会非常困难。 glGetError&#xff08;&#xff09; GLenum glGetError();返回整形数字&#xff0c;查询错误标记&#xff0c;但是当一个错误标记…

C#开发基础之使用四种流行的数据库访问技术ADO.NET、Dapper、EF Core 和 SqlSugar 连接 SQL Server

前言 在这篇文章中&#xff0c;我们将介绍四种流行的数据库访问技术&#xff1a;ADO.NET、Dapper、Entity Framework Core (EF Core) 和 SqlSugar。每种技术都提供了与 SQL Server 进行交互的不同方法&#xff0c;我们将以 TestDB 数据库中的 User 表为例&#xff0c;展示如何…

关于malloc/free的一些知识点

序 关于malloc/free&#xff0c;我们都不陌生&#xff0c;在最开始学习c语言时就相当了解&#xff0c;包括c中的new也是封装的malloc。下边我以glibc实现的malloc来讲述一些关于malloc/free的知识点。 malloc/free malloc和free并不是系统调用&#xff0c;而是运行时库&…