Django全栈开发_billshop 商城项目 _3 注册功能的具体实现（后续有图形和验证码功能）【高能总结】

2023-10-02 19:23:22

现在开始进入真正功能的开发和实现

1. 用户注册

显然这个页面目前需要分析各种校验和验证以及正常的提示和报错信息。
如鼠标失焦后，提示用户名已注册；
密码不对，密码不符合规则；密码加密
图形验证码不正确等；（防止机器自动恶意注册）
获取短信验证码后，1分钟的有效等等。（手机号的有效性以及防止人家恶意花光你的短信推送）

所以，第一步是 form表单验证+接收+再验证----->数据保存到数据库。
那么保存到数据库，站在python和Django后端的角度来看，肯定是通过ORM来做的。

所以，首先需要有模型，在models.py中编写。

而真正保存到数据库中的是用户名、密码、手机号。

密码涉及到加密，后续不明文，以及权限的问题。
恰恰Django有默认的用户认证系统。

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Django默认用户认证系统
• Django自带用户认证系统
• 它处理用户账号、组、权限以及基于cookie的用户会话。
• Django认证系统位置
• django.contrib.auth包含认证框架的核心和默认的模型。
• django.contrib.contenttypes是Django内容类型系统，它允许权限与你创建的模型关联。
• Django认证系统同时处理认证和授权
• 认证：验证一个用户是否它声称的那个人，可用于账号登录。
• 授权：授权决定一个通过了认证的用户被允许做什么。
• Django认证系统包含的内容
• 用户：用户模型类、用户认证。
• 权限：标识一个用户是否可以做一个特定的任务，MIS系统常用到。
• 组：对多个具有相同权限的用户进行统一管理，MIS系统常用到。
• 密码：一个可配置的密码哈希系统，设置密码、密码校验。
@@@@@@@@@@@@@@@@@@@@@@
即在 External libraris–site packages–django–contrib–auth–models.py.
我们可以在自己的models.py中引入它其中需要的AbstractUser模块即可。
养成习惯好好看看这些类目录和作用。

而AbstractUser 本身又继承了两个父类，在内部编写了一些数据库user 表的主要字段，这也是为什么我们映射数据库之后，虽然没有表数据，但是表的字段都有了。
自我备忘，类里面有下划线定义的方法，是私有。
创建用户必须传username，否则抛出异常。
# 可以说AbstractUser 大部分实现了用户注册的主题功能。

引入并将手机号添加字段，同时设置数据库后台所需

注释掉刚才的class User所有代码，运行一下，看看admin的login后台是怎样的，来知晓verbose_name等需求，后台用到，前台用不到。

现在分析解决刚才界面运行的报错问题。
HINT: Add or change a related_name argument to the definition for ‘User.user_permissions’ or ‘User.user_permissions’.
因为原先，数据库映射后能找到auth_user(External libraris–site packages–django–contrib–auth–models.py. )，现在相当于修改了它（因为继承了它的AbstractUser，并且添加了mobile）。
现在映射数据库是映射了users\models 这个ORM,
那么我现在告诉Django，我要映射的是哪个模型下的哪个ORM，哪个app下面的哪个model （即我要告诉Django，现在要映射apps–users–models，同时让它知道我增加了mobile）。
那我们是不是可以改源码呢（External libraris–site packages–django–contrib–auth–models.py.** ）？当然不建议，因为共同开发怎么玩呢，万一你的同组人员他们的源码都不改，而你改了，你们也就冲突了，所以谁都不改源码。而且以后还要有更新。

解决这个问题的继续分析思路：
1.查看源码，原类是写死的常量，swappable = ‘AUTH_USER_MODEL’

2. 看到常量，我们就要想到有Django中有全局的global变量，我们通过django–config–global_settings.py

搜到这个常量，你就看到它是 ‘auth.User’

这下明白了吧，直接复制这句，黏贴到dev中改它吧。改到了app下面，但是还是报错了哦！
但是现在报错很明显不同了，这个报错是没有迁移而已。

建议看看源码下 **External libraris–site packages–django–contrib–auth–migrations

ORM迁移是分成两步的：
STEP 1 生成迁移脚本。
STEP 2 映射到数据库中。
那么源码中，它已经帮我们做了第一步了。
而现在我们用了自定义的ORM，所以我们要从STEP1 开始。

在cmder中项目下执行
STEP1 python manage.py makemigrations
STEP2 python manage.py migrate

回忆一下，原先在执行python manage.py makemigrations，只有model user，而一旦做STEP2 映射之后，就有了很多的源码下的文件（见上图，这就是重新迁移和映射后刷新创建的）

那么现在我们去数据库看看tb_table，里面有没有添加了mobile字段

刷新一下数据库 SQLyog，就可以看到tb_user

2.用户注册业务实现__注册后端业务逻辑实现

我将用户注册页面业务逻辑进行需求分析

