## 用户注册功能
[TOC]
### 一、设计接口思路
- 分析业务逻辑，明确在这个业务中需要涉及到几个相关子业务，将每个子业务当做一个接口来设计
- 分析接口的功能任务，明确接口的访问方式与返回数据：
- 接口的请求方式，如GET 、POST 、PUT等
- 接口的URL路径定义
- 需要前端传递的数据及数据格式（如路径参数、查询字符串、请求体表单、JSON等）
- 返回给前端的数据及数据格式
### 二、功能分析
- 用户名判断是否存在
- 手机号判断是否存在
- 图片验证码
- 短信验证码
- 注册保存用户数据
图片验证码、短信验证码考虑到后续可能会在其他业务中也会用到，因此将验证码功能独立出来，**创建一个新应用verifications，在此应用中实现图片验证码、短信验证码**
#### 2.后端视图实现
a.将生成图像验证码的模块文件夹（百度云盘有提供captcha文件夹）复制粘贴到项目根目录utils文件夹下
b.由于验证（图片验证、短信验证）功能，以后有可能在其他应用或项目中重用，所以单独创建一个应用来实现，所有验证相关的业务逻辑接口。在apps目录中创建一个verifications应用，并在settings.py文件中的INSTALLED_APPS列表中指定。
```python
```
```python
```
### 四、判断用户是否存在
#### 1.分析
**请求方法**：**GET**
**url定义**：`/usernames/(?P<username>\w{5,20})/`
**请求参数**：url路径参数
| 参数 | 类型 | 前端是否必须传 | 描述 |
| --------- | ------ | -------------- | ------------ |
| usernames | 字符串 | 是 | 输入的用户名 |
#### 2.后端视图实现
```python
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 = User.objects.get(username=username).count
data = {
‘username‘: username,
‘count‘: Users.objects.filter(username=username).count()
}
return to_json_data(data=data)
```
在项目根目录中的utils目录下创建json_fun.py文件，用于处理json格式转化功能。
```python
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文件，用于把后端执行的情况返回给前端。
```python
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 : "未知错误",
}
```
```python
# 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.前端代码实现 auth.js
```javascript
$(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_username();
});
// 生成一个图片验证码的编号，并设置页面中图片验证码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_username() {
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(‘服务器超时，请重试！‘);
});
}
});
```
##
### 五、判断手机号是否注册功能实现
#### 1.分析
**请求方法**：**GET**
**url定义**：`/mobiles/(?P<mobile>1[3-9]\d{9})/`
**请求参数**：url路径参数
| 参数 | 类型 | 前端是否必须传 | 描述 |
| ------ | ------ | -------------- | ---------------- |
| mobile | 字符串 | 是 | 用户输入的手机号 |
#### 2.后端代码实现
```python
# 在verifications目录下的views.py文件中定义如下类视图：
class CheckUsernameView(View):
"""
Check whether the user exists
GET usernames/(?P<username>\w{5,20})/
"""
def get(self, request, username):
data = {
‘username‘: username,
‘count‘: Users.objects.filter(username=username).count()
}
return to_json_data(data=data)
```
```python
# 在verifications目录下的urls.py文件中定义如下路由：
from django.urls import path, re_path
from . import views
app_name = "verifications"
urlpatterns = [
re_path(‘mobiles/(?P<mobile>1[3-9]\d{9})/‘, views.CheckMobileView.as_view(), name=‘check_mobiles‘),
]
```
####3.前端代码实现 auth.js
```javascript
$(function () {
let $username = $(‘#user_name‘); // 选择id为user_name的网页元素，需要定义一个id为user_name
let $img = $(".form-item .captcha-graph-img img"); // 获取图像标签
let sImageCodeId = ""; // 定义图像验证码ID值
let $mobile = $(‘#mobile‘); // 选择id为mobile的网页元素，需要定义一个id为mobile
// 1、图像验证码逻辑
generateImageCode(); // 生成图像验证码图片
$img.click(generateImageCode); // 点击图片验证码生成新的图片验证码图片
// 判断用户是否注册
// 2、用户名验证逻辑
$username.blur(function () {
fn_check_usrname();
});
// 3、手机号验证逻辑
// 判断用户手机号是否注册
$mobile.blur(function () {
fn_check_mobile();
});
// 生成一个图片验证码的编号，并设置页面中图片验证码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
}
// test()方法 判断字符串中是否匹配到正则表达式内容，返回的是boolean值 ( true / false )
if (!(/^\w{5,20}/).test(sUsername)) {
message.showError(‘请输入5-20个字符的用户名‘);
return
}
// 发送ajax请求，去后端查询用户名是否存在
$.ajax({
url: ‘/usernames/‘ + sUsername + ‘/‘,
type: ‘GET‘,
dataType: ‘json‘,
// data:{‘code‘:300268}
})
.done(function (res) {
if (res.data.count !== 0) {
message.showError(res.data.username + ‘已注册，请重新输入！‘)
} else {
message.showInfo(res.data.username + ‘能正常使用！‘)
}
})
.fail(function () {
message.showError(‘服务器超时，请重试！‘);
});
}
function fn_check_mobile() {
let sMobile = mobile.val(); // 获取用户输入的手机号码字符串
let SreturnValue = "";
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 // 把async关掉
})
.done(function (res) {
if (res.data.count !== 0) {
message.showError(res.data.mobile + ‘已注册，请重新输入！‘)
SreturnValue = ""
} else {
SreturnValue = "success"
}
})
.fail(function () {
message.showError(‘服务器超时，请重试！‘);
SreturnValue = ""
});
return SreturnValue
}
});
```
原文地址：https://www.cnblogs.com/wdty/p/11105709.html