Django：CRM - 基于ajax auth form的用户登录注册（包含验证码和校验）
准备工作
1、新建django项目
2、setting设置
3、static文件用于放置静态文件
登录(验证码)、注册功能具体代码
# urls.py
from django.contrib import admin from django.urls import path from app01 import views urlpatterns = [ path('admin/', admin.site.urls), path("login/",views.login), #登录 path("get_valid_img/",views.get_valid_img), #生成验证码 path("reg/",views.reg) #注册 ]
# views.py
# Create your views here. import random import re from io import BytesIO from PIL import Image, ImageDraw, ImageFont from django import forms from django.contrib import auth from django.core.exceptions import ValidationError from django.forms import widgets from django.http import JsonResponse from django.shortcuts import render, HttpResponse from app01.models import UserInfo ###################### 创建UserForm用户校验，输入的内容是否合法############## class UserForm(forms.Form): user = forms.CharField(min_length=5, label='用户名') pwd = forms.CharField(min_length=5, widget=widgets.PasswordInput(), label="密码") r_pwd = forms.CharField(min_length=5, widget=widgets.PasswordInput(), label="确认密码") email = forms.EmailField(min_length=5, label="邮箱") # 为每一个字段 input 添加类名 form-control def __init__(self, *args, **kwargs): super().__init__(*args, **kwargs) for filed in self.fields.values(): filed.widget.attrs.update({'class': 'form-control'}) def clean_user(self): val = self.cleaned_data.get('user') user = UserInfo.objects.filter(username=val).first() if user: raise ValidationError('用户名已存在！') else: return val def clean_pwd(self): val = (self.cleaned_data.get('pwd')) if val.isdigit(): raise ValidationError('密码不能为纯数字！') else: return val def clean_email(self): val = self.cleaned_data.get('email') if re.search("\w+@163.com$", val): return val else: raise ValidationError('邮箱必须是163格式邮箱！') def clean(self): # 全局校验 pwd = self.cleaned_data.get('pwd') r_pwd = self.cleaned_data.get('r_pwd') if pwd and r_pwd and pwd != r_pwd: # raise ValidationError("两次密码不一致！") # 也可以采用以下方法，这样在渲染的时候可以不用特殊处理，全局的错误会在r_pwd中，不再是__all__ self.add_error("r_pwd", ValidationError('两次密码不一致！')) else: return self.cleaned_data ####################### 登录 ###################### def login(request): if request.method == "GET": return render(request, "login.html") else: user = request.POST.get("user") pwd = request.POST.get("pwd") validcode = request.POST.get("validcode") res = {"user": None, "error_msg": ""} if validcode.upper() == request.session.get("keep_str").upper(): user_obj = auth.authenticate(username=user, password=pwd) if user_obj: res["user"] = user else: res["error_msg"] = "用户名或密码错误！" else: res["error_msg"] = "验证码错误" return JsonResponse(res)
####################### 生成验证码 ################################ def get_valid_img(request): def get_random_color(): return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)) # 生成图片 img = Image.new("RGB", (250, 35), get_random_color()) draw = ImageDraw.Draw(img) font = ImageFont.truetype("static/font/kumo.ttf", 32) keep_str = '' # 用于存储验证码，用户后台校验 # 为图片添加随机文本text for i in range(6): rand_num = str(random.randint(0, 9)) rand_lowalp = chr(random.randint(97, 122)) rand_upealp = chr(random.randint(65, 90)) random_char = random.choice([rand_num, rand_lowalp, rand_upealp]) draw.text((i * 30 + 50, 0), random_char, get_random_color(), font=font) keep_str += random_char # --------加噪点和噪线------ width = 250 height = 35 for i in range(3): x1 = random.randint(0, width) x2 = random.randint(0, width) y1 = random.randint(0, height) y2 = random.randint(0, height) draw.line((x1, y1, x2, y2), fill=get_random_color()) for i in range(2): draw.point([random.randint(0, width), random.randint(0, height)], fill=get_random_color()) x = random.randint(0, width) y = random.randint(0, height) draw.arc((x, y, x + 4, y + 4), 0, 90, fill=get_random_color()) # 将生成的图片进行读写 f = BytesIO() # 写，在内存中创建文件句柄 img.save(f, "png") # 将img保存在句柄中 data = f.getvalue() # 读取图片字节，返回给img响应 # 生成的随机字符串，加到sesstion中，传给用户，在用户登录时候进行校验，不能将随机字符串作为全局变量 request.session["keep_str"] = keep_str # 将图片字节 直接响应回图片 return HttpResponse(data)
########################## 注册 ########################## def reg(request): if request.method == "GET": userform = UserForm() return render(request, "reg.html", locals()) else: form = UserForm(request.POST) res = {"user": None, "err_msg": ""} if form.is_valid(): user = form.cleaned_data.get('user') pwd = form.cleaned_data.get('pwd') email = form.cleaned_data.get('email') UserInfo.objects.create_user(username=user, password=pwd, email=email) res['user'] = user else: res['err_msg'] = form.errors return JsonResponse(res)
# login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap-3.3.7/dist/css/bootstrap.css"> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> {#<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">#} <style> .container { padding-top: 100px; } </style> </head> <body> </div> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form> {% csrf_token %} <div class="form-group"> <lable for="">用户名</lable> <input type="text" class="form-control" id="user"> </div> <div class="form-group"> <lable for="">密码</lable> <input type="password" class="form-control" id="pwd"> </div> <div class="form-group"> <lable for="">验证码</lable> <div class="row"> <div class="col-md-6"> <input type="text" class="form-control" id="validcode"> </div> <div class="col-md-6"> <img src="/get_valid_img/" id="valid_img_btn" alt="验证码加载失败"> </div> </div> </div> <span id="error_msg"></span> <input type="button" class="pull-right login_btn" value="登录"> </form> </div> </div> </div> <script src="/static/js/jquery.3.3.1.js"></script> <script> $(function () { {# 验证码的刷新 #} $("#valid_img_btn").click(function () { this.src += "?" }); {#登录按钮，发送post请求#} $(".login_btn").click(function () { $.ajax({ url: "", type: "post", data: { user: $("#user").val(), pwd: $("#pwd").val(), validcode: $("#validcode").val(), csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val() }, success: function (response) { if (response.user) { location.href = "http://www.baidu.com" } else { $("#error_msg").html(response.error_msg).css("color", "red") } } }) }) }) </script> </body> </html>
# reg.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/bootstrap-3.3.7/dist/css/bootstrap.css"> <style> .container { padding-top: 100px; } </style> </head> <body> </div> <div class="container"> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form> {% csrf_token %} {% for field in userform %} <div class="form-group"> <lable for="">{{ field.label }}</lable> {{ field }}<span class="error"></span> </div> {% endfor %} <input type="button" class="pull-right login_btn" value="注册"> </form> </div> </div> </div> <script src="/static/js/jquery.3.3.1.js"></script> <script> $(function () { $('.login_btn').click(function () { $.ajax({ url: '', type: 'post', data: { user: $("#id_user").val(), pwd: $("#id_pwd").val(), r_pwd: $("#id_r_pwd").val(), email: $("#id_email").val(), csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val() }, success: function (response) { console.log(response);
{#response是一个对象,用点取值#} if (response.user) { location.href = '/login/' #ajax中网页跳转 } else {
{#清除span中的错误信息#} $('.error').html('');
{# 删除has-error类，去掉红框#} $('.from-froup').removeClass('has-error');
{# 为span赋予错误信息#} $.each(response.err_msg, function (i, item) { $("#id_" + i).next().html(item[0]).css('color', 'red').parent().addClass('has-error') }) } } }) }) }) </script> </body> </html>
# models.py
from django.db import models # Create your models here. from django.contrib.auth.models import AbstractUser class UserInfo(AbstractUser): tel = models.CharField(max_length=32)
知识点补充总结
1、用户认证组中 用户表需要扩展时
用户认证组件中验证的信息是存储信息是依赖于 auth_user 表中的，但是该表的中字段是有限的，比如注册的时候想输入手机号等，因此，想要扩展user表，我们就需要创建一个新的userinfo表来代替auth_user 表。
需要在 setting 中设置（项目为app01,models表为UserInfo）：
AUTH_USER_MODEL="app01.UserInfo"
models中创建的表需要继承 AbstractUser，其实 auth_user 也是继承了该类，因此，新创建的表就有了原来表中的字段还可以添加新字段
from django.db import models # Create your models here. from django.contrib.auth.models import AbstractUser class UserInfo(AbstractUser): #继承 tel = models.CharField(max_length=32)
数据库的迁移：
makemigrations
migrate
#在数据库auth_user或其替代表中，创建数据（通过终端）创建超级用户
createsuperuser
2、img标签中发送请求（有个特殊功能）
img标签有一个特殊的功能，去发送请求，可以实现图片的局部刷新，典型的是验证码图片的刷新，
加问号，等于多次访问该地址，而验证码中该地址每次访问都会获取不同的随机验证码图片，因此可以实现局部的刷新验证码
{# 验证码的刷新 #}
$("#valid_img_btn").click(function () {
this.src += "?"
});
3、验证码的校验
登录验证的时候，如何校验验证码？
后台中在生成验证码的方法 获取的随机字符串 为 keep_str , 但是在login方法中，接收的数据如何跟 其他方法中的 keep_str 进行比较？
有人说，将keep_str 存成全局变量 gloabl, 这样是可以满足比较，但是不同的用户要有不同的验证码，这样的话，只有最后用户刷新页面生成的验证码才是真的，有用户1在登录界面，还没有来得及输入，其他用户2也进入登录界面，那么验证码发生了变化，用户1 根据页面展示的验证码即便输入正确也会登录失败。
因此，我们要将各用户的验证码存到各自的 session 中:
# 设置session
request.session[keep_str":keep_str]
# 获取session request.session.get("keep_str")
session 或者 用户认证组件，都会在 django-session表中生成记录，
一个浏览器访问会有一条记录，两个浏览器访问会有2条记录，里面的记录个数与访问的浏览器的个数一致。
session 不仅可以用于登录，校验验证码，以后还会有很多的用处。
4、JsonResponse
视图函数中，引入JsonResponse，用次返回数据，不必再转换成就送数据，而前台接收到数据，也不需要反序列化，这些步骤在内部已经封装好了。
from django.http import JsonResponse
return JsonResponse({"user":user,"error":""})
5、字母与ASCII的对应
a ~ z 97 ~ 122
A ~ Z 65 ~ 90
6、Form组件中 errors中的 __all__
在全局的钩子中，其错误直接 raise ValidationError("用户密码不一致")，会存储在errors的__all__中
form = UserForm(request.POST) if form.is_valid(): form.cleaned_data else: form.errors #是个字典 form.errors.get("__all__") #全局钩子中的具体错误
但是全局钩子如果是以下，全局的错误会存储在r_pwd中：
浙公网安备 33010602011771号