【Django开发】到1开发美多商城项目第3篇：用户注册业务实现（附代码，已分享）

本系列文章md笔记（已分享）主要讨论django商城项目相关知识。项目利用Django框架开发一套前后端不分离的商城项目（4.0版本）含代码和文档。功能包括前后端不分离，方便SEO。采用Django + Jinja2模板引擎 + Vue.js实现前后端逻辑，Nginx服务器（反向代理）Nginx服务器（静态首页、商品详情页、uwsgi服务器（美多商场业务场景），后端服务：MySQL、Redis、Celery、RabbitMQ、Docker、FastDFS、Elasticsearch、Crontab，外部接口：容联云、QQ互联、支付宝。

欢迎大家点赞转发~

共 11 章，132 子模块

用户注册业务实现

用户注册前端逻辑

为了学会使用Vue.js的双向绑定实现用户的交互和页面局部刷新效果。

1. 用户注册页面绑定Vue数据

2.register.html

• 绑定内容：变量、事件、错误提示等

<form method="post" class="register_form" @submit="on_submit" v-cloak>
    {{ csrf_input }}
    <ul>
        <li>
            <label>用户名:</label>
            <input type="text" v-model="username" @blur="check_username" name="username" id="user_name">
            <span class="error_tip" v-show="error_name">[[ error_name_message ]]</span>
        </li>
        <li>
            <label>密码:</label>
            <input type="password" v-model="password" @blur="check_password" name="password" id="pwd">
            <span class="error_tip" v-show="error_password">请输入8-20位的密码</span>
        </li>
        <li>
            <label>确认密码:</label>
            <input type="password" v-model="password2" @blur="check_password2" name="password2" id="cpwd">
            <span class="error_tip" v-show="error_password2">两次输入的密码不一致</span>
        </li>
        <li>
            <label>手机号:</label>
            <input type="text" v-model="mobile" @blur="check_mobile" name="mobile" id="phone">
            <span class="error_tip" v-show="error_mobile">[[ error_mobile_message ]]</span>
        </li>
        <li>
            <label>图形验证码:</label>
            <input type="text" name="image_code" id="pic_code" class="msg_input">
            <img src="{{ static('images/pic_code.jpg') }}" alt="图形验证码" class="pic_code">
            <span class="error_tip">请填写图形验证码</span>
        </li>
        <li>
            <label>短信验证码:</label>
            <input type="text" name="sms_code" id="msg_code" class="msg_input">
            <a rel="nofollow" href="javascript:;" class="get_msg_code">获取短信验证码</a>
            <span class="error_tip">请填写短信验证码</span>
        </li>
        <li class="agreement">
            <input type="checkbox" v-model="allow" @change="check_allow" name="allow" id="allow">
            <label>同意”美多商城用户使用协议“</label>
            <span class="error_tip2" v-show="error_allow">请勾选用户协议</span>
        </li>
        <li class="reg_sub">
            <input type="submit" value="注 册">
        </li>
    </ul>
</form>

2. 用户注册JS文件实现用户交互

2.准备register.js文件

<script type="text/javascript" src="{{ static('js/register.js') }}"></script>

3.用户交互事件实现

methods: {
    // 校验用户名
    check_username(){
        let re = /^[a-zA-Z0-9_-]{5,20}$/;
        if (re.test(this.username)) {
            this.error_name = false;
        } else {
            this.error_name_message = '请输入5-20个字符的用户名';
            this.error_name = true;
        }
    },
    // 校验密码
    check_password(){
        let re = /^[0-9A-Za-z]{8,20}$/;
        if (re.test(this.password)) {
            this.error_password = false;
        } else {
            this.error_password = true;
        }
    },
    // 校验确认密码
    check_password2(){
        if(this.password != this.password2) {
            this.error_password2 = true;
        } else {
            this.error_password2 = false;
        }
    },
    // 校验手机号
    check_mobile(){
        let re = /^1[3-9]\d{9}$/;
        if(re.test(this.mobile)) {
            this.error_mobile = false;
        } else {
            this.error_mobile_message = '您输入的手机号格式不正确';
            this.error_mobile = true;
        }
    },
    // 校验是否勾选协议
    check_allow(){
        if(!this.allow) {
            this.error_allow = true;
        } else {
            this.error_allow = false;
        }
    },
    // 监听表单提交事件
    on_submit(){
        this.check_username();
        this.check_password();
        this.check_password2();
        this.check_mobile();
        this.check_allow();

        if(this.error_name == true || this.error_password == true || this.error_password2 == true
            || this.error_mobile == true || this.error_allow == true) {
            // 禁用表单的提交
            window.event.returnValue = false;
        }
    },
}

4. 知识要点

1. Vue绑定页面的套路

   • 导入Vue.js库和ajax请求的库
   • 准备div盒子标签
   • 准备js文件
   • html页面绑定变量、事件等
   • js文件定义变量、事件等

2. 错误提示

   • 如果错误提示信息是固定的，可以把错误提示信息写死，再通过v-show控制是否展示
   • 如果错误提示信息不是固定的，可以使用绑定的变量动态的展示错误提示信息，再通过v-show控制是否展示

3. 修改Vue变量的读取语法，避免和Django模板语法冲突

   • delimiters: ['[[', ']]']

4. 后续的页面中如果有类似的交互和刷新效果，也可按照此套路实现

