Flask实现注册登录模块

秋名山码神

发布于 2023-10-16 14:25:51

2960

发布于 2023-10-16 14:25:51

文章被收录于专栏：码神随笔码神随笔

前言

本期给大家带来，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')

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')

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>B</span>reeze Video</h2>
                                    <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>