u胎代码实现 :
针对每一个 app 写个 js 脚本,
先给 users 的 app 应用创建个 js:在指定目录下的 js 文件夹下,创建 users 文件夹,下创建 suth.js ,图片验证
// 预加载,html 加载完后再加载 , $(function () { let $img = $(".form-item.captcha-graph-img img"); //获取图像标签元素 let sImageCodeId = "" // uuid (小写 s 开关,代表字符串 ) // 生成 uuid 验证码 function generateImageCode() { // 1、生成一个图片验证码随机编号 sImageCodeId = generateUUID(); // 2、拼接请求url /image_codes/<uuid:image_code_id>/ let imageCodeUrl = "/image_codes/" + sImageCodeId + "/"; // 3、修改验证码图片src地址 $img.attr('src', imageCodeUrl) } // 生成图片UUID验证码 function generateUUID() { let d = new Date().getTime(); if (window.performance && typeof window.performance.now === "function") { d += performance.now(); //use high-precision timer if available } let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { let r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); return uuid; } });
注意路径要一样,
url 文件
js 文件
在注册的 html 文件中导入 js 文件
注册的 html 文件,register.html
{% extends 'base/base.html' %} {% load static %} {% block link %} {# <link rel="stylesheet" href="../../css/authPro/auth.css">#} <link rel="stylesheet" href="{% static 'css/authPro/auth.css' %}"> {% endblock %} {% block title %} 注册 {% endblock %} {% block main_start %} <main id="container"> <div class="register-contain"> <div class="top-contain"> <h4 class="please-register">请注册</h4> <a href="javascript:void(0);" class="login">立即登录 ></a> </div> <form action="" method="post" class="form-contain"> <div class="form-item"> <input type="text" placeholder="请输入用户名" name="username" class="form-control" autocomplete="off"> </div> <div class="form-item"> <input type="password" placeholder="请输入密码" name="password" class="form-control"> </div> <div class="form-item"> <input type="password" placeholder="请输入确认密码" name="password_repeat" class="form-control"> </div> <div class="form-item"> <input type="tel" placeholder="请输入手机号" name="telephone" class="form-control" autocomplete="off" autofocus> </div> <div class="form-item"> <input type="text" placeholder="请输入图形验证码" name="captcha_graph" class="form-captcha"> <a href="javascript:void(0);" class="captcha-graph-img"> <img src="" alt="验证码" title="点击刷新"> </a> </div> <div class="form-item"> <input type="text" placeholder="请输入短信验证码" name="sms_captcha" class="form-captcha" autocomplete="off"> <a href="javascript:void(0);" class="sms-captcha" title="发送验证码">获取短信验证码</a> </div> <div class="form-item"> <input type="submit" value="立即注册" class="register-btn"> </div> </form> </div> </main> {% endblock %} {% block script %} <script src="{% static 'js/users/auth.js' %}"></script> {% endblock %}
因为在视图中导入了日志模块,所以在控制台中打印了验证码
判断用户是否注册功能实现
1.分析
请求方法:GET
url定义:/usernames/(?P<username>\w{5,20})/
请求参数:url路径参数
参数 | 类型 | 前端是否必须传 | 描述 |
---|---|---|---|
usernames | 字符串 | 是 | 输入的用户名 |
2.后端视图实现
from utils.json_fun import to_json_data
from django.views import View
class CheckUsernameView(View): """ Check whether the user exists GET usernames/(?P<username>\w{5,20})/ """ def get(self, request, username): # count = 1 if User.objects.get(username=username) else 0 data = { 'username': username, 'count': Users.objects.filter(username=username).count() } return to_json_data(data=data)
在项目根目录中的utils目录下创建json_fun.py文件,用于处理json格式转化功能。
from django.http import JsonResponse
from .res_code import Code
def to_json_data(errno=Code.OK, errmsg='', data=None, kwargs=None): json_dict = {'errno': errno, 'errmsg': errmsg, 'data': data} if kwargs and isinstance(kwargs, dict) and kwargs.keys(): json_dict.update(kwargs) return JsonResponse(json_dict)
在项目根目录中的utils目录下创建res_code.py文件,用于把后端执行的情况返回给前端。
class Code:
OK = "0"
DBERR = "4001" NODATA = "4002" DATAEXIST = "4003" DATAERR = "4004" METHERR = "4005" SMSERROR = "4006" SMSFAIL = "4007" SESSIONERR = "4101" LOGINERR = "4102" PARAMERR = "4103" USERERR = "4104" ROLEERR = "4105" PWDERR = "4106" SERVERERR = "4500" UNKOWNERR = "4501" error_map = { Code.OK : "成功", Code.DBERR : "数据库查询错误", Code.NODATA : "无数据", Code.DATAEXIST : "数据已存在", Code.DATAERR : "数据错误", Code.METHERR : "方法错误", Code.SMSERROR : "发送短信验证码异常", Code.SMSFAIL : "发送短信验证码失败", Code.SESSIONERR : "用户未登录", Code.LOGINERR : "用户登录失败", Code.PARAMERR : "参数错误", Code.USERERR : "用户不存在或未激活", Code.ROLEERR : "用户身份错误", Code.PWDERR : "密码错误", Code.SERVERERR : "内部错误", Code.UNKOWNERR : "未知错误", }
# url 定义
from django.urls import path, re_path
from . import views app_name = "verifications" urlpatterns = [ # image_code_id为uuid格式 path('image_codes/<uuid:image_code_id>/', views.ImageCode.as_view(), name='image_code'), re_path('usernames/(?P<username>\w{5,20})/', views.CheckUsernameView.as_view(), name='check_username'), ]
3.前端代码实现
$(function () {
let $username = $('#user_name'); let $img = $(".form-item .captcha-graph-img img"); let sImageCodeId = ""; // 1、图像验证码逻辑 generateImageCode(); // 生成图像验证码图片 $img.click(generateImageCode); // 点击图片验证码生成新的图片验证码图片 // 2、用户名验证逻辑 $username.blur(function () { fn_check_usrname(); }); // 生成一个图片验证码的编号,并设置页面中图片验证码img标签的src属性 function generateImageCode() { // 1、生成一个图片验证码随机编号 sImageCodeId = generateUUID(); // 2、拼接请求url /image_codes/<uuid:image_code_id>/ let imageCodeUrl = "/image_codes/" + sImageCodeId + "/"; // 3、修改验证码图片src地址 $img.attr('src', imageCodeUrl) } // 生成图片UUID验证码 function generateUUID() { let d = new Date().getTime(); if (window.performance && typeof window.performance.now === "function") { d += performance.now(); //use high-precision timer if available } let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { let r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16); }); return uuid; } // 判断用户名是否已经注册 function fn_check_usrname() { let sUsername = $username.val(); // 获取用户名字符串 if (sUsername === "") { message.showError('用户名不能为空!'); return } if (!(/^\w{5,20}$/).test(sUsername)) { message.showError('请输入5-20个字符的用户名'); return } // 发送ajax请求,去后端查询用户名是否存在 $.ajax({ url: '/usernames/' + sUsername + '/', type: 'GET', dataType: 'json', }) .done(function (res) { if (res.data.count !== 0) { message.showError(res.data.username + '已注册,请重新输入!') } else { message.showInfo(res.data.username + '能正常使用!') } }) .fail(function () { message.showError('服务器超时,请重试!'); }); } });