思路总结:
html代码:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <link rel="stylesheet" href="../static/css/login.css">
8 <script src="../static/js/jquery-1.7.2.min.js"></script>
9 <script src="../static/js/register.js"></script>
10 <title>树懒电影登录</title>
11 <script >
12 </script>
13 </head>
14 <body>
15 <div id="container">
16 <div id="container-child">
17 <div id="img-div"><img src="../static/img/shulan.png"></div>
18 <div id="login-div">
19 <div>
20 <p class="p-title">登录您的树懒电影</p>
21 <form id="login-form" method="post">
22 <div class="input-d">
23 <input class="input-text" type="text" name="userphone" id="userphone" placeholder="请输入您的账号">
24 </div>
25 <div class="input-d">
26 <input class="input-text" type="password" name="password" id="password" placeholder="请输入您的密码">
27 </div>
28 <div class="div-input">
29 <div>
30 <input type="checkbox" value=“1” class=“remeber” onclick="onClickHander(this)">
31 <label>记住密码</label>
32 </div>
33 </div>
34 <button type="button" class="login-button" onclick="login_()">登 录</button>
35 <div class="footer"> <a href="http://127.0.0.1:5000/regis">注册</a> | <a href="http://127.0.0.1:5000/reset">忘记密码</a></div>
36 </form>
37 </div>
38 </div>
39 </div>
40 </div>
41 </body>
42 </html>
43 <script>
44 var cb=0
45 function onClickHander(obj) {
46 if(obj.checked==true){
47 cb=1
48 // alert(cb)
49 }else{
50 cb=0
51 // alert(cb)
52 }
53 }
54 function login_(){
55 var userphone=document.getElementById("userphone").value
56 var password=document.getElementById("password").value
57 // alert(cb)
58 $.ajax({
59 url: "/web_login",
60 data: {
61 userphone:userphone,password:password,cb:cb
62 },
63 success: function (data) {
64 //正常验证失败弹窗
65 if (data.data == 0)
66 alert("账号或密码错误!")
67 //验证成功,返回response
68 if (data.data != 0)
69 window.open("http://127.0.0.1:5000/show","_self")
70 },
71 error: function (xhr, type, errorThrown) {
72 print("登录js,验证账号密码ajax请求失败!")
73 }
74 })
75 }
76 </script>
Python路由
1 #免密登录
2 @app.route('/web_login/',methods=['GET', 'POST'])
3 def web_login():
4 userphone = request.values.get('userphone')
5 password=request.values.get('password')
6 cb=request.values.get('cb')
7 print("是否记住密码: "+cb) #cb的返回值类型是 str 字符串
8 # print(type(cb))
9 print("登录账号:"+userphone+" "+"密码:"+password)
10 res=sql.web_login(userphone,password)
11 if(res==True):
12 session['userphone'] = userphone
13 if(cb=="1"):
14 print("开始存储cookie登录账号:" + userphone + " " + "密码:" + password)
15 resp = make_response('储存cookie')
16 resp.set_cookie('cookphone', userphone, max_age=3600 * 24 * 15)
17 resp.set_cookie('cookpass', password, max_age=3600 * 24 * 15)
18 print("登录成功且用户选择记住密码,返回response")
19 return resp #登录成功且用户选择记住密码,返回response
20 else:
21 print("登录成功 返回 1 状态码")
22 return jsonify({"data": 1}) # 登录成功 返回 1 状态码
23 else:
24 print("登录失败 返回 0 状态码")
25 return jsonify({"data":0}) #登录失败 返回 0 状态码
数据库验证登录
1 # 用户(web)登录验证
2 def web_login(userphone, password):
3 cursor = None
4 conn = None
5 res=[]
6 if(userphone==None or password==None):
7 return False
8 conn, cursor = get_conn()
9 sql = "select userphone,userpass from userdata where '"+userphone+"'=userphone and '"+password+"'=userpass "
10 res=query(sql)
11 conn.commit()
12 if(len(res)==0):
13 print("登陆失败(WEB)")
14 close_conn(conn, cursor)
15 return False
16 else:
17 close_conn(conn, cursor)
18 print("登陆成功(WEB)")
19 return True