小白学Django系列:
- 小白学Django第一天| MVC、MVT以及Django的那些事
- 小白学Django第二天| Django原来是这么玩的!
- 小白学Django第三天| 一文带你快速理解模型Model
- 小白学Django第四天| Django后台管理及配置MySQL数据库
- 小白学Django第五天| 视图View的初步使用
- 小白学Django第六天| 一文快速搞懂模板的使用
- Django实战小型图书人物信息网页(MVT的综合运用)
- 小白学Django第七天| 模型类Model进阶学习
- 持续更新中...
前言
hello,各位小伙伴。学习web知识是少不了登录小案例的,这次我将带着大家一起学习Django的登录案例,尽量把涉及的知识都讲到。这里的登录主要分为两种,一种是普通的表单登录,另一种是ajax登录。在登录案例中,我们也会设计到HTTPrequest,POST,GET等知识。
普通登录
其实学过web的朋友可能已经知道思路了,在前端写好form表单,然后从后端的HTTPrequest对象里拿到传过来的数据。
讲具体案例之前,大家先搞懂POST,GET请求有啥区别(这里我们只说最大的区别):
POST所传的信息是保存在请求头当中(适合安全性较高的数据)
GET则是显示在url当中的, 简单举个例子:www.xxxxx.com/login?user=xxxx&&password=xxxxx
理解完这个就好办,因为我们这里只讲post方法,get方法大家可以自己动手去试试。
那我们的代码就正式开始了。
1.新建login.html并写好表单
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>登录界面</title> </head> <body> <form method="post" action="/login_submit/"> 账号:<input type="text" name="username"></br> 密码:<input type="password" name="password"></br> <input type="submit" value="登录"> </form> </body> </html>
大家需要注意的是底下这一行代码
<form method="post" action="/login_submit/">
首先method参数是选用何种方式传送数据,这里显然是post方法。action所对应的就是检查表单中的数据是否正确的视图函数, 例如这里我们就是检查账号密码是否正确。
这里我还得说下为什么需要两个斜线,前面那根斜线是必须得,只是后面这根...如果你不输,那你会报一下错误:
RuntimeError: You called this URL via POST, but the URL doesn’t end in a slash and you have APPEND_SLASH set.
解决的办法有两个: 第一种就是像我上面那样在最后一个字母后加上一根斜线,第二种方法需要在setting文件当中设置APPEND_SLASH=False。
2.在views中编写相应的视图函数
首先我们需要创建login.html所对应的视图函数login
def login(request): return render(request, "Book/login.html")
因为这里我们只需要显示login.html,这个界面所以直接返回这个界面就行了。
然后我们来创建检测账号密码是否正确的视图函数login_submit
def login_submit(request): # 使用request.POST.get来获取相关的参数 username = request.POST.get("username") password = request.POST.get("password") # 模拟判断账号密码是否正确 if"kuls" == username and"123" == password: # 如果账号密码正确,重定向至首页 return redirect("/index") else: # 如果错误重定向到登录页面 return redirect("/login")
大家可能注意到获取post过来的参数,使用的是如下语句
# 使用request.POST.get来获取相关的参数 username = request.POST.get("username") password = request.POST.get("password")
这里需要说一下,HttpRequest对象的属性GET、POST都是QueryDict类型的对象,与python字典不同,QueryDict类型的对象用来处理同一个键带有多个值的情况,如果一个键同时拥有多个值将获取最后一个值,如果键不存在则返回None值,可以设置默认值进行后续处理。
如果想要获取同一个键的所有值,可以通过方法getlist()获取。
HTTPrequest对象的属性
下面给大家补充一下相关的属性,大家可以依次去尝试。
- path:一个字符串,表示请求的页面的完整路径,不包含域名和参数部分。
- method:一个字符串,表示请求使用的HTTP方法,常用值包括:'GET'、'POST'。在浏览器中给出地址发出请求采用get方式,如超链接。在浏览器中点击表单的提交按钮发起请求,如果表单的method设置为post则为post请求。
- encoding:一个字符串,表示提交的数据的编码方式。如果为None则表示使用浏览器的默认设置,一般为utf-8。这个属性是可写的,可以通过修改它来修改访问表单数据使用的编码,接下来对属性的任何访问将使用新的encoding值。
- GET:QueryDict类型对象,类似于字典,包含get请求方式的所有参数。
- POST:QueryDict类型对象,类似于字典,包含post请求方式的所有参数。
- FILES:一个类似于字典的对象,包含所有的上传文件。
- COOKIES:一个标准的Python字典,包含所有的cookie,键和值都为字符串。
- session:一个既可读又可写的类似于字典的对象,表示当前的会话,只有当Django 启用会话的支持时才可用,详细内容见"状态保持"。
ajax登录
这里我先来简单介绍一下ajax是什么?
Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。(来自百度百科)
在我们上面的表单登录时,会发现每次提交账号密码,都会重新刷新一遍页面(如果账号密码错误),其实我们可以通过ajax来避免这种事情。
在Django中ajax的运行原理跟上图差不多,从浏览器发送ajax请求至服务器,服务器进行处理并且返回一个JsonResponse对象,然后返回json数据,执行回调函数。
在浏览器中使用javascript发起ajax请求时,返回json格式的数据。类JsonResponse继承自HttpResponse对象,被定义在django.http模块中,创建对象时接收字典作为参数。
接下来我们就正式讲解ajax的登录:
1.导入jQuery的文件,并写好html界面及ajax代码
jQuery文件我推荐个网站,大家自行下载:
http://www.jq22.com/jquery-info122
随后导入到static中的js文件中
(需要在setting配置static文件)
login_ajax.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax登录</title> <script src="/static/js/jquery-3.4.1.min.js"></script> <script> $(function () { $('#ajaxbtn').click(function () { username = $('#username').val(); password = $('#password').val(); $.ajax({ url:'/login_ajax_handle/', type:'post', data:{'username':username, 'password':password}, dataType:'json', //回调函数 success:function (data) { //如果返回是1,则表示登录成功,跳转至首页 //如果返回是0,则表示登录失败 if (data.res == 0){ $('#errmsg').show().html('账号或密码错误') }else{ location.href = '/index' }}})})}) </script> <style> #errmsg{ display: none; color: red; } </style> </head> <body> <div> 账号:<input type="text" id="username"></br> 密码:<input type="password" id="password"></br> <input type="button" id="ajaxbtn" value="ajax登录"> <div id="errmsg"></div> </div> </body> </html>
上述html代码中id为errmsg的div是用来提示我们账号密码错误的。
2.编写视图函数
视图函数login_ajax_handler:
def login_ajax_handle(request): # 使用request.POST.get来获取相关的参数 username = request.POST.get("username") password = request.POST.get("password") # 模拟判断账号密码是否正确 if"kuls" == username and"123" == password: return JsonResponse({"res": 1}) else: return JsonResponse({"res": 0})
3.结果
密码错误提示
密码正确,跳转至index
Django系列文章: