---恢复内容开始---
一、需要知道的新知识点
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() # 读取数据并返回至HTML61 ????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 ????????????//用post124 ????????????$.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实现的登录
原文地址：https://www.cnblogs.com/mike-liu/p/9687154.html