python學習第8天---django框架---cookie與session
目錄
文章目錄
內容
1、cookie和session的聯繫與區別
簡單來說，我們常見的服務器與瀏覽器直接通向使用的http協議，爲無狀態協議。比如，用戶A與用戶B訪問同一網站，網站並不能區分2個用戶。那麼就需要一種技術，既會話技術。cookie和session這裏不再詳述，具體參考一下博文地址：
https://www.cnblogs.com/ITCodeMonkey/p/7874343.html
https://blog.csdn.net/liyifan687/article/details/80077928?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-1&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-1
2、應用cookie保存用戶名
接上一篇博文，我們想要書籍管理系統記住我們的用戶名，不用每次都要重複輸入用戶名，怎麼做呢？
2.1、視圖函數
-
login_cookie:登錄視圖函數
def login_cookie(request): """用戶登錄-cookie""" # print(request) # print(request.POST) # 1、判斷請求方法 if request.method == "GET": # 1.1、判斷cookie中是否保存用戶名 if 'username' in request.COOKIES: # 1.1.1、是，獲取用戶名值 user = request.COOKIES['username'] else: # 1.1.2、否，用戶名取值空 user = '' # 1.2、返回登錄頁面，攜帶用戶名 return render(request, 'login/login-cookie.html', {'username': user}) # 2、獲取表單數據 username = request.POST.get('username') password = request.POST.get('password') # 3、用戶名和密碼校驗 try: user = User.objects.get(username=username) except Exception: # 3.1、用戶名不匹配 return JsonResponse({ 'res': 0 }) else: if user.password != password: # 3.2、密碼不匹配 return JsonResponse({ 'res': 0 }) # 4、驗證通過，進入書籍管理首頁 # 5、獲取是否保存用戶名標誌 remember = request.POST.get('remember') # print(remember) resp = JsonResponse({ 'res': 1 }) # 6、判斷是否記住用戶名 if remember == 'true': # 6.1、是，設置cookie resp.set_cookie('username', username) return resp
2.2、路由
url(r'^login_cookie$', views.login_cookie),
2.3、前端頁面
-
login-cookie.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/public/js/jquery.min.js"></script> <style> .login { width: 300px; height: 250px; border: 1px solid black; margin: 100px auto; text-align: center; } #errorMsg { display: none; color: red; } </style> <script> $(function () { $('#btnLogin').click(function () { // 1、獲取用戶名和密碼 let username = $('#username').val(); let password = $('#password').val(); let remember = $('#remember').prop('checked'); // 2、發起ajax請求 $.ajax({ 'url': '/login_cookie', 'type': 'POST', 'data': {'username': username, 'password': password, 'remember': remember}, 'dataType': 'json', success: function (data) { // console.log(data) if (data.res === 0) { $('#errorMsg').show().html('用戶名或者密碼錯誤'); } else { location.href = '/book/index'; } }, error: function (data) { console.log(data) } }); }); }); </script> </head> <body> <div class="login"> <h3>書籍管理用戶登錄</h3> <hr> <!-- 用戶名value取值爲cookie中攜帶的值，沒有則爲空 --> 用戶名：<input type="text" id="username" name="username" placeholder="請輸入用戶名" value="{{ username }}"><br> 密 碼：<input type="password" id="password" name="password" placeholder="請輸入密碼"><br><br> <input type="checkbox" id="remember" checked>記住用戶名 <br><br> <input type="button" id="btnLogin" value="登錄"><br> <div id="errorMsg"></div> </div> </body> </html>
2.4、效果展示
- 圖示2.3-1：
![在這裏插入圖片描述]()
4、session保存登錄狀態
4.1、視圖函數
-
views.py
def login_session(request): """用戶登錄-session""" # print(request) # print(request.POST) # 1、判斷請求方法 if request.method == "GET": # 1.1、判斷cookie中是否保存用戶名 if 'username' in request.session: # 1.1.1、是，獲取用戶名值 user = request.session['username'] else: # 1.1.2、否，用戶名取值空 user = '' if 'password' in request.session: # 1.1.1、是，獲取用戶名值 pwd = request.session['password'] else: # 1.1.2、否，用戶名取值空 pwd = '' # 1.3、返回登錄頁面，攜帶用戶名 return render(request, 'login/login-session.html', {'username': user, 'password': pwd} ) # 2、獲取表單數據 username = request.POST.get('username') password = request.POST.get('password') # 3、用戶名和密碼校驗 try: user = User.objects.get(username=username) except Exception: # 3.1、用戶名不匹配 return JsonResponse({ 'res': 0 }) else: if user.password != password: # 3.2、密碼不匹配 return JsonResponse({ 'res': 0 }) # 4、驗證通過，進入書籍管理首頁 # 5、獲取是否保存用戶名標誌 remember = request.POST.get('remember') # print(remember) resp = JsonResponse({ 'res': 1 }) # 6、判斷是否記住我 if remember == 'true': # 6.1、是，設置session request.session['username'] = username request.session['password'] = password return resp
4.2、路由
-
urls.py
url(r'^login_session$', views.login_session),
4.3、前端頁面
-
login-session.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="/static/public/js/jquery.min.js"></script> <style> .login { width: 300px; height: 250px; border: 1px solid black; margin: 100px auto; text-align: center; } #errorMsg { display: none; color: red; } </style> <script> $(function () { $('#btnLogin').click(function () { // 1、獲取用戶名和密碼 let username = $('#username').val(); let password = $('#password').val(); let remember = $('#remember').prop('checked'); // 2、發起ajax請求 $.ajax({ 'url': '/login_session', 'type': 'POST', 'data': {'username': username, 'password': password, 'remember': remember}, 'dataType': 'json', success: function (data) { // console.log(data) if (data.res === 0) { $('#errorMsg').show().html('用戶名或者密碼錯誤'); } else { location.href = '/book/index'; } }, error: function (data) { console.log(data) } }); }); }); </script> </head> <body> <div class="login"> <h3>書籍管理用戶登錄</h3> <hr> <!-- 用戶名value取值爲cookie中攜帶的值，沒有則爲空 --> 用戶名：<input type="text" id="username" name="username" placeholder="請輸入用戶名" value="{{ username }}"><br> 密 碼：<input type="password" id="password" name="password" placeholder="請輸入密碼" value="{{ password }}"><br><br> <input type="checkbox" id="remember" checked>記住我 <br><br> <input type="button" id="btnLogin" value="登錄"><br> <div id="errorMsg"></div> </div> </body> </html>
4.4、效果展示
-
設置session之前4.4-1：
![在這裏插入圖片描述]()
-
設置session之後4.4-2：
![在這裏插入圖片描述]()
後記 ：
本項目爲參考某音python系列視頻。上面爲自己參考寫的學習筆記，持續更新。歡迎交流，本人QQ:806797785