Django电商项目---Day03

注册业务功能实现：

1、创建并注册用户应用

打开终端使用命令创建用户模块子应用，注意要创建在apps目录下

python ../manage.py startapp users

注册应用，找到settings文件的INSTALLED_APPS配置项添加users应用的注册

2、用户模型类

我们这里使用django的默认用户认证系统，并继承django默认的用户模型类AbstractUser,

1.  
   from django.db import models
2.  
   from django.contrib.auth.models import AbstractUser
3.  
    
4.  
   # Create your models here.
5.  
    
6.  
    
7.  
   class User(AbstractUser):
8.  
   """自定义用户模型类"""
9.  
   mobile = models.CharField(max_length=11, unique=True, verbose_name='手机号')
10.  
    # 添加自定义字段mobile
11.  
     
12.  
    class Meta:
13.  
    db_table = 'tb_users'
14.  
    verbose_name = '用户'
15.  
    verbose_name_plural = verbose_name
16.  
     
17.  
    def __str__(self):
18.  
    return self.username

定义完成后执行迁移操作

1.  
   # 创建迁移文件
2.  
    
3.  
   python manage.py makemigrations
4.  
    
5.  
   # 执行迁移文件
6.  
   python manage.py migrate

3、展示用户注册页面

3.1请求接口设计：

前端发起请求，部分代码展示

1.  
   <div class="login_btn fl" v-else>
2.  
   <a href="{% url 'users:login'%}">登录</a>
3.  
   <span>|</span>
4.  
   <a href="{% url 'users:register'%}">注册</a>
5.  
   </div>

3.2、定义用户注册路由

总路由：

  re_path(r'^', include(("users.urls", 'users'), namespace="users")),

users应用中子路由：

1.  
   from django.urls import path, re_path, include
2.  
   from .views import RegisterView, LoginView, LogoutView, InfoView, resses_view, add_select_resses, put_delete_resses, \
3.  
   histories_view,set_password,orders_view
4.  
    
5.  
   urlpatterns = [
6.  
   re_path(r'^register$', RegisterView.as_view(), name="register"),
7.  
   ]

3.3、定义用户注册视图：

1.  
   class RegisterView(View):
2.  
    
3.  
   def get(self, request):
4.  
   return render(request, 'register.html')

访问接口，效果展示：

4、用户注册业务实现：

 4.1、接口设计：

请求携带参数：

路由使用和前面GET请求一致

4.2、前端逻辑：

register.html

1.  
   <div class="reg_form clearfix" id="app" v-cloak>
2.  
   <form method="post" class="register_form" @submit="on_submit" action="{% url 'users:register'%}">
3.  
   <!--当form表单没有指定url的时候，会自动将当前页面的地址作为url提交请求-->
4.  
   {% csrf_token %}
5.  
   <ul>
6.  
   <li>
7.  
   <label>用户名:</label>
8.  
   <input type="text" name="username" id="user_name" v-model="username" @blur="check_username">
9.  
   <span class="error_tip" v-show="error_name">[[ error_name_message ]]</span>
10.  
    </li>
11.  
    <li>
12.  
    <label>密码:</label>
13.  
    <input type="password" name="password" id="pwd" v-model="password" @blur="check_pwd">
14.  
    <span class="error_tip" v-show="error_password">[[ error_password_message ]]</span>
15.  
    </li>
16.  
    <li>
17.  
    <label>确认密码:</label>
18.  
    <input type="password" name="password2" id="cpwd" v-model="password2" @blur="check_cpwd">
19.  
    <span class="error_tip" v-show="error_check_password">[[ error_password2_message ]]</span>
20.  
    </li>
21.  
    <li>
22.  
    <label>手机号:</label>
23.  
    <input type="text" name="mobile" id="phone" v-model="mobile" @blur="check_phone">
24.  
    <span class="error_tip" v-show="error_phone">[[ error_phone_message ]]</span>
25.  
    </li>
26.  
    <li class="agreement">
27.  
    <input type="checkbox" name="allow" id="allow" checked="checked" v-model="allow"
28.  
    @click="click_allow">
29.  
    <label>同意”美多商城用户使用协议“</label>
30.  
    <span class="error_tip" v-show="error_allow">[[ error_allow_message ]]</span>
31.  
    {% if register_errmsg %}
32.  
    <span class="error_tip2">{{ register_errmsg }}</span>
33.  
    {% endif %}
34.  
    </li>
35.  
    <li class="reg_sub">
36.  
    <input type="submit" value="注 册">
37.  
    </li>
38.  
    </ul>
39.  
    </form>
40.  
    </div>

js文件完成前端校验

