大二下学期团队项目(免密登录)

今日主要与团队成员一同实现了免密登录与记住密码的功能:

首先用户打开网页会进入电影浏览的页面,如果用户没有记住密码将会跳转到登录页面。

登录页面:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../static/css/login.css">
    <script src="../static/js/jquery-1.7.2.min.js"></script>
    <script src="../static/js/register.js"></script>
    <title>树懒电影登录</title>
    <script >
    </script>
</head>
<body>
    <div id="container">
        <div id="container-child">
            <div id="img-div"><img src="../static/img/shulan.png"></div>
            <div id="login-div">
                <div>
                    <p class="p-title">登录您的树懒电影</p>
                    <form id="login-form" method="post">
                        <div class="input-d">
                            <input class="input-text" type="text" name="userphone" id="userphone" placeholder="请输入您的账号">
                        </div>
                        <div class="input-d">
                            <input class="input-text" type="password" name="password" id="password" placeholder="请输入您的密码">
                        </div>
                        <div class="div-input">
                            <div>
                                <input type="checkbox" value=“1” class=“remeber” onclick="onClickHander(this)">
                                <label>记住密码</label>
                            </div>
                        </div> 
                        <button type="button" class="login-button" onclick="login_()">&emsp;</button>
                        <div class="footer"> <a href="http://127.0.0.1:5000/regis">注册</a> | <a href="http://127.0.0.1:5000/reset">忘记密码</a></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    var cb=0
    function onClickHander(obj) {
        if(obj.checked==true){
            cb=1
            // alert(cb)
        }else{
            cb=0
            // alert(cb)
        }
    }
    function login_(){
        var userphone=document.getElementById("userphone").value
        var password=document.getElementById("password").value
        // alert(cb)
        $.ajax({
                url: "/web_login",
                data: {
                    userphone:userphone,password:password,cb:cb
                },
                success: function (data) {
                    //正常验证失败弹窗
                    if (data.data == 0)
                        alert("账号或密码错误!")
                    //验证成功,返回response
                    if (data.data != 0)
                        window.open("http://127.0.0.1:5000/show","_self")
                },
                error: function (xhr, type, errorThrown) {
                    print("登录js,验证账号密码ajax请求失败!")
                }
        })
    }
</script>

后台逻辑:

@app.route('/',methods=['GET', 'POST', 'PUT'])
def hello_world():
    try:
        cookphone = request.cookies.get('cookphone')
        cookpass = request.cookies.get('cookpass')
        print("获取到的cookie账号密码:" + cookphone + "  " + cookpass)
        if (len(cookpass) != 0 and len(cookphone) != 0):
            res = sql.web_login(cookphone, cookpass)
            print("验证获取到的cookie账号密码:"+str(res))
            if (res == True):
                session['userphone'] = cookphone
                return redirect(url_for("hello_world_show"))
            else:
                return render_template("login.html")
        else:
            return render_template("login.html")
    except:
        print("cookie验证跳转异常!")
        return render_template("login.html")
#免密登录
@app.route('/web_login/',methods=['GET', 'POST'])
def web_login():
    userphone = request.values.get('userphone')
    password=request.values.get('password')
    cb=request.values.get('cb')
    print("是否记住密码: "+cb)            #cb的返回值类型是 str 字符串
    # print(type(cb))
    print("登录账号:"+userphone+"   "+"密码:"+password)
    res=sql.web_login(userphone,password)
    if(res==True):
        session['userphone'] = userphone
        if(cb=="1"):
            print("开始存储cookies登录账号:" + userphone + "   " + "密码:" + password)
            resp = make_response('储存cookies')
            resp.set_cookie('cookphone', userphone, max_age=3600 * 24 * 15)
            resp.set_cookie('cookpass', password, max_age=3600 * 24 * 15)
            print("登录成功且用户选择记住密码,返回response")
            return resp                   #登录成功且用户选择记住密码,返回response
        else:
            print("登录成功 返回 1 状态码")
            return jsonify({"data": 1})  # 登录成功 返回 1 状态码
    else:
        print("登录失败   返回 0 状态码")
        return jsonify({"data":0})  #登录失败   返回 0 状态码
#用户退出清理cookie
@app.route('/clean_cookies',methods=['GET', 'POST'])
def clean_cookies():
    try:
        resp = Response('cookies的删除')
        resp.delete_cookie('cookphone')  # cookies只有在响应返回的时候才能删除
        resp.delete_cookie('cookpass')  # cookies只有在响应返回的时候才能删除
        print("删除cookies成功!")
        return resp                 #成功删除cookies 返回相响应
    except:
        return jsonify({"data":0})  #删除cookies失败   返回 0 状态码
原文地址:https://www.cnblogs.com/fengchuiguobanxia/p/14805176.html