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