Django实现注册登录

注册逻辑

1. 生成页面的图片验证码，需要两种触发方式： 默认执行，点击执行

2. 获取输入的用户名

   1. 利用正则校验用户名的合法性

   2. 当用户名正则校验通过，向 后端 发送请求，校验 用户名是否重复

3. 获取密码

   1. 利用正则校验密码的合法性

4. 获取确认密码

   1. 校验 确认密码和密码 是否一致

5. 获取手机号

   1. 利用正则校验手机号的合法性

   2. 当手机号正则校验通过，向 后端 发送请求，校验手机号是否重复

6. 获取用户输入的验证码

   1. 校验验证码是否存在

7. 校验是否选择复选框，必须勾选

8. 点击注册按钮，将信息提交到后端

设计用户表

用户表： 用户名、密码、手机号

继承django内置的用户模型类： AbstractUser, 重写自己的字段，但是需要在 settings.py 中 指明当前的用户模型类

在配置文件中指明使用的模型类

# 指定用户模型类
AUTH_USER_MODEL = 'users.User'  # app.模型类

迁移模型类

python manage.py makemigrations users
python manage.py migrate users

用户名重复性校验

• 主路由匹配，分布式路由匹配

• 通过路由匹配，获取路径中的用户名，传递给视图类中的get函数。

• 在处理函数中，根据用户名，进行查询，得到对应的用户数量，结果>0则说明重复，否则不重复。

• 返回结果

路由匹配

视图接口

Vue前端用户名校验

• 用户在文本框输入用户名

• 使用v-model做数据的双向绑定

• 输入完成之后，触发 失焦事件(blur), 执行 校验 用户名的 方法

密码的校验

密码以字母开头,长度在6-18之间,允许字母数字和下划线

手机号重复性校验

手机号传递
GET  /users/check/mobile/xxxx/

路由匹配

视图接口

Vue前端手机号校验==

• 用户在文本框输入手机号

• 通过 v-model 获取 手机号

• 输入完成之后，触发 失焦事件(blur), 执行 校验 手机号的 方法

图片验证码

uuid, 唯一身份标识码， 在用户注册之前，网站没有任何东西来区分不同的客户端， 因此在客户端生成一个 uuid， django中通过不同的uuid来区分不同的客户端。

图片验证码生成与展示

django后端

        路由匹配

         视图接口

Vue前端加载图片验证码

• 定义方法genImageCode

  • 生成uuid

  • 拼接图片验证码的url

• 将拼接好的图片验证码url绑定到 img 标签中

• 默认的图片验证码，初始加载页面时，需要 在钩子函数中 执行方法

• 主动生成图片验证码，定义图片的点击事件，触发方法，生成新的uuid，重新请求图片验证码

图片验证码认证

路由配置

视图接口

        1. 接收前端发送的参数，imageCodeID & imageCode
        2. 取出redis中的 图片验证码
            如果取不到，说明过期，响应204
            如果取到验证码，进行对比，注意： 统一大小写
        3. 根据对比结果，返回响应
            对比成功，响应200
            对比失败，响应204

用户注册

点击注册按钮，需要调用之前所有的校验方法，再重新校验一次

1.获取数据

2.校验参数

3.保存入库

4.返回结果

如果注册失败，可以d窗显示注册失败

前端传入 userName, pwd, mobile, agree

验证参数

存入数据库

返回响应

登录功能 登录流程

1.前端用户输入用户名和密码 经过post login/表单参数

后端1.接收用户信息

        2.对用户信息进行认证

        3.返回认证结果

登录成功 200 返回该用户信息

登录失败 爆400状态码

成功 存储用户信息

失败 d窗显示登录失败

1. 获取前端数据
        # 前端发送post 数据{user:xxx, pwd:xxx}

2. 验证用户
        # user = authenticate(username=username,password=password)

# 用户存在，验证密码

        #密码正确
        #会话保持,django后端只需要简单设置session，返回的响应会带着sessionid---->Vue代理处理cookie存储

        验证未通过
        返回Response({"code":204, "msg":"用户名或密码不正确！"})

退出登录

vue前端

        不显示退出登录框

        清空本地登录信息

        清空vuex登录信息

django后端

前端Vue代理会处理sessionid的存储及Cookie信息的携带删除会话

使用jwt会话保持的退出：

只需要 删除 localStorage中存储的token即可