1.  
   var vm = new Vue({
2.  
   el: '#app',
3.  
   // 修改Vue变量的读取语法，避免和django模板语法冲突
4.  
   delimiters: ['[[', ']]'],
5.  
   data: {
6.  
   host: host,
7.  
   error_name: false,
8.  
   error_password: false,
9.  
   error_check_password: false,
10.  
    error_phone: false,
11.  
    error_image_code: false,
12.  
    error_sms_code: false,
13.  
    error_allow: false,
14.  
    error_name_message: '请输入5-20个字符的用户',
15.  
    error_password_message: '请输入8-20位的密码',
16.  
    error_password2_message: '两次输入的密码不一致',
17.  
    error_phone_message: '请输入正确的手机号码',
18.  
    error_allow_message: '请勾选用户协议',
19.  
    username: '',
20.  
    password: '',
21.  
    password2: '',
22.  
    mobile: '',
23.  
    allow: true
24.  
    },
25.  
    mounted: function () {
26.  
     
27.  
    },
28.  
    methods: {
29.  
     
30.  
    // 检查用户名
31.  
    check_username: function () {
32.  
    var re = /^[a-zA-Z0-9_-]{5,20}$/;
33.  
    if (re.test(this.username)) {
34.  
    this.error_name = false;
35.  
    alert("前端验证通过")
36.  
    } else {
37.  
    alert("前端验证不通过")
38.  
    this.error_name_message = '请输入5-20个字符的用户名';
39.  
    this.error_name = true;
40.  
    }
41.  
     
42.  
    // 检查密码
43.  
    check_pwd: function () {
44.  
    var re = /^[0-9A-Za-z]{8,20}$/;
45.  
    if (re.test(this.password)) {
46.  
    this.error_password = false;
47.  
    } else {
48.  
    this.error_password = true;
49.  
    }
50.  
    },
51.  
    // 确认密码
52.  
    check_cpwd: function () {
53.  
    if (this.password != this.password2) {
54.  
    this.error_check_password = true;
55.  
    } else {
56.  
    this.error_check_password = false;
57.  
    }
58.  
    },
59.  
    // 检查手机号
60.  
    check_phone: function () {
61.  
    var re = /^1[345789]\d{9}$/;
62.  
    if (re.test(this.mobile)) {
63.  
    this.error_phone = false;
64.  
    } else {
65.  
    this.error_phone_message = '您输入的手机号格式不正确';
66.  
    this.error_phone = true;
67.  
    }
68.  
    }
69.  
     
70.  
     
71.  
    // 检查是否勾选协议
72.  
    check_allow: function () {
73.  
    if (!this.allow) {
74.  
    this.error_allow = true;
75.  
    } else {
76.  
    this.error_allow = false;
77.  
    }
78.  
    },
79.  
    click_allow: function () {
80.  
    this.allow = !this.allow
81.  
    this.check_allow()
82.  
    },
83.  
    // 表单提交
84.  
    on_submit() {
85.  
    alert("触发前端验证")
86.  
    this.check_username();
87.  
    this.check_pwd();
88.  
    this.check_cpwd();
89.  
    this.check_phone();
90.  
    this.check_allow();
91.  
     
92.  
    if (this.error_name == true || this.error_password == true || this.error_check_password == true
93.  
    || this.error_phone == true || this.error_allow == true) {
94.  
    // 不满足注册条件：禁用表单
95.  
    window.event.returnValue = false;
96.  
    }
97.  
    }
98.  
    }
99.  
    });

4.2、在之前的注册视图中继续编写实现注册业务的方法

1.  
   class RegisterView(View):
2.  
    
3.  
   def get(self, request):
4.  
   return render(request, 'register.html')
5.  
    
6.  
   def post(self, request):
7.  
   username = request.POST.get("username")
8.  
   password = request.POST.get("password")
9.  
   password2 = request.POST.get("password2") # 确认密码
10.  
    mobile = request.POST.get("mobile")
11.  
    allow = request.POST.get("allow")
12.  
     
13.  
    context = {
14.  
    "register_errmsg": ""
15.  
    }
16.  
    if not all([username, password, password2, mobile, allow]):
17.  
    context["register_errmsg"] = "参数不全"
18.  
    return render(request, 'register.html', context)
19.  
     
20.  
    if not re.match(r'^[0-9a-zA-Z_-]{5,20}$', username): # 后端校验：检查用户是否是5-20的任意字符
21.  
    context["register_errmsg"] = "请输入5-20个字符的用户名"
22.  
    return render(request, 'register.html', context)
23.  
     
24.  
    if not re.match(r'^[0-9a-zA-Z_-]{8,20}$', password):
25.  
    context["register_errmsg"] = "请输入8-20个字符的密码"
26.  
    return render(request, 'register.html', context)
27.  
     
28.  
    if password != password2:
29.  
    context["register_errmsg"] = "密码与确认密码不一致"
30.  
    return render(request, 'register.html', context)
31.  
     
32.  
    if not re.match(r'^1[3578]\d{9}$', mobile): # 手机号码一般以1开头，第二位是3，5，7，8其中一位。总共11个数
33.  
    context["register_errmsg"] = "手机号码格式错误"
34.  
    return render(request, 'register.html', context)
35.  
     
36.  
    # 使用django自己创建认证模型的创建方法，会在创建的时候自动为密码进行加密处理。后期进行登录验证的时候也就只能调用djaongo自带的认证模型进行解密处理
37.  
    user = user_manage.objects.create_user(username=username, password=password, phone=mobile)
38.  
    return redirect("users:login") # 注册成功，重定向回到登录页

这篇好文章是转载于：学新通技术网