Django框架开发-基于Ajax实现的登录
Posted 芳姐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Django框架开发-基于Ajax实现的登录相关的知识，希望对你有一定的参考价值。
---恢复内容开始---
一、需要知道的新知识点
1、刷新验证码，给src属性加一个？号。加个？会重新去请求
# 给验证码刷新
$(".vialdCode_img").click(function () {
方式一：dom方法
$(this)[0].src+="?"#}
方式二：jQuery的attr方法
$(this).attr("src",$(this).attr("src")+‘?‘)
})
})
2、当登录成功跳转，或者注册成功跳转
$(".register").click(function () {
loction.href = ‘/register/‘
});
3、超时后消失
setTimeout(foo, 3000)
function foo() {
$(".error").html("")
}
4、auth模块的使用
模块的导入：
from django.contrib import auth
几个使用方法：
1 、authenticate() ：验证用户输入的用户名和密码是否相同
提供了用户认证，即验证用户名以及密码是否正确,一般需要username password两个关键字参数
user = auth.authenticate(username=username, password=password)
2 、login(HttpRequest, user)：登录
该函数接受一个HttpRequest对象，以及一个认证了的User对象
此函数使用django的session框架给某个已认证的用户附加上session id等信息。
def login(request):
if request.method == "POST":
username = request.POST.get("username")
password = request.POST.get("password")
print(username, password)
user = auth.authenticate(username=username, password=password) # 验证用户名和密码
if user is not None and user.is_active:
# 如果认证成功，就让登录
auth.login(request, user)
request.session[‘user‘] = username # 将session信息记录到浏览器
response = HttpResponseRedirect("/books/")
return response
elif user is None:
return render(request, "index.html", {"s1": "用户名不存在!"})
else:
s = "用户名或密码错误"
return render(request, "index.html", {"s": s})
return render(request, "index.html")
3 、logout(request) 注销用户
该函数接受一个HttpRequest对象，无返回值。当调用该函数时，当前请求的session信息会全部清除。该用户即使没有登录，使用该函数也不会报错。
def logout(request):
auth.logout(request)
return redirect("/index")
4 、user对象的 is_authenticated()
要求：
1、用户登录后才能访问某些页面
2、如果用户没有登录就访问该页面的话直接跳转登录页面
3、用户在跳转的登录界面中完成登录后，自动访问跳转到之前访问的地址
def my_view(request):
if not request.user.is_authenticated():
return redirect(‘%s?next=%s‘ % (settings.LOGIN_URL, request.path))
在后台用request.user.is_authenticated()判断用户是否已经登录，如果true则可以向前台展示request.user.name
User对象的几个方法
1、创建用户：create_user
User.objects.create_user(username=username, password=password)
2、check_password(passwd):密码检查
用户需要修改密码的时候，首先要让他输入原来的密码，如果给定的字符串通过了密码检查，返回 True
3 、修改密码： set_password()
二、具体实现的登录
urls.py
urlpatterns = [
path(‘admin/‘, admin.site.urls),
url(r‘^reg/$‘, views.reg),
url(r‘^login/$‘, views.login),
url(r‘^index/$‘, views.index),
url(r‘^get_vaildCode_img/$‘, views.get_vaildCode_img),
url(r‘^log_out/$‘, views.log_out)
]
views.py
1 def get_vaildCode_img(request): 2 # 方式一：这样的方式把路径写死了，只能是那一张图片 3 # path = os.path.join(settings.BASE_DIR, "static", "image", "3.jpg") 4 # with open(path, "rb") as f: 5 # data = f.read() 6 # return HttpResponse(data) 7 8 # 方式二： 每次都显示不同的图片，利用pillow模块，安装一个pillow模块 9 # img = Image.new(mode="RGB", size=(120, 40), color="green") # 首先自己创建一个图片，参数szie(120, 40)代表长和高 10 # f = open("validcode.png", "wb") # 然后把图片放在一个指定的位置 11 # img.save(f, "png") # 保存图片 12 # f.close() 13 # with open("validcode.png", "rb") as f: 14 # data = f.read() 15 # return HttpResponse(data) 16 17 # 方式三： 18 # 方式二也不怎么好，因为每次都要创建一个保存图片的文件，我们可以不让图片保存到硬盘上， 19 # 在内存中保存，完了自动清除，那么就引入了方式三：利用BytesIO模块 20 # img = Image.new(mode="RGB", size=(120, 40), color="blue") 21 # f = BytesIO() # 内存文件句柄 22 # img.save(f, "png") 23 # data = f.getvalue() # 打开文件（相当于Python中的f.read()) 24 # return HttpResponse(data) 25 26 # 方式四：1、添加画笔，也就是在图片上写上一些文字 27 # 2、并且字体随机，背景颜色随机 28 # 随机创建图片 29 img = Image.new(mode="RGB", size=(150, 40), color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))) 30 draw = ImageDraw.Draw(img, "RGB") 31 # 画干扰线 32 for i in range(5): 33 x1 = random.randint(0, 120) 34 y1 = random.randint(0, 40) 35 x2 = random.randint(0, 120) 36 y2 = random.randint(0, 40) 37 38 draw.line((x1, y1, x2, y2), fill = (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))) 39 40 font = ImageFont.truetype("KumoFont.ttf", 20) # 20 表示20像素 41 42 str_list = [] # 把每次生成的验证码保存起来 43 44 # 随机生成五个字符 45 for i in range(5): 46 random_num = str(random.randint(0, 9)) # 随机数字 47 random_lower = chr(random.randint(65, 90)) # 随机小写字母 48 random_upper = chr(random.randint(97, 122)) # 随机大写字母 49 random_char = random.choice([random_num, random_lower, random_upper]) 50 51 print(random_char, "random_char") 52 str_list.append(random_char) 53 # (5+i*24, 10) 表示坐标，字体的位置 54 draw.text((5+i*24, 10), random_char,(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)), 55 font=font) 56 57 print(str_list, "str_list") 58 f = BytesIO() # 内存文件句柄 59 img.save(f, "png") # img是一个对象 60 data = f.getvalue() # 读取数据并返回至HTML 61 vaild_str = "".join(str_list) 62 print(vaild_str, "vaild_str") 63 request.session["keep_valid_code"] = vaild_str # 把保存到列表的东西存放至session中 64 return HttpResponse(data)
login.html
1 <!--<!DOCTYPE html>--> 2 <!--<html lang="en">--> 3 <!--<head>--> 4 <!--<meta charset="UTF-8">--> 5 <!--<title>Title</title>--> 6 <!--</head>--> 7 <!--<body>--> 8 <!--<a href="/get_ok/">点击</a><span class="error"></span>--> 9 <!--<hr>--> 10 <!--<p>姓名<input type="text" id="user"></p>--> 11 <!--<p>密码<input type="password" id="pwd"> </p>--> 12 <!--<p><button class="login_btn">login_btn</button><span class="login_error"></span> </p>--> 13 14 <!--<script src="../static/jquery-3.3.1.js"></script>--> 15 16 <!--// 登录验证--> 17 <!--<script>--> 18 <!--$(".login_btn").click(function () {--> 19 20 <!--$.ajax({--> 21 <!--url:"/login/",--> 22 <!--type:"post",--> 23 <!--data:{--> 24 <!--"user":$("#user").val(),--> 25 <!--"pwd":$("#pwd").val(),--> 26 <!--},--> 27 <!--success:function (data) {--> 28 <!--console.log(data); // json字符串--> 29 <!--console.log(typeof data);--> 30 31 <!--var data=JSON.parse(data); // 反序列化 object{}--> 32 <!--console.log(data); // object--> 33 <!--console.log(typeof data);--> 34 35 <!--if (data.user){--> 36 <!--// location.href="www.baidu.com"--> 37 <!--}--> 38 <!--else {--> 39 <!--$(".login_error").html(data.msg).css({"color":"red","margin-left":"10px"})--> 40 <!--}--> 41 42 <!--}--> 43 <!--})--> 44 45 <!--})--> 46 47 <!--</script>--> 48 49 <!--</body>--> 50 <!--</html>--> 51 52 <!DOCTYPE html> 53 <html lang="en"> 54 <head> 55 <meta charset="UTF-8"> 56 <meta name="viewport" content="width=device-width"> 57 <title>Title</title> 58 <link rel="stylesheet" href="../static/bootstrap-3.3.7/css/bootstrap.min.css"> 59 <link rel="stylesheet" href="../static/css/login.css"> 60 </head> 61 <body> 62 <div class="container"> 63 <div class="row"> 64 <div class="col-md-1=10"> 65 <form class="form-horizontal" id="form_data" action="/login/" method="post"> 66 {% csrf_token %} 67 <div class="form-group"> 68 <label for="username" class="col-sm-2 control-label">用户名</label> 69 <div class="col-sm-5"> 70 <input type="text" class="form-control" id="username" placeholder="用户名" name="username"> 71 </div> 72 </div> 73 <div class="form-group"> 74 <label for="password" class="col-sm-2 control-label">密码</label> 75 <div class="col-sm-5"> 76 <input type="password" class="form-control" id="password" placeholder="密码" name="password"> 77 </div> 78 </div> 79 <div class="form-group"> 80 <div class="row"> 81 <div class="col-md-6 col-md-offset-1"> 82 {# 文字部分#} 83 <label for="vialdCode" class="col-md-2 control-label">验证码</label> 84 <div class="col-sm-5"> 85 <input type="text" class="form-control vialCode_text" id="vialdCode" placeholder="验证码" name="vi 86 "> 87 </div> 88 {# 图片部分 #} 89 <div class="col-md-5"> 90 <img class="vialdCode_img" src="/get_vaildCode_img/" alt="" width="200px" height="100px"> 91 92 </div> 93 </div> 94 </div> 95 </div> 96 <div class="form-group"> 97 <div class="col-sm-offset-2 col-sm-10"> 98 <p> 99 <button type="button" class="btn btn-success login">登录</button> 100 <span class="error has-error"></span> 101 </p> 102 <p> 103 <button type="button" class="btn btn-primary register">注册</button> 104 </p> 105 </div> 106 </div> 107 </form> 108 </div> 109 </div> 110 </div> 111 <script src="../static/jquery-3.3.1.js"></script> 112 <script src="../static/bootstrap-3.3.7/js/bootstrap.min.js"></script> 113 <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script> 114 115 <script> 116 $(function () { 117 // 给登录按钮添加事件 118 $(".login").click(function () { 119 function foo() { 120 $(".error").html("") 121 122 } 123 //用post 124 $.post({ 125 url:‘/login/‘, 126 headers: {"X-CSRFToken": $.cookie(‘csrftoken‘)}, 127 data: $("#form_data").serialize(), 128 success:function (data) { 129 var data = JSON.parse(data); 130 console.log(typeof data); 131 if (data[‘flag‘]){ 132 window.href= ‘/index/‘ 133 } 134 else { 135 $(".error").html(data["error_img"]); 136 setTimeout(foo, 3000) 137 } 138 139 } 140 }) 141 142 143 }); 144 145 // 给注册按钮添加事件 146 $(".register").click(function () { 147 window.location.href = ‘/register/‘ 148 149 }); 150 151 // 给验证码刷新 152 $(".vialdCode_img").click(function () { 153 $(this).attr("src", $(this).attr("src")+‘?‘) 154 155 }) 156 157 }) 158 </script> 159 </body> 160 </html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>hello{{ request.user.username }}</h1>
<button><a href="/log_out">注销</a> </button>
</body>
</html>
login.css
.container {
margin-top: 100px;
margin-left: 330px;
}
.error{
color: red;
}
.btn {
width: 200px;
}
.vialdCode_img {
width: 200px;
height: 40px;
}
以上是关于Django框架开发-基于Ajax实现的登录的主要内容，如果未能解决你的问题，请参考以下文章
Django - 基于forms组件和Ajax实现注册登录 - FileField字段 - Media配置
Python入门自学进阶-Web框架——8认识Ajax，与Django交互，基于jQuery