Python-day9
學習要有定位,明確目標地去學習。堅持下去,就會有所收穫---leaves。(ps:現在思路已經稍微清晰點了,加油，時間不等人！！)
python08 -- 登錄模塊,Session以及初識jQuery
一、登錄模塊
1.1 登錄模塊MVC思路講解
I:前端html
a.登錄頁面首次默認GET方式,返回一個待填寫的表單；
b.輸入用戶名密碼後,點擊表單按鈕以POST方式向邏輯端發起請求,並把表單數據傳遞給邏輯端
II:邏輯端
a.邏輯端判斷前端發起的是POST表單提交還是GET方式。如果爲GET請求,說明爲第一次發起，返回對應的html即可；如果爲POST請求，說明是爲了提交表單數據,通過request.form獲取表單數據。
b.邏輯端查詢數據庫數據，判斷前端傳來的數據是否在數據庫中存在，如果存在，表示登錄成功，生成session，將用戶需要的信息存入session即可，如果不存在，則跳轉到登錄頁面重新輸入用戶名密碼
III:數據端
a.對數據進行增刪改查，並返回結果。
1.2 登錄的代碼
login_user = dict( (k,v[0]) for k ,v in dict(request.form).items())
##一步高階代碼將用戶名密碼轉換爲字典
1.2.1 flask代碼
@app.route('/login',methods = ["GET","POST"])
def login():
if request.method == "GET":
return render_template("login.html")
if request.method == "POST":
login_user = dict( (k,v[0]) for k ,v in dict(request.form).items())
tmp = ["name",'password']
all_sql = "select %s from users " %','.join(tmp)
cur.execute(all_sql)
res = cur.fetchall()
all_user = [ dict((v,row[k]) for k ,v in enumerate(tmp)) for row in res]
#all_user==>[{'password': u'aa', 'name': u'KK'}, {'password': u'123456', 'name': u'TT'}, {'password': u'XX123as', 'name': u'XX'}, {'password': u'123as', 'name': u'Xman'}, {'password': u'123VV', 'name': u'AA'}]
userName = [ x['name'] for x in all_user]
if not login_user['name'] or not login_user['password']:
errmsg = "Name or Password not Null"
return render_template("login.html",result = errmsg)
if login_user['name'] not in userName:
39,2-16 15%
errmsg = "Name is not exit"
return render_template("login.html",result = errmsg)
else :
password = [ x['password'] for x in all_user if x['name'] == login_user['name']][0]
if login_user['password'] != password:
errmsg = "Password is not exist "
return render_template("login.html",result = errmsg)
#return render_template("login.html",result = 'login Success')
else:
session['name'] = login_user['name']
return redirect('/user/userlist')1.2.2 前端html代碼
[root@xiaowei blog]# cat templates/login.html
<html>
<head>
<meta charset='utf-8'>
<title>login</title>
</head>
<body>
<table>
<form action='/login' method="POST">
<tr><td>Name<input id ="name" type='text' name='name'> </td></tr>
<tr><td>Password<input id ="password" type='password' name='password'> </td></tr>
<tr><td><input id ="loginbtn" type='submit' value='login'></td></tr>
</form>
{% if result %}
<div style = "color:red">
{{ result }}
</div><!--定義div標籤使報錯信息爲紅色-->
{% endif %}<!--判斷是否存在報錯信息-->
</table>1.2.3 登錄功能演示
情況一：用戶名密碼都爲空
情況二：用戶名不存在
情況三：密碼不正確
情況四：用戶名密碼正確，跳轉用戶列表界面
1.3 登錄注意事項
判斷用戶名密碼時優先使用get(方法)。
if not login_user['name'] or not login_user['password']: ===>更改爲login_user.get('name',None)以防name字段不存在產生的報錯終止程序運行
二、Session講解
2.1 session定義
session就是一個全局的字典，在整個flask頁面中都能調用，一般在登錄成功後生成session。session[key] = value。舉例說明:整個flask頁面就相當於一家大公司有很多棟樓，每個樓層都有門衛，Session就是第一個門衛給你發的一個通行證，帶着這個通行證就能各個樓層轉了。
2.2 爲什麼需要session
session的主要作用是狀態保持,http請求是無狀態的。(從第一個門進去之後，每個門衛都是不可能都認識你，所以每次都要詢問你下)
2.3 Session的工作流程
1.登錄成功生成session，用戶帶着session(通行證)去各個頁面
2.各個頁面都有個門衛，專門檢查session(通行證)，有則放行。
3.出門的時候就會收回通行證
2.4 session的主要功能
1.創建session
2.刪除session
3.驗證
3.1 驗證用戶是否登錄，如果沒有登錄則跳轉回登錄頁面
3.2 驗證權限、驗證角色。不同的角色操作不同的方法。
2.5 session實現思路
1.用戶登錄後在全局大字典session裏面加一個值
eg:session['name'] = 'wd',這個全局大字典在邏輯端任何地方都可以調用
2.每個增刪改查操作前，都判斷下session裏面有沒有name這個字段值，如果有就表示已經登錄；沒有就表示未登錄，跳轉到登錄頁面。
2.6 session操作實例
1.導入session
from flask import session
app.secret_key = "asdasd!@#" #給加密字符串賦值
2.session賦值
session就是一個全局的字典,在整個flask頁面中都能調用，一般在登錄成功之後生成session.session[key] = value
本片中登錄模塊Session賦值爲session['name'] = login_user['name']
3.session 驗證
登錄成功後，其他所有的操作都必須基於session認證後實現。即session存在，允許操作；否則，跳轉回登錄界面。
本例中session驗證爲在其他監聽路由下添加以下代碼：
if not session.get('name',None):
return redirect('/login')
4.session註銷
session註銷有兩種方式
1.根據時間，生成session是帶上時間參數，對比時間過期，session自動註銷。(目前瞭解，暫無實現思路)
2.手動註銷Session
新建loginout路由，手動註銷session
@app.route('/loginout')
def loginout():
session.pop('name')
return redirect('/login')2.7 session的效果圖
1.session不存在的話，任何增刪改查操作都會跳轉回登錄頁面
2.session存在的情況下，可以進行任意跳轉，進入任何路由
三、初識jQuery
3.1 jQuery定義
jQuery是一個"寫的更少,但是做的更多"的輕量級JavaScript庫。包含內容爲：
HTML元素選取
HTML元素操作
CSS操作
HTML事件函數
JavaScript特效和動畫
HTML DOM遍歷和修改
AJAX
3.2 jQuery準備工作
1.在項目目錄中創建static/js目錄 ==>mkdir -p static/js
2.下載jQuery插件 ==> wget https://code.jquery.com/jquery-3.1.0.min.js
3. 檢查目錄結構爲：
[root@xiaowei ketang]# tree static/
static/
└── js
└── jquery-3.1.0.min.js
3.3 jQuery三步走
jQuery格式： $selector().action()
1. $ 美元符，表示jQuery
2. selector 選擇器(選定HTML元素)，這個是重點。很多種選擇方式，id等
3. action()選定後對這個元素的操作
jQuery的基本三步走策略：
I：選擇器--找到需要操作的元素
II:操作 -- DOM元素進行增刪改查
2.1 操作HTML文檔內容--常用元素table、form、 div
2.2 操作HTML元素屬性 ---常見屬性
2.3 操作HTML元素式樣 ---CSS(其實也屬於屬性)
III:事件---什麼情況下觸發jQuery的操作，ajax等
3.4 第一個jQuery程序
在login.html中添加以下內容
<script src = "/static/js/jquery-3.1.0.min.js"></script> #定義js文件內容
<script>
alert('di yi ge jQuery')
</script> 執行效果截圖：
3.5 jQuery實現對HTML元素的操作
jQuery實現對HTML元素進行取值，在login.html文件中將form及其內部標籤添加id元素。具體html代碼如下
jQuery選擇器之ID：是html元素的唯一標識,同一個頁面中不能出現重名的idName
<html>
<head>
<meta charset='utf-8'>
<title>login</title>
</head>
<body>
<table>
<!--<form action='/login' method="POST">-->
<form id="loginForm">
<tr><td>Name<input id ="name" type='text' name='name'> </td></tr>
<tr><td>Password<input id ="password" type='password' name='password'> </td></tr>
<tr><td><input id ="loginbtn" type='submit' value='login'></td></tr>
</form>
{% if result %}
<div style = "color:red">
{{ result }}
</div>
{% endif %}
<script src = "/static/js/jquery-3.1.0.min.js"></script>
<script>
alert('di yi ge jQuery')
</script>
</table>驗證：運行程序，在login.html界面中輸入用戶名密碼，在console中輸入以下命令看能否獲取值。ps:form標籤的id值爲 loginForm,input標籤中用戶名密碼的id分別爲name和password。也可以通過id值對html元素值進行修改。$('#loginForm').serialize()執行結果爲"name=nihao&password=asdfa" 可以用來拼接html的url.
jQuery中對數據的操作
1.val() 操作表單數據
2.html() 操作元素
3.attr() 操作屬性
$('#loginForm').serialize()
"name=aaaa&password=dddd"
$('#loginForm').serialize()
"name=aaaa&password=dddd"
$('#name').val()
"aaaa"
$('#password').val()
"dddd" 通過id修改元素值
3.6 jQuery實現登錄模塊
jQuery實現登錄需要注意的知識點：
1.flask邏輯端return 返回字典類型數據：eg : return json.dumps({'code':0,'result': "login success "}) ,對應的需要import json模塊。
2.html中script標籤內的回調函數。要jQuery代碼邏輯。
3.6.1 jQuery實現登錄的前後端代碼：
##flask邏輯端代碼(僅登錄模塊)
##注意在開始要import json
@app.route('/login',methods = ["GET","POST"])
def login():
if request.method == "GET":
return render_template("login.html")
if request.method == "POST":
data = dict( (k,v[0]) for k ,v in dict(request.form).items())
tmp = ["name",'password']
all_sql = "select %s from users " %','.join(tmp)
cur.execute(all_sql)
res = cur.fetchall()
all_user = [ dict((v,row[k]) for k ,v in enumerate(tmp)) for row in res]
#all_user==>[{'password': u'aa', 'name': u'KK'}, {'password': u'123456', 'name': u'TT'}, {'password': u'XX123as', 'name': u'XX'}, {'password': u'123as', 'name': u'Xman'}, {'password': u'123VV', 'name': u'AA'}]
userName = [ x['name'] for x in all_user]
if not data.get('name',None) or not data.get('password',None):
errmsg = "Name or Password not Null"
#return render_template("login.html",result = errmsg)
return json.dumps({'code':1,'result': errmsg})
if data.get('name',None) not in userName:
errmsg = "Name is not exit"
#return render_template("login.html",result = errmsg)
return json.dumps({'code':1,'result': errmsg})
else :
password = [ x['password'] for x in all_user if x['name'] == data['name']][0]
if data.get('password',None) != password:
errmsg = "Password is not exist "
#return render_template("login.html",result = errmsg)
return json.dumps({'code':1,'result': errmsg})
#return render_template("login.html",result = 'login Success')
else:
session['name'] = data['name']
#return redirect('/user/userlist')
return json.dumps({'code':0,'result': "login success "})
##login.html前端HTML中代碼
<html>
<head>
<meta charset='utf-8'>
<title>login</title>
</head>
<body>
<table>
<!--<form action='/login' method="POST">-->
<form id="loginForm">
<tr><td>Name<input id ="name" type='text' name='name'> </td></tr>
<tr><td>Password<input id ="password" type='password' name='password'> </td></tr>
<tr><td><input id ="loginbtn" type='submit' value='login'></td></tr>
</form>
{% if result %}
<div style = "color:red">
{{ result }}
</div>
{% endif %}
<script src = "/static/js/jquery-3.1.0.min.js"></script>
<script>
//alert('di yi ge jQuery') <!--Test jQuery-->
$('#loginbtn').on('click',function(){
var str = $('#loginForm').serialize()
console.log(str)
$.post('/login',str,function(data){ //回調函數,注意function(data)中data參數不能丟
console.log(data)
data = JSON.parse(data)
console.log(data)
if (data['code'] == 0){
alert(data['result'])
location.href='/user/userlist'
}else{
$('errmsg').html(data['errmsg'])
}
})
return false
})
</script>
</body>
</table>3.6.2 jQuery登錄效果截圖
1.錯誤信息截圖
2.正常登錄效果圖(點擊確認後跳轉到userlist界面)
3.6.2 jQuery實現登錄重點
回調函數：function(data爲回調函數)(ps:flask 端代碼無需更改，只是將html中事件響應更改爲jQuery。)
##login.html
<script>
//alert('di yi ge jQuery') <!--Test jQuery-->
$('#loginbtn').on('click',function(){
var str = $('#loginForm').serialize()
console.log(str) ##實現記錄$('#loginForm').serialize()的值
$.post('/login',str,function(data){
console.log(data)
data = JSON.parse(data)
console.log(data)
if (data['code'] == 0){
alert(data['result']) #事件觸發以及展示信息
location.href='/user/userlist' ##事件完成後跳轉到用戶列表
}else{
// $('errmsg').html(data['errmsg']) #console窗口打印$('#loginForm').serialize()內容
//以下更改使得報錯信息也在jQuery彈框中顯示。
alert(data['result'])
location.href='/login'
}
})
return false
})
</script>
四、其他注意事項及知識點：
1.對數據庫的操作，try except 方便排錯
2.flask代碼組織結構有兩種方式 包 + 藍圖
3.session後期可以通過使用裝飾器來包裝