用户注册接口设计和定义
设计接口基本思路
• 对于接口的设计，我们要根据具体的业务逻辑，设计出适合业务逻辑的接口。
• 设计接口的思路：
• 分析要实现的业务逻辑：
• 明确在这个业务中涉及到几个相关子业务。
• 将每个子业务当做一个接口来设计。
• 分析接口的功能任务，明确接口的访问方式与返回数据：
• 请求方法（如GET、POST、PUT（修改）、DELETE等）。
• 请求地址。
• 请求参数（如路径参数、查询字符串、表单、JSON等）。
• 响应数据（如HTML、JSON等）。

那么来吧，第一个：

step1. 在view下定义一个提交注册post请求：

    def post(self,request):
        """提供用户注册逻辑"""

        # 校验参数

step2. 校验参数当然用form表单进行业务逻辑。所以在users下新建forms.py
把所有注册页面要验证的都写进去。

这些前端都会做，但是为什么后端还要做。因为前端可以直接绕过。

@@@ 通过 ajax 定义接口来判断用户名和手机号是否已经注册过。后面弄。 @@@

写好这些，就到view.py 中去调用，然后尝试运行看看是否正常

如果都正常，我们现在用postman 来发送数据，保存注册信息。
把注册页面地址输入进postman： http://127.0.0.1:8000/users/register/
注意body设置如下：

写入注册页面各符合定义规则的字段和信息，执行“send”，检查 Preview 看结果报错，来，分析一下啊。CSRF verification failed. 很清楚啊，因为有CSRF 保护啊，所以我们在调试的时候，注意这个点，可以先去关闭它。

因为现在不是用前端而是用postman

现在再send一下postman的Preview就ok了。

@@@ 千万注意，如果view.py 方法里面的return 缩进出现问题（往里多一个tab缩进），那么postman 会执行上面send后，报错为：

chapter2 总结：

class RegisterView(View):
    """用户注册"""

    def get(self, request):
        """
        提供注册界面
        :param request: 请求对象
        :return: 注册界面
        """
        return render(request, 'register.html')

    def post(self, request):
        """
        实现用户注册
        :param request: 请求对象
        :return: 注册结果
        """
        pass

3. 注册前端业务逻辑实现

思路和方法： 使用Vue.js的双向绑定实现用户的交互和页面局部刷新效果。
用户注册页面绑定Vue数据

<div id="app">
    <body>
    ......
    </body>
</div>

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>
 </form>

实操：
在register.html中导入vue

需要导入register，但是static–js中，没有准备，所以register.js 可能是目前唯一一个需要自己写js的。后面可能还有
在js下新建一个register.js
可以通过它再回炉一次js和vue怎么玩。

v-show 控制错误信息展示or不展示

把密码，和确认密码、手机号也绑定下和触发失焦和报错抛出

@@@ HTML 的span中 style=“display：none” 就相当于现在我们的v-show=True

现在vue能操作操作这些元素码？肯定还不能
想想，有没有把操作界面都绑定到vue？

所以要添加绑定，通过

Django全栈开发_billshop 商城项目 _3 注册功能的具体实现（后续有图形和验证码功能）【高能总结】

然后到register.js 中创建一个new对象

同意的勾选框是check box 类型，也要再html中做相关设置，是必选项。同时，它不存在失焦
，而是“单击”事件，用change

再回看我们的v-show要显示的错误信息，如{{error_name_message}}，要用 js 来控制它，绑定js中的错误信息。
密码等都是类似的，需要就弄

把方法写入

现在我们前端在做注册了，先把CSRF 校验打开。同时对register.html加入{% csrf_token %}
它会在html中加入一个隐藏域

隐藏域，前端，是不是呢！

现在所有的数据都还没有真正验证，不让它提交，所以我们要写个方法，如果这个方法通过了，我就让你提交注册，那么这个方法将被卸载register.js中。

同时，写了这句之后，你现在是无法提交的，因为数据不验证，我不让你提交：

现在重启一下，可以通过前端的页面代码看到无法提交。
所以我下面要对哪些需要验证的字段信息的方法进行验证，增加到on_submit中

其中， this . 相当于是告诉调用的是上面methods中自己的方法，相当于类里面的self

还需要校验条件，写入具体的校验细则：
这时候运行，理论上用户名失焦后，会验证并有错就提示，但是实际不是啊

更正一处笔误，

let re=。。。否则re单个正则变量总是会走else 分支
{5-20} 要改成{5，20}，否则5~20位的数字量，会被认为是字符。

原因如下：
因为这样的模板方法， vue 和 django 都是这样的，那么现在系统懵了，到底是谁，

所以我们要更改，因为改vue更方便一些，所以…
step1 设置修改语法命令

step2 模板 {{ }} 改成 [[ ]]

运行就可以看到用户名检验功能和提示了。

但是还有个需要优化的，我们不希望Vue渲染延迟，所以我们register.html 的form表单部分，加上v-cloak属性，直接加即可。
意思就是等Vue加载完

4. 完善前端业务逻辑

尝试真实注册，输入用户名密码和手机号，勾选同意，点击注册，

但有时候也会报错，是django框架自己的错误，所以在这种错误时，需要百度一下，看看怎么更正掉本身的潜在bug。
UnicodeDecodeError：‘gbk’ codec can‘t byte 0xa6 in position 9737：illegal multibyte sequence
ERROR basehttp 154