使用 Flask 实现简单的登录注册功能

news2024/11/7 22:40:06

目录

1. 引言

2. 环境准备

3. 数据库设置

4. Flask 应用基本配置

5. 实现用户注册

6. 实现用户登录

7. 路由配置

8. 创建前端页面

9. 结论


1. 引言

在这篇文章中,我们将使用 Flask 框架创建一个简单的登录和注册系统。Flask 是一个轻量级的 Python Web 框架,适合快速开发 Web 应用。

2. 环境准备

  • 安装 Flask:可以通过 pip 安装 Flask 和相关依赖:

    pip install Flask 
    

    以下是具体配置

  • from flask import Flask, render_template, request, render_template_string, redirect, url_for
    from flask_mysqldb import MySQL
    from werkzeug.security import generate_password_hash, check_password_hash
    from config import Config  # 导入配置文件
  • 创建项目结构

    flask_demologin/
    ├── app.py
    ├── config.py
    ├── templates/
    │   ├── login.html
    │   ├── res.html
    │   └── index.html
    └── static/
        └── css/
        └── img/
    

3. 数据库设置

  • 使用 MySQL
    • 创建数据库及用户表。
    CREATE DATABASE demologin;
    USE demologin;
    
    CREATE TABLE users (
        id INT AUTO_INCREMENT PRIMARY KEY,
        username VARCHAR(100) NOT NULL UNIQUE,
        password VARCHAR(255) NOT NULL
    );
    

4. Flask 应用基本配置

  • config.py 文件配置数据库连接:
    class Config:
    MYSQL_HOST = 'localhost'
    MYSQL_USER = 'root'  # 替换为你的 MySQL 用户名
    MYSQL_PASSWORD = 'root'  # 替换为你的 MySQL 密码
    MYSQL_DB = 'demologin' # 替换为你的 数据库名称
    

5. 实现用户注册

  • 在 app.py 中创建注册路由
    @app.route('/register', methods=['POST'])
    def register():
        name = request.form.get('username')
        pwd = request.form.get('password')
    
        if not name or not pwd:
            return render_template_string("用户名和密码不能为空,<a href='/'>返回登录</a>"), 400
    
        cur = mysql.connection.cursor()
        cur.execute("SELECT * FROM users WHERE username = %s", (name,))
        user = cur.fetchone()
    
        if user:
            return render_template_string("用户名已存在,<a href='/'>返回登录</a>"), 400
    
        hashed_pwd = generate_password_hash(pwd)
        cur.execute("INSERT INTO users (username, password) VALUES (%s, %s)", (name, hashed_pwd))
        mysql.connection.commit()
        cur.close()
    
        return render_template_string("注册成功,<a href='/'>返回登录</a>"), 201
    

6. 实现用户登录

  • 在 app.py 中创建登录路由
    @app.route('/login', methods=['POST'])
    def login():
        name = request.form.get('username')
        pwd = request.form.get('password')
    
        if not name or not pwd:
            return render_template_string("用户名和密码不能为空,<a href='/'>返回注册</a>"), 400
    
        cur = mysql.connection.cursor()
        cur.execute("SELECT * FROM users WHERE username = %s", (name,))
        user = cur.fetchone()
    
        if user and check_password_hash(user[2], pwd):  # user[2] 是密码字段
            return redirect(url_for('home'))  # 登录成功,重定向到主页
        else:
            return "用户名或密码错误", 401
    

7. 路由配置

  • 设置首页和重定向
    @app.route('/')
    def home():
        return render_template('index.html')  # 渲染主页模板
    
    • 设置登录页面和注册页面和重定向: 
@app.route('/')
def Index_login():  # put application's code here
   return render_template('login.html')

@app.route('/res')
def Index_res():  # put application's code here
   return render_template('res.html')

8. 创建前端页面

  • login.html 和 res.html 的简单示例:
    <!-- login.html -->
    <div class="cont-parent"> 
            <div class="cont">
                <div class="form sign-in">
                    <h2>Welcome back, Doctor</h2>
                    <form action="/login" method="post">
                        <label>
                            <span>用户名</span>
                            <input type="text" name="username" placeholder="Username" required/>
                        </label>
                        <label>
                            <span>密码</span>
                            <input type="password" name="password" placeholder="Password" required/>
                        </label>
                        <button type="submit" class="submit">登录</button>
                    </form>
                    <p class="forgot-pass">忘记密码?</p>
                    <button type="button" class="fb-btn">链接 <span>facebook</span></button>
                </div>
                <div class="sub-cont">
                    <div class="img">
                        <div class="img__text m--up">
                            <h2>刚来?</h2>
                            <p>那就<a href="/res">注册</a>一个吧!</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    <!-- res.html -->
    <div class="cont-parent"> 
        <div class="cont">
            <div class="form sign-in">
                <h2>Time to feel like home,</h2>
                <form action="/register" method="post">
                        <label>
                            <span>用户名</span>
                            <input type="text" name="username" placeholder="Username" required/>
                        </label>
                        <label>
                            <span>密码</span>
                            <input type="password" name="password" placeholder="Password" required/>
                        </label>
                        <button type="submit" class="submit">注册</button>
                </form>
                    <button type="button" class="fb-btn">Join with <span>facebook</span></button>
            </div>
            <div class="sub-cont">
                <div class="img">
                    <div class="img__text m--up">
                        <h2>已经有账号了?</h2>
                        <p>那就去<a href="/">登录</a>吧!</p>
                    </div>
    
                </div>
                
        </div>
        </div>
        </div>
    

9. 结论

通过本文,我们实现了一个基本的登录和注册功能。

以下是实现的效果图(前端靠大家自由发挥,提供的html代码进作为参考

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

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

相关文章

SystemC学习(3)— APB_SRAM的建模与测试

SystemC学习&#xff08;3&#xff09;— APB_SRAM的建模与测试 一、前言 二、APB_SRAM建模 编写APB_SRAM模型文件apb_sram.h文件如下所示&#xff1a; #ifndef __APB_SRAM_H #define __APB_SRAM_H#include "systemc.h"const int ADDR_SIZE 32; const int DATA_…

新兴斗篷cloak技术,你了解吗?

随着互联网技术的飞速发展&#xff0c;网络营销领域也经历了翻天覆地的变革。 从最早的网络横幅广告到如今主流的搜索引擎和社交媒体营销&#xff0c;广告形式变得越来越多样。 其中&#xff0c;搜索引擎广告一直以其精准投放而备受青睐&#xff0c;但近年来&#xff0c;一项名…

UG NX二次开发(C#)-计算圆柱面与其他平面的夹角

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 1、前言2、首先创建一个三维模型3、 源代码4、调用代码1、前言 在QQ群中,有群友提问了如何判断圆柱面与某一平面是否垂直,我这里以案例的形式计算圆柱面主轴矢量与平面法矢的夹角,如果夹角为0,…

基于卷积神经网络的棉花病虫害识别与防治系统,resnet50,mobilenet模型【pytorch框架+python源码】

更多目标检测和图像分类识别项目可看我主页其他文章 功能演示&#xff1a; 棉花病害识别与防治系统&#xff0c;卷积神经网络&#xff0c;resnet50&#xff0c;mobilenet【pytorch框架&#xff0c;python源码】_哔哩哔哩_bilibili &#xff08;一&#xff09;简介 基于卷积…

成都世运会志愿者招募报名流程及证件照制作方法

成都世运会志愿者招募正在如火如荼地进行中&#xff0c;许多热心公益的青年们纷纷报名参与。本文将详细介绍如何通过官方渠道报名&#xff0c;并使用手机来自行制作符合要求的4:5比例的白底证件照。 一、志愿者报名流程概述首先&#xff0c;报名成都世运会志愿者需要通过官方指…

Java 输入/输出(I/O)操作(10/30)

目录 Java 输入/输出&#xff08;I/O&#xff09;操作 1. Java I/O 类体系结构 2. 文件读写操作 2.1 使用 FileInputStream 和 FileOutputStream 进行字节流读写 2.2 使用 FileReader 和 FileWriter 进行字符流读写 3. 缓冲流的使用 3.1 使用 BufferedReader 和 Buffere…

Unity XR Interaction Toolkit 开发教程(1):OpenXR 与 XRI 概述【3.0 以上版本】

文章目录 &#x1f4d5;Unity XR 开发架构&#x1f50d;底层插件&#xff08;对接硬件&#xff09;&#x1f50d;高层 SDK&#xff08;面向应用交互层&#xff09; &#x1f4d5;OpenXR&#x1f4d5;XR Interaction Toolkit&#x1f50d;特点&#x1f50d;XRI 能够实现的交互类…

Nginx防盗链配置

1. 什么是盗链? 盗链是指服务提供商自己不提供服务的内容&#xff0c;通过技术手段绕过其它有利益的最终用户界面&#xff08;如广告&#xff09;&#xff0c;直接在自己的网站上向最终用户提供其它服务提供商的服务内容&#xff0c;骗取最终用户的浏览和点击率。受益者不提供…

使用Scrapy框架爬取博客信息

随着网络的发展&#xff0c;越来越多有价值的信息存储在网络上。使用爬虫技术可以从这些信息源中提取出有用的数据。本文将介绍如何使用Python中的Scrapy框架来爬取博客站点上的文章标题、作者以及阅读数&#xff0c;并将其保存到JSON文件中。 一、项目背景 Scrapy是一个快速…

Vue2.0 通过vue-pdf-signature@4.2.7和pdfjs-dist@2.5.207实现PDF预览

1.安装依赖 npm install pdfjs-dist2.5.207 --savenpm install vue-pdf-signature4.2.7 --save2.在.vue文件中 script 部分引入 <script> import * as PDFJS from pdfjs-dist PDFJS.GlobalWorkerOptions.workerSrc require(pdfjs-dist/build/pdf.worker.js);//解决pdf…

A4-C四驱高防变电站巡检机器人

在电力行业数字化、智能化转型进程中&#xff0c;搭载多模态成像传感器的变电站巡检机器人、视频监控设备逐渐取代传统人工&#xff0c;成为变电设备状态监测的主要工具。变电站巡检机器人具有全天候、非接触式、多参量测量等特点&#xff0c;结合内置人工智能算法完成仪表识别…

““ 引用类型应用举例

#include <iostream> //使能cin(),cout(); #include <stdlib.h> //使能exit(); #include <iomanip> //使能setbase(),setfill(),setw(),setprecision(),setiosflags()和resetiosflags(); //setbase( char x )是设置输出数字的基数,如输出进制数则用se…

Git 本地操作(2)

会以下操作就可以完成本地的版本控制了&#xff0c;就不需要再复制文件每次改一个东西就复制整个工程保存下来啦&#xff01; 建议先看上一篇文章噢 &#xff01;&#xff01;&#xff01; 一、新建项目git本地操作 1、初始化仓库 创建一个 project 文件夹&#xff0c;将需…

室内障碍物射线追踪算法matlab模拟仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 增加发射点 加入室内墙壁&#xff1a; 同时增加发射点和室内墙壁&#xff1a; 2.算法运行软件版本 matlab2022a 3.部分…

视频文案素材获取渠道分享

做视频时为文案发愁&#xff1f;别担心&#xff01;今天为大家推荐几个实用的视频文案素材网站&#xff0c;让你灵感爆棚&#xff0c;轻松创作文案。 蛙学网 首先要推荐的是蛙学网。作为专业短视频素材库&#xff0c;不仅有修牛蹄、解压视频等热门素材&#xff0c;还为短视频创…

【LLaMA-Factory】【Windows】:在windows操作系统配置大模型微调框架LLaMA-Factory

目录 序言 1 代码下载 2 模型下载 一、模型的作用 二、为何需要下拉模型 3 conda 环境安装 一、环境隔离与管理 二、简化安装与配置 三、提升性能与兼容性 4 安装依赖包 5 安装cuda 121版本 6 安装pytorch 一、PyTorch与LLaMA-Factory的兼容性 二、PyTorch的GPU加…

深度学习基础(2024-10-30更新到tensor相关)

1. 名词解释 FFN FFN &#xff1a; Feedforward Neural Network&#xff0c;前馈神经网络馈神经网络是一种基本的神经网络架构&#xff0c;也称为多层感知器&#xff08;Multilayer Perceptron&#xff0c;MLP&#xff09;FFN 一般主要是包括多个全连接层(FC)的网络&#xff…

逆变器前级倍压方案【工作日志】

EG3525S: 价格便宜&#xff0c;能买到&#xff0c;资料丰富&#xff0c;成熟&#xff0c;有人用 C2987456_AC-DC控制器和稳压器_EG3525S_规格书_WJ93166.PDF 发现一个好玩的&#xff0c;这个芯片还可以做大功率的降压控制使用&#xff1a; EG3525S推挽半桥PWM控制芯片数…

企业数字化转型该如何衡量?转型的好不好,主要看哪些方面?

​大家发现一个现象没&#xff1f;就是明明可以简单几句话说清楚的事&#xff0c;有些人就喜欢长篇大论&#xff0c;写个几千上万字&#xff0c;甚至从概念、定义开始聊&#xff0c;讲了半天都还没讲到重点。就给人一种强行“凑字”的感觉... 其实这个问题很简单的&#xff0c;…

html生成图片方案总结

动态图片生成是我们日常开发中经常遇到的需求&#xff0c;比如宣传海报生成&#xff0c;电商商品图动态生成等&#xff0c;本文总结出三种常见的 HTML 生成图片的方案。 一、html2canvas html2canvas库能够将 HTML 元素渲染为 Canvas&#xff0c;然后将其转换为图片。它的优点…