[django项目] 用户注册登录模块复盘+总结

用户注册登录模块复盘+总结

前言

之前我们分别完成了注册模块与登录模块, 距离整个博客网站的搭建又近了一步

接下来对这两个模块做一下总结, 一是回顾之前的知识点, 二是整理自己的代码思路

小编自己首先想到两个问题:为什么不对每个模块做总结? 为什么不在项目的最后总结?

首先, 注册与登录虽然是两个模块, 其本质是在于对用户的各项信息进行校验, 所有的功能都是围绕这些信息进行的, 鉴于这种密切的联系, 更适合对二者进行统一总结

其次, 总结的是自己对知识的记忆和想法, 人记忆的容量是有限的, 时间隔久了就会淡化, 所以与其等到大结局写长篇大论, 不如趁热打铁, 先从硅步开始

不积跬步，无以至千里；不积小流，无以成江海 —<劝学> 荀 子

I. 功能设计分析

废话不多说直接上思维导图

II. 代码逻辑整理

1>用户注册流程

从我们运行后端服务的那一刻起, django中代码的马拉松就开始了

1.1>用户模型类创建

在编写好用户模型并迁移后, 我们的数据库中就已经创建好了我们所需要的用户表

表中的信息结构遵循User模型的配置

1.2>用户名&密码&手机号校验

打开到注册页面, 并输入用户名, 信息的校验就开始了

1. 前端js校验

2. 发送包含用户名的ajax给后端

3. 后端视图代码转给forms表单校验

4. 校验成功后返回前端响应:

   

手机号的校验与其相同

密码的校验则更简单:

1. 前端js校验

2. 出现错误则返回响应

   

3. 如果没有问题就不做声

1.3>图片&短信验证码校验

1. 生成图片验证码, 并展示在前端页面上, 验证码存储到session中
2. 用户输入手机号 和 图片验证码, 点击获取短信验证码后进入校验
3. 前端对参数格式进行简单的校验, 并修改获取短信验证码按钮为倒计时xx秒
4. ajax发送给后端进行校验, 视图函数顺带将request一同传给forms表单进行校验
5. 校验成功->生成短信验证码, 保存到redis数据库

1.4>立即注册用户

1. 用户输入短信验证码->点击注册开始注册前校验
2. 注册前校验: 用户名,密码,确认密码,手机号,短信验证码
3. 成功后写入mysql数据库, 前端展示消息恭喜你,注册成功!

2>用户登录

2.1>用户名密码校验

1. 前端js校验
2. 发送包含用户名密码的ajax给后端
3. 后端视图代码转给forms表单校验
4. 先进行有效性校验
5. 然后到后台数据库查询用户, 对输入的参数进行校验
6. 成功后返回前端信息恭喜登录成功!

2.2>登录状态保持

如果在登录前勾选了记住我选项:

1. 记住我的布尔值传到后端表单
2. 设置session保存时限, 可免登录x天
3. 如果之后的登录取消勾选了该选项
4. 设置session保存时限为0, 重启浏览器即清除登录状态

2.3>页面跳转

1. js接收到ajax响应成功的消息后
2. 判断前一个页面是什么
3. 跳转页面

3>用户退出登录

1. 当用户登录后, 点击退出登录
2. 后台清除session会话状态
3. 跳转到登录界面

III. 外部功能引用

1>生成图片验证码

我们使用了一个外部的包,来生成图片验证码

得到包之后不需要任何配置, 直接将其拷贝到你需要的位置, 使用方法:

	# 生成一个验证码, 随机生成字符串, 生成图片
    text, image = captcha.generate_captcha()
    ...
    # 返回验证码图片
    return HttpResponse(content=image, content_type="image/jpg")

外部包源码:下载地址

2>发送短信验证码-云通讯

云通讯可以帮助我们发送验证码, 具体使用方法前文已经讲过这里不再赘述, 参考链接

拿到这个包后需要修改sms.py中的key

使用时直接用固定写法:

import logging

from utils.json_response import json_response
from utils.res_code import Code, error_map
from utils.yuntongxun.sms import CCP

ccp = CCP()
try:
    # 参数分别是: 手机号码, [验证码, 有效期], 短信模板
    res = ccp.send_template_sms(mobile, [sms_code, constants.SMS_CODE_EXPIRES], "1")
    if res == 0:
        logger.info('发送短信验证码[正常][mobile: %s sms_code: %s]' % (mobile, sms_code))
    else:
        logger.error('发送短信验证码[失败][mobile: %s sms_code: %s]' % (mobile, sms_code))
        return json_response(errno=Code.SMSFAIL, errmsg=error_map[Code.SMSFAIL])
    except Exception as e:
        logger.error('发送短信验证码[异常][mobile: %s message: %s]' % (mobile, e))
        return json_response(errno=Code.SMSERROR, errmsg=error_map[Code.SMSERROR])

下载云通讯官方的demo下载地址, 或是使用这里已经封装好的下载地址

3>请求时自带csrf token

官方源码, 引用到所有base页面中, 一劳永逸

// 获取cookie
    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i].trim();
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    // 帮助我们判断请求是否是安全的
    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        // 如果对数据库有影响的方法,会被使用该方法
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }

    $.ajaxSetup({
        //beforeSend发送Ajax之前执行该方法, 利用上面的两个方法, 获取到cookie, 并且在发送ajax请求的时候, 自动带上csrf_token
        beforeSend: function(xhr, settings) {
            if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
            }
        }
    });

尾言

整理下来之后感觉收获良多, 之后的项目功能, 小编也会继续对每一阶段进行总结

经常复盘和总结是一个非常好的习惯, 能够帮助你复习之前的知识, 整理开发思路, 经常对自身进行总结, 也会使自己的认知能力得到质的飞跃, 希望你也能够养成经常复盘和总结的良好习惯