今日主要与团队成员一同实现了免密登录与记住密码的功能:
首先用户打开网页会进入电影浏览的页面,如果用户没有记住密码将会跳转到登录页面。
登录页面:
<!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_()">登 录</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 状态码