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，创建一个类
2，校验参数，
3，在数据库中查询数据
4，返回校验结果，
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('服务器超时，请重试！');
});
}
});