用户注册功能实现二

目的：

1、用户名校验功能实现

2、手机号码校验功能实现

应用技术：

1、前端：js（jQuery框架）、ajax(前后端交互)、

2、后端：django接口设计（json）

接口模式化

一、json响应数据结构设计

1.结构设计

实际项目是多人协同开发，特别是前后端交互，后端返回数据结构要一致。

{"errno": "0", "errmsg": "OK", "data": {...}}

字段	类型	说明
errno	字符串	错误编码
errmsg	字符串	错误信息
data		返回数据

在项目根目录中utils的db文件夹下创建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: "未知错误",
}

2.快捷方法

为了方便定义一个快捷方法，在utils目录db文件夹res_code.py文件加入代码如下：

from django.http import JsonResponse

from .res_code import Code


def json_response(errno=Code.OK, errmsg='', data=None, kwargs=None):
json_dict = {
        'errno': errno,
        'errmsg': errmsg,
        'data': data
    }
    if kwargs and isinstance(kwargs, dict) :
        json_dict.update(kwargs)
    
    return JsonResponse(json_dict)

二、判断用户是否注册功能实现

1.接口设计

接口说明：

类目	说明
请求方式	GET
url定义	/username/(?P\w{5,20})/
参数格式	url路径参数

参数说明：

参数名	类型	是否必须	描述
username	字符串	是	输入的用户名

返回结果：

{
    "errno": "0", 
 	"errmsg": "OK", 
 	"data": {
        "username": "username",			# 查询的用户名
        "count": 1						# 用户名查询的数量
    }
}

2.后端代码

创建app verification专门用来处理验证
verification/views.py代码

from user.models import User
from utils.json_res import json_response

#检查用户名
def check_username_view(request, username):
    
    data = {
        'username': username,
        'count': User.objects.filter(username=username).count()
    }

    return json_response(data=data)

verification/urls.py代码

from django.urls import path, re_path
from . import views
# url的命名空间
app_name = 'verification'

#使用re_path,会进行自动re匹配，不满足的不会访问
urlpatterns = [
    path('image_code/', views.image_code_view, name='image_code'),
    re_path('username/(?P<username>\w{5,20})/', views.check_username_view, name='check_username'),
]

3.前端页面代码

user/register.html代码如下：
（后面js 使用id选择器，这里的用户名input 要加入id=‘username’）

{% extends 'base/base.html' %}
{% load static %}
{% block title %}注册{% endblock title %}

{% block link %}
<link rel="stylesheet" href="{% static 'css/user/auth.css' %}">
{% endblock link %}

{% 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">立即登录 &gt;</a>
    </div>
    <form action="" method="post" class="form-contain">


      <div class="form-item">
        <input type="text" placeholder="请输入用户名" id="username" name="username" class="form-control" >
      </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">
      </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="{% url 'verification:image_code' %}" 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 main_start %}

{% block script %}
    <script src="{% static 'js/user/register.js' %}"></script>
{% endblock script %}

4.前端js代码

注意：在前端页面中我们引入了一个message.js 用来进行前端页面提示功能。
在这里插入图片描述
user/register.js代码：

$(function () {
    // 定义状态变量
    let isUsernameReady = false,
        isPasswordReady = false,
        isMobileReady = false,
        isSmsCodeReady = false;
    // 1.点击刷新图像验证码
    let $img = $('.form-contain .form-item .captcha-graph-img img');
    

    $img.click(function () {
        $img.attr('src', '/image_code/?rand=' + Math.random())
    });

    // 2.鼠标离开用户名输入框校验用户名
    let $username = $('#username');
    $username.blur(fnCheckUsername);
    
    function fnCheckUsername () {
        isUsernameReady = false;
        let sUsername = $username.val();    //获取用户字符串
        if (sUsername === ''){
            message.showError('用户名不能为空！');
            return
        }
        if (!(/^\w{5,20}$/).test(sUsername)){
            message.showError('请输入5-20个字符的用户名');
            return
        }
        $.ajax({
            url: '/username/' + sUsername + '/',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                if(data.data.count !== 0){
                    message.showError(data.data.username + '已经注册，请重新输入！')
                }else {
                    message.showInfo(data.data.username + '可以正常使用！')
                    //用户名校验成功，此时isUsernameReady应该改为true
                    isUsernameReady = true
                }
            },
            error: function (xhr, msg) {
                message.showError('服务器超时，请重试！')
            }
        });
    }

    // 3.检测密码是否一致
    let $passwordRepeat = $('input[name="password_repeat"]');
    $passwordRepeat.blur(fnCheckPassword);

    function fnCheckPassword () {
        isPasswordReady = false;
        let password = $('input[name="password"]').val();
        let passwordRepeat = $passwordRepeat.val();
        if (password === '' || passwordRepeat === ''){
            message.showError('密码不能为空');
            return
        }
        if (password !== passwordRepeat){
            message.showError('两次密码输入不一致');
            return
        }
        if (password === passwordRepeat){
            isPasswordReady = true
        }
    }

三、判断手机号码是否注册功能

1.接口设计

接口说明：

类目	说明
请求方法	GET
url定义	`/mobile/(?P\1[3-9]\d{9})/
参数格式	url路径参数

`参数说明：

扫描二维码关注公众号，回复： 9187242 查看本文章

参数名	类型	是否必须	描述
moblie	字符串	是	输入的手机号码

返回结果：

{
    "errno": "0", 
 	"errmsg": "OK", 
 	"data": {
        "mobile": "13xxxxxxxxx",			# 查询的手机号
        "count": 1						# 手机号查询的数量
    }
}

2.后端代码

verification/views.py代码

# ····
def check_mobile_view(request, mobile):
    """
    校验手机号是否存在
    url:/moblie/(?P<moblie>1[3-9]\d{9})/
    :param request:
    :param username:
    :return:
    """
    data = {
        'mobile': mobile,
        'count': User.objects.filter(mobile=mobile).count()
    }

    return json_response(data=data)

verification/urls.py

from django.urls import path, re_path
from . import views
# url的命名空间
app_name = 'verification'

urlpatterns = [
    path('image_code/', views.image_code_view, name='image_code'),
    re_path('username/(?P<username>\w{5,20})/', views.check_username_view, name='check_username'),
    re_path('mobile/(?P<mobile>1[3-9]\d{9})/', views.check_mobile_view, name='check_mobile'),
]

前端js代码

$(function () {
    // 定义状态变量
    let isUsernameReady = false,
        isPasswordReady = false,
        isMobileReady = false,
        isSmsCodeReady = false;
    // 1.点击刷新图像验证码
    let $img = $('.form-contain .form-item .captcha-graph-img img');
    

    $img.click(function () {
        $img.attr('src', '/image_code/?rand=' + Math.random())
    });

    // 2.鼠标离开用户名输入框校验用户名
    let $username = $('#username');
    $username.blur(fnCheckUsername);

    function fnCheckUsername () {
        isUsernameReady = false;
        let sUsername = $username.val();    //获取用户字符串
        if (sUsername === ''){
            message.showError('用户名不能为空！');
            return
        }
        if (!(/^\w{5,20}$/).test(sUsername)){
            message.showError('请输入5-20个字符的用户名');
            return
        }
        $.ajax({
            url: '/username/' + sUsername + '/',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                if(data.data.count !== 0){
                    message.showError(data.data.username + '已经注册，请重新输入！')
                }else {
                    message.showInfo(data.data.username + '可以正常使用！')
                    isUsernameReady = true
                }
            },
            error: function (xhr, msg) {
                message.showError('服务器超时，请重试！')
            }
        });
    }

    // 3.检测密码是否一致
    let $passwordRepeat = $('input[name="password_repeat"]');
    $passwordRepeat.blur(fnCheckPassword);

    function fnCheckPassword () {
        isPasswordReady = false;
        let password = $('input[name="password"]').val();
        let passwordRepeat = $passwordRepeat.val();
        if (password === '' || passwordRepeat === ''){
            message.showError('密码不能为空');
            return
        }
        if (password !== passwordRepeat){
            message.showError('两次密码输入不一致');
            return
        }
        if (password === passwordRepeat){
            isPasswordReady = true
        }
    }

    // 4.检查手机号码是否可用
    let $mobile = $('input[name="mobile"]');
    $mobile.blur(fnCheckMobile);

    function fnCheckMobile () {
        isMobileReady = true;
        let sMobile = $mobile.val();
        if(sMobile === ''){
            message.showError('手机号码不能为空');
            return
        }
        if(!(/^1[3-9]\d{9}$/).test(sMobile)){
            message.showError('手机号码格式不正确');
            return
        }

        $.ajax({
            url: '/mobile/' + sMobile + '/',
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                if(data.data.count !== 0){
                    message.showError(data.data.mobile + '已经注册，请重新输入！')
                }else {
                    message.showInfo(data.data.mobile + '可以正常使用！');
                    isMobileReady = true
                }
            },
            error: function (xhr, msg) {
                message.showError('服务器超时，请重试！')
            }
        });

    }
});

fksfdh

发布了12 篇原创文章 · 获赞 1 · 访问量 993

私信关注

用户注册功能实现 二

用户注册功能实现 二

目的：

1、用户名校验功能实现

2、手机号码校验功能实现

应用技术：

1、前端：js（jQuery框架）、ajax(前后端交互)、

2、后端：django接口设计（json）

一、json响应数据结构设计

1.结构设计

2.快捷方法

二、判断用户是否注册功能实现

1.接口设计

2.后端代码

3.前端页面代码

4.前端js代码

三、判断手机号码是否注册功能

1.接口设计

2.后端代码

猜你喜欢

用户注册功能实现二

用户注册功能实现二