• Flask实现注册登录模块

    🙌秋名山码民的主页
    😂oi退役选手，Java、大数据、单片机、IoT均有所涉猎，热爱技术，技术无罪
    🎉欢迎关注🔎点赞👍收藏⭐️留言📝
    获取源码，添加WX

    目录

    前言

    本期给大家带来，Flask+MySql+前端的注册登录模块实现

    1. 登录模块

    # 登录页面
@app.route('/login',methods=['GET','POST'])
def login():
    if request.method == 'GET':
        return render_template('login.html')
    elif request.method == 'POST':
        # 将输入的用户登录信息保存为字典
        request.form = dict(request.form)

        # 进行过滤,如果邮箱和密码都在数据库中，返回True
        def filter_fn(item):
            return request.form['email'] in item and request.form['password'] in item

        users = query.querys('select * from user',[],'select')
        filter_user = list(filter(filter_fn,users))
        # 验证成功，进入index.html
        if len(filter_user):
            session['email'] = request.form['email']
            return redirect('/home')
        else:
            return render_template('error.html', message='用户邮箱或密码输入错误')

@app.route('/loginOut',methods=['GET','POST'])
def loginOut():
    session.clear()  # 清除session中存储的登录数据
    return redirect('/login')


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    2. 注册模块

    # 注册页面
@app.route('/register',methods=['GET','POST'])
def register():
    if request.method == 'GET':
        return render_template('register.html')
    elif request.method == 'POST':
        request.form = dict(request.form)
        # 判断第一次输入密码和第二次是否相同
        if request.form['password'] != request.form['passwordChecked']:
            return render_template('error.html',message='两次输入密码不符，请重新输入')
        def filter_fn(item):
            return request.form['email'] in item

        users = query.querys('select * from user',[],'select')
        filter_list = list(filter(filter_fn, users))
        if len(filter_list):
            return render_template('error.html',message='该用户已被注册')
        else:
            # 将新注册的数据存储到数据库
            query.querys('insert into user(email,password) values(%s,%s)',[request.form['email'],request.form['password']])
            return redirect('/login')


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    3. 前端界面

    DOCTYPE html>
<html lang="en">

<head>

  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>大数据可视化平台-登陆页面title>

    
  <link href="/static/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
  <link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">

  <link href="/static/css/sb-admin-2.min.css" rel="stylesheet">
<style>
    .container h2 {
        text-align: center;
        margin-bottom: 20px;
        }
    .container h2 span{
        font-size: 50px;
        color: coral;
        margin-right: 10px;
    }

style>


head>

<body class="bg-gradient-primary">

<div class="container">
    <div class="row justify-content-center">
        <div class="col-xl-10 col-lg-12 col-md-9">
            <div class="card o-hidden border-0 shadow-lg my-5">
                <div class="card-body p-0">
                    <div class="row">
                        <div class="col-lg-6 d-none d-lg-block bg-login-image" style="background-image: url('/static/img/login.jpg')">div>
                        <div class="col-lg-6">
                            <div class="p-5">
                                <div class="text-center">
                                    <h2><span>Bspan>reeze Videoh2>
                                    <form action="#" method="post">
                                div>
                                <form class="user" method="POST" action="/login">
                                    <div class="form-group">
                                        <input type="email" name="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="用户名:admin or user">
                                    div>
                                    <div class="form-group">
                                        <input type="password" name="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="密码:123456">
                                    div>
                                    <div class="form-group">
                                        <div class="custom-control custom-checkbox small">
                                            <input type="checkbox" class="custom-control-input" id="customCheck">
                                            <label class="custom-control-label" for="customCheck">记住我label>
                                        div>
                                    div>
                                    <button href="index.html" class="btn btn-primary btn-user btn-block">
                                        登录
                                    button>
                                    <hr>
                                    <a href="index.html" class="btn btn-google btn-user btn-block">
                                        <i class="fab fa-google fa-fw">i> Google账号登录
                                    a>
                                    <a href="index.html" class="btn btn-facebook btn-user btn-block">
                                        <i class="fab fa-facebook-f fa-fw">i> Facebook账号登录
                                    a>
                                form>
                                <hr>
                                <div class="text-center">
                                    <a class="small" href="/register">注册新账号!a>
                                div>
                            div>
                        div>
                    div>
                div>
            div>
        div>
    div>
div>


body>

html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91

    4. 实现效果

    在这里插入图片描述

    最后

    如果本文对你有所帮助，还请三连支持一下博主！
    请添加图片描述

  • 相关阅读:
    C# 画参数可调调幅波
    activiti-spring-app-process 源码分析
    Hadoop集群启动和停止方法
    Python-sqlparse解析SQL工具库一文详解（二）
    Java之接口和抽象类详解
    QScintilla学习大全
    java使用看门狗原理实现监听业务
    AVL树的插入操作
    stm32cubemx hal学习记录：DAC 正弦波
    hi3861A上手记录
  • 原文地址：https://blog.csdn.net/weixin_45920495/article/details/133690478