用户注册后端逻辑

1. 接收参数

前端校验过的后端也要校验，后端的校验和前端的校验是一致的

  
  
# 判断参数是否齐全
  
  
  
  
# 判断用户名是否是5-20个字符
  
  
  
  
# 判断密码是否是8-20个数字
  
  
  
  
# 判断两次密码是否一致
  
  
  
  
# 判断手机号是否合法
  
  
  
  
# 判断是否勾选用户协议
  
  

  
  
# 判断参数是否齐全
  
  
if not all([username, password, password2, mobile, allow]):
    return http.HttpResponseForbidden('缺少必传参数')
  
  
# 判断用户名是否是5-20个字符
  
  
if not re.match(r'^[a-zA-Z0-9_-]{5,20}$', username):
    return http.HttpResponseForbidden('请输入5-20个字符的用户名')
  
  
# 判断密码是否是8-20个数字
  
  
if not re.match(r'^[0-9A-Za-z]{8,20}$', password):
    return http.HttpResponseForbidden('请输入8-20位的密码')
  
  
# 判断两次密码是否一致
  
  
if password != password2:
    return http.HttpResponseForbidden('两次输入的密码不一致')
  
  
# 判断手机号是否合法
  
  
if not re.match(r'^1[3-9]\d{9}$', mobile):
    return http.HttpResponseForbidden('请输入正确的手机号码')
  
  
# 判断是否勾选用户协议
  
  
if allow != 'on':
    return http.HttpResponseForbidden('请勾选用户协议')

• 这里使用Django认证系统用户模型类提供的 create_user() 方法创建新的用户。
• 这里 create_user() 方法中封装了 set_password() 方法加密密码。

  
  
# 保存注册数据
  
  
try:
    User.objects.create_user(username=username, password=password, mobile=mobile)
except DatabaseError:
    return render(request, 'register.html', {'register_errmsg': '注册失败'})

  
  
# 响应注册结果
  
  
return http.HttpResponse('注册成功，重定向到首页')

1.创建首页广告应用：contents

$ cd ~/projects/meiduo_project/meiduo_mall/meiduo_mall/apps
$ python ../../manage.py startapp contents

3.配置首页广告路由：绑定命名空间

  
  
# contents
  
  
url(r'^', include('contents.urls', namespace='contents')),

  
  
# 首页广告
  
  
url(r'^$', views.IndexView.as_view(), name='index'),

5.响应注册结果：重定向到首页

  
  
# 响应注册结果
  
  
return redirect(reverse('contents:index'))

5. 知识要点

1. 后端逻辑编写套路：

   • 业务逻辑分析
   • 接口设计和定义
   • 接收和校验参数
   • 实现主体业务逻辑
   • 响应结果

2. 注册业务逻辑核心思想：

   • 保存用户注册数据

状态保持

1.请求方式

3.响应结果：JSON

3. 用户名重复注册后端逻辑

class UsernameCountView(View):
    """判断用户名是否重复注册"""

    def get(self, request, username):
        """
        :param request: 请求对象
        :param username: 用户名
        :return: JSON
        """
        count = User.objects.filter(username=username).count()
        return http.JsonResponse({'code': RETCODE.OK, 'errmsg': 'OK', 'count': count})

4. 用户名重复注册前端逻辑

if (this.error_name == false) {
    let url = '/usernames/' + this.username + '/count/';
    axios.get(url,{
        responseType: 'json'
    })
        .then(response => {
            if (response.data.count == 1) {
                this.error_name_message = '用户名已存在';
                this.error_name = true;
            } else {
                this.error_name = false;
            }
        })
        .catch(error => {
            console.log(error.response);
        })
}

5. 知识要点

1. 判断用户名重复注册的核心思想：

   • 使用用户名查询该用户名对应的记录是否存在，如果存在，表示重复注册了，反之，没有重复注册。

2. axios发送异步请求套路：

   • 处理用户交互
   • 收集请求参数
   • 准备请求地址
   • 发送异步请求
   • 得到服务器响应
   • 控制界面展示效果

手机号重复注册

1. 手机号重复注册逻辑分析

2. 手机号重复注册接口设计和定义

2.请求参数：路径参数

需要新建应用verifications

知识要点

1. 将图形验证码的文字信息保存到Redis数据库，为短信验证码做准备。
2. UUID 用于唯一区分该图形验证码属于哪个用户，也可使用其他唯一标识信息来实现。

未完待续， 同学们请等待下一期

欢迎大家点赞转发~

r_mobile == false) { let url = '/mobiles/'+ this.mobile + '/count/'; axios.get(url, { responseType: 'json' }) .then(response => { if (response.data.count == 1) { this.error_mobile_message = '手机号已存在'; this.error_mobile = true; } else { this.error_mobile = false; } }) .catch(error => { console.log(error.response); }) }

  
  
# 验证码
  
  



  
  
# 图形验证码
  
  



  
  
# 图形验证码逻辑分析
  
  


[外链图片转存中...(img-gTfk28oA-1706789118562)]
> 
需要新建应用`verifications`


  
  
### 知识要点
  
  


1. 将图形验证码的文字信息保存到Redis数据库，为短信验证码做准备。
2. UUID 用于唯一区分该图形验证码属于哪个用户，也可使用其他唯一标识信息来实现。





# 未完待续， 同学们请等待下一期





# 欢迎大家点赞转发~