四、判断用户是否存在
1.分析
请求方法:GET
url定义:/username/(?P<username>\w{5,20})/
请求参数:url路径参数
参数 | 类型 | 前端是否必须传 | 描述 |
---|---|---|---|
username | 字符串 | 是 | 输入的用户名 |
2、 代码实现
1、后台视图 views.py
from django.http import HttpResponse, JsonResponse
from users.models import User
class CheckUsernameView(View):
"""
Check whether the user exists
GET username/(?P<username>\w{5,20})/
"""
def get(self, request, username):
# count = User.objects.get(username=username).count
data = {
'username': username,
'count': User.objects.filter(username=username).count()
}
return JsonResponse(data=data)
2、url 定义
# url 定义
from django.urls import path, re_path
from . import views
app_name = "verifications"
urlpatterns = [
# image_code_id为uuid格式
path('image_code/<uuid:image_code_id>/', views.ImageCode.as_view(), name='image_code'),
re_path('username/(?P<username>\w{5,20})/', views.CheckUsernameView.as_view(), name='check_username'),
]
3、前端js: register.js
$(function () {
let $username = $('#user_name'); //获取用户名
let $img = $(".form-item .captcha-graph-img img"); // 获取图像
let sImageCodeId = ""; //uuid
// let $imgCodeText = $('#input_captcha');
// console.log(img);
genreate();
$img.click(genreate);
function genreate() {
let sImageCodeId = generateUUID();
let imageCodeUrl = '/image_code/' + sImageCodeId + '/';
$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;
}
// 2、用户名验证逻辑
// blur,触发失去焦点事件
$username.blur(function () {
fn_check_username();
});
// 判断用户名是否已经注册
function fn_check_username() {
let sUsername = $username.val(); // 获取用户名字符串
if (sUsername === "") {
message.showError('用户名不能为空!');
return
}
if (!(/^\w{5,20}$/).test(sUsername)) {
message.showError('请输入5-20个字符的用户名');
return
}
// 发送ajax请求,去后端查询用户名是否存在
$.ajax({
url: '/username/' + sUsername + '/',
type: 'GET',
dataType: 'json',
})
.done(function (res) {
if (res.count !== 0) {
message.showError(res.username + '已注册,请重新输入!')
} else {
message.showInfo(res.username + '能正常使用!')
}
})
.fail(function () {
message.showError('服务器超时,请重试!');
});
}
});
注意:将message.js引入base.html模板,做前端页面信息提示 例如:message.showError(‘请输入5-20个字符的用户名’);
演示:
五,判断手机号是否存在
1.分析
请求方法:GET
url定义:mobiles/(?P<mobile>1[3-9]\d{9})/
请求参数:url路径参数
参数 | 类型 | 前端是否必须传 | 描述 |
---|---|---|---|
mobile | 字符串 | 是 | 输入的手机号 |
2、代码实现
1、后台视图 views.py
class CheckMobilView(View):
"""
Check whether the user exists
GET mobiles/(?P<mobile>1[3-9]\d{9})/
"""
def get(self, request, mobile):
data = {
'mobile': mobile,
'count': User.objects.filter(mobile=mobile).count()
}
return JsonResponse({'data':data})
2、url路径 url.py
from django.urls import path,re_path
from . import views
app_name = 'verifications'
urlpatterns = [
re_path('username/(?P<username>\w{5,20})/',views.CheckUsernameView.as_view(),name='username'),
re_path('mobiles/(?P<mobile>1[3-9]\d{9})/',views.CheckMobilView.as_view(),name='mobile'),
]
3, 前端js
$(function () {
let $username = $('#user_name'); //获取用户名
let $img = $(".form-item .captcha-graph-img img"); // 获取图像
let sImageCodeId = ""; //uuid
let $mobile = $('#mobile'); // 选择id为mobile的网页元素,需要定义一个id为mobile手机号
// let $imgCodeText = $('#input_captcha');
// console.log(img);
genreate();
$img.click(genreate);
function genreate() {
let sImageCodeId = generateUUID();
let imageCodeUrl = '/image_code/' + sImageCodeId + '/';
$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;
}
// 2、用户名验证逻辑
// blur,触发失去焦点事件
$username.blur(function () {
fn_check_username();
});
// 判断用户名是否已经注册
function fn_check_username() {
let sUsername = $username.val(); // 获取用户名字符串
if (sUsername === "") {
message.showError('用户名不能为空!');
return
}
if (!(/^\w{5,20}$/).test(sUsername)) {
message.showError('请输入5-20个字符的用户名');
return
}
// 发送ajax请求,去后端查询用户名是否存在
$.ajax({
url: '/username/' + sUsername + '/',
type: 'GET',
dataType: 'json',
})
.done(function (res) {
if (res.count !== 0) {
message.showError(res.username + '已注册,请重新输入!')
} else {
message.showSuccess(res.username + '能正常使用!')
}
})
.fail(function () {
message.showError('服务器超时,请重试!');
});
}
//3、手机号验证
// 手机号校验,光标离开手机号输入框就校验
$mobile.blur(fn_check_mobile);
// 判断手机号是否注册
function fn_check_mobile() {
let sMobile = $mobile.val(); // 获取用户输入的手机号码字符串
if (sMobile === "") {
message.showError('手机号不能为空!');
return
}
if (!(/^1[345789]\d{9}$/).test(sMobile)) {
message.showError('手机号码格式不正确,请重新输入!');
return
}
$.ajax({
url: '/mobiles/' + sMobile + '/',
type: 'GET',
dataType: 'json',
async: false
})
.done(function (res) {
if (res.data.count !== 0) {
message.showError(res.data.mobile + '已注册,请重新输入!');
} else {
message.showSuccess(res.data.mobile + '能正常使用!');
}
})
.fail(function () {
message.showError('服务器超时,请重试!');
});
}
});
演示:
六,自定义异常类
在项目根目录中的utils目录下创建res_code.py文件,用于处理json格式转化功能。
- 自定义异常响应状态码
- 自定义项目响应格式
from django.http import JsonResponse
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: "未知错误",}
def res_json(errno=Code.OK, errmsg='', data=None, **kwargs):
json_dict = {'errno': errno, 'errmsg': errmsg, 'data': data}
if kwargs:
json_dict.update(kwargs)
return JsonResponse(json_dict)
这个使用ajax回调时,状态码就使用我们自己定义的状态码。
导入
from dj_blog.utils.res_code import res_json
使用时:
前端js:
需要修改从data中获得count
总结:
1、定义我们自己的状态码
2、用户名和手机号的校验,前端和后端各自校验