首页 > 其他分享> 文章详细

用户注册功能

2019-06-29 09:41:31 阅读：167 来源： 互联网

标签：username function 功能 Code 用户注册验证码 let data

## 用户注册功能

[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

}

});

```

标签：username,function,功能,Code,用户注册,验证码,let,data
来源： https://www.cnblogs.com/wdty/p/11105709.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

用户注册功能