美多商场 - 用户部分 - 1

1 用户模型类

Django提供了认证系统，文档资料可参考此链接https://yiyibooks.cn/xx/Django_1.11.6/topics/auth/index.html

Django认证系统同时处理认证和授权。简单地讲，认证验证一个用户是否它们声称的那个人，授权决定一个通过了认证的用户被允许做什么。 这里的词语“认证”同时指代这两项任务，即Django的认证系统同时提供了认证机制和权限机制。

Django的认证系统包含：

1. 用户
2. 权限：二元（是/否）标志指示一个用户是否可以做一个特定的任务。
3. 组：对多个用户运用标签和权限的一种通用的方式。
4. 一个可配置的密码哈希系统
5. 用户登录或内容显示的表单和视图
6. 一个可插拔的后台系统

Django默认提供的认证系统中，用户的认证机制依赖Session机制，我们在本项目中将引入JWT认证机制，将用户的身份凭据存放在Token中，然后对接Django的认证系统，帮助我们来实现：

• 用户的数据模型
• 用户密码的加密与验证
• 用户的权限系统

1.1 Django用户模型类

Django认证系统中提供了用户模型类User保存用户的数据，默认的User包含以下常见的基本字段：

• username

  必选。 150个字符以内。 用户名可能包含字母数字，_，@，+ . 和-个字符。在Django更改1.10：max_length从30个字符增加到150个字符。

• first_name

  可选（blank=True）。 少于等于30个字符。

• last_name

  可选（blank=True）。 少于等于30个字符。

• email

  可选（blank=True）。 邮箱地址。

• password

  必选。 密码的哈希及元数据。 （Django 不保存原始密码）。 原始密码可以无限长而且可以包含任意字符。

• groups

  与Group 之间的多对多关系。

• user_permissions

  与Permission 之间的多对多关系。

• is_staff

  布尔值。 指示用户是否可以访问Admin 站点。

• is_active

  布尔值。 指示用户的账号是否激活。 我们建议您将此标志设置为False而不是删除帐户；这样，如果您的应用程序对用户有任何外键，则外键不会中断。它不是用来控制用户是否能够登录。 在Django更改1.10：在旧版本中，默认is_active为False不能进行登录。

• is_superuser

  布尔值。 指定这个用户拥有所有的权限而不需要给他们分配明确的权限。

• last_login

  用户最后一次登录的时间。

• date_joined

  账户创建的时间。 当账号创建时，默认设置为当前的date/time。

1.1.1 常用方法

• set_password(raw_password)

  设置用户的密码为给定的原始字符串，并负责密码的。 不会保存User 对象。当None为raw_password 时，密码将设置为一个不可用的密码。

• check_password(raw_password)

  如果给定的raw_password是用户的真实密码，则返回True，可以在校验用户密码时使用。

1.1.2 管理器方法

管理器方法即可以通过User.objects.进行调用的方法。

• create_user(username, email=None, password=None, *\extra_fields*)

  创建、保存并返回一个User对象。

• create_superuser(username, email, password, *\extra_fields*)

  与create_user() 相同，但是设置is_staff 和is_superuser 为True。

1.2 创建自定义的用户模型类

Django认证系统中提供的用户模型类及方法很方便，我们可以使用这个模型类，但是字段有些无法满足项目需求，如本项目中需要保存用户的手机号，需要给模型类添加额外的字段。

Django提供了django.contrib.auth.models.AbstractUser用户抽象模型类允许我们继承，扩展字段来使用Django认证系统的用户模型类。

我们现在在meiduo/meiduo_mall/apps中创建Django应用users，并在配置文件中注册users应用。

• 在创建好的应用models.py中定义用户的用户模型类。

class User(AbstractUser):
    """用户模型类"""
    mobile = models.CharField(max_length=11, unique=True, verbose_name='手机号')

    class Meta:
        db_table = 'tb_users'
        verbose_name = '用户'
        verbose_name_plural = verbose_name

我们自定义的用户模型类还不能直接被Django的认证系统所识别，需要在配置文件中告知Django认证系统使用我们自定义的模型类。

• 在配置文件中进行设置

AUTH_USER_MODEL = 'users.User'

AUTH_USER_MODEL 参数的设置以点.来分隔，表示应用名.模型类名。

注意：Django建议我们对于AUTH_USER_MODEL参数的设置一定要在第一次数据库迁移之前就设置好，否则后续使用可能出现未知错误。

• 执行数据库迁移

python manage.py makemigrations
python manage.py migrate

2 注册

创建好用户模型类后，我们开始来实现第一个业务逻辑——用户注册。

2.1 设计接口的思路

• 分析要实现的业务逻辑，明确在这个业务中需要涉及到几个相关子业务，将每个子业务当做一个接口来设计。
• 分析接口的功能任务，明确接口的访问方式与返回数据：
  • 接口的请求方式，如GET 、POST 、PUT等
  • 接口的URL路径定义
  • 需要前端传递的数据及数据格式（如路径参数、查询字符串、请求体表单、JSON等）
  • 返回给前端的数据及数据格式

在前后端分离的应用模式中，我们作为后端开发人员设计后端接口时，可以不用考虑返回给前端数据后，前端如何处理，这是前端开发人员的工作，我们只需明确我们要保存的或者要返回的是什么数据即可。

明确上述每一点后，即可开始编写接口。

2.2 注册业务接口分析

在用户注册中，需要实现以下接口：

• 图片验证码
• 短信验证码
• 用户名判断是否存在
• 手机号判断是否存在
• 注册保存用户数据

图片验证码、短信验证码考虑到后续可能会在其他业务中也用到，因此我们将图片验证码独立，创建一个新应用verifications，在此应用中实现图片验证码、短信验证码。

3 图片验证码

3.1 后端接口设计：

访问方式： GET /image_codes/(?P<image_code_id>[\w-]+)/

请求参数： 路径参数

参数	类型	是否必须	说明
image_code_id	uuid字符串	是	图片验证码编号

返回数据：验证码图片

视图原型：

图片验证码在一个新的应用中处理，新建应用verifications

# url('^image_codes/(?P<image_code_id>[\w-]+)/$', views.ImageCodeView.as_view()), 
class ImageCodeView(APIView):
    """
    图片验证码
    """
    pass

这个ImageCodeView继承APIView即可，原因分析如下：

因为这个视图逻辑，不需要校验参数，因为这个参数由url路由中的正则就可以校验，所以这里压根就不用考虑数据校验，这里也不需要查询数据库，所以也不需要做序列化操作。那么其实说白了，就是不需要序列化器。

那么DRF提供的类视图中只有APIView，可不用序列化器，其他的类视图都需要设置序列化器。 

注册如下：

3.2 具体视图实现

首先需要用到第三方的captcha，来生成图片验证码，所以需要copy资料：

copy到meduo_mall的libs中：

在verifications/views.py中实现视图：

class ImageCodeView(APIView):
    """
    图片验证码
    """

    def get(self, request, image_code_id):
        """
        获取图片验证码
        """
        # 生成验证码图片
        text, image = captcha.generate_captcha()

        redis_conn = get_redis_connection("verify_codes")
        redis_conn.setex("img_%s" % image_code_id, constants.IMAGE_CODE_REDIS_EXPIRES, text)

        # 固定返回验证码图片数据，不需要REST framework框架的Response帮助我们决定返回响应数据的格式
        # 所以此处直接使用Django原生的HttpResponse即可
        return HttpResponse(image, content_type="images/jpg")

说明：

django-redis提供了get_redis_connection的方法，通过调用get_redis_connection方法传递redis的配置名称可获取到redis的连接对象，通过redis连接对象可以执行redis命令。

 这里有三点需要分析：

• get_redis_connection是获取redis连接对象的方法，参数为获取的是哪个redis连接配置项，如下：（verify_code专门存储图片验证码）

我们需要在配置文件中添加一个新的redis配置，用于存放验证码数据

CACHES = {
    "default": {
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/0",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    },
    "session": {
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/1",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    },
    "verify_codes": {
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/2",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    }
}

• 过期时间： 在verifications应用中新建constants，然后增加图片验证码过去时间

• 最后是使用HttpResponse返回的响应

问题一，为啥还能返回HttpResponse，不是应该返回Response对象么?

首先Response是间接继承HttpResponse的，而视图本身就应该返回的是HttpResponse。在DRF中可以返回Response，主要是因为Response继承了HttpResponse。

问题二，为啥不返回Response？

这是因为Response会将内容交给json渲染器进行数据格式转换，如下：

3.3 url配置

配置视图的url：

配置应用的url：

3.4 设置域名

我们现在为前端和后端分别设置两个不同的域名

位置	域名
前端	www.meiduo.site
后端	api.meiduo.site

但是这个域名要真想处理的话，我们需要购买域名，那么我们又不想花钱，就是想用于测试怎么办？

我们可以配置本地域名，编辑/etc/hosts文件，可以设置本地域名

Ubuntu中：

sudo vim /etc/hosts

在文件中增加两条信息

127.0.0.1   api.meiduo.site
127.0.0.1   www.meiduo.site

windows系统中若设置本地域名，hosts文件在如下目录：

C:\Windows\System32\drivers\etc

还有一点需要配置，我们想通过api.meiduo.site访问后端django项目，那就需要修改settings配置中的ALLOWED_HOSTS：

ALLOWED_HOSTS = ['api.meiduo.site', '127.0.0.1', 'localhost', 'www.meiduo.site']

既然后端限定要求api.meiduo.site访问，那么前端在访问后端接口的时候，每次都写api.meiduo.site会很麻烦，我们在前端front_end_pc/js目录中，创建host.js文件用以为前端保存后端域名

var host = 'http://api.meiduo.site:8000';

在所有需要访问后端接口的前端页面中都引入host.js，使用host变量即可指代后端域名。

3.5 测试后端逻辑

接下来我们就可以测试一下图片验证码的后端逻辑了，启动程序，报错：

缺少PIL，这是因为我们用到了captcha，这个captcha是生成图片验证码的，要用到图片相关的包PIL。

我们安装Pillow即可：（为啥缺少的是PIL，但我们安装的缺是Pillow，这是因为PIL安装比较麻烦，会有各种问题，所以我们就安装了可以完全替代PIL的Pillow包）

再次启动：

访问url：

还需要确定一件事情就是redis数据库存储是否成功：

3.6 启动问题

大家在启动的时候，会发现比以前多了很多红色的Debug信息，这是以为我们自己添加了日志的配置。

3.7 前端Vue代码：

js/register.js

data: {
    ...
    image_code_id: '',  // 图片验证码编号
    image_code_url: '',  // 验证码图片路径
},
mounted: function() {
    this.generate_image_code();
},
methods: {
    // 生成uuid
    generate_uuid: function(){
        var d = new Date().getTime();
        if(window.performance && typeof window.performance.now === "function"){
            d += performance.now(); //use high-precision timer if available
        }
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            var r = (d + Math.random()*16)%16 | 0;
            d = Math.floor(d/16);
            return (c =='x' ? r : (r&0x3|0x8)).toString(16);
        });
        return uuid;
    },
    // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
    generate_image_code: function(){
        // 生成一个编号
        // 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
        this.image_code_id = this.generate_uuid();

        // 设置页面中图片验证码img标签的src属性
        this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
    },
    ...
}

3.8 对图片验证码代码进行测试

4 短信验证码

4.1 业务处理流程

1. 检查图片验证码
2. 检查是否在60s内有发送记录
3. 生成短信验证码
4. 保存短信验证码与发送记录
5. 发送短信

4.2 后端接口设计：

访问方式： GET /sms_codes/(?P<mobile>1[3-9]\d{9})/?image_code_id=xxx&text=xxx

请求参数： 路径参数与查询字符串参数

参数	类型	是否必须	说明
mobile	str	是	手机号
image_code_id	uuid字符串	是	图片验证码编号
text	str	是	用户输入的图片验证码

返回数据： JSON

返回值	类型	是否必传	说明
message	str	否	OK，发送成功

视图原型：在应用verifications中创建视图SMSCodeView(GenericAPIView)

# url('^sms_codes/(?P<mobile>1[3-9]\d{9})/$', views.SMSCodeView.as_view()),
class SMSCodeView(GenericAPIView):
    """
    短信验证码
    传入参数：
        mobile, image_code_id, text
    """
    pass

4.3 后端实现

在verifications/serializers.py中定义序列化器，用以对参数校验

class ImageCodeCheckSerializer(serializers.Serializer):
    """
    图片验证码校验序列化器
    """
    image_code_id = serializers.UUIDField()
    text = serializers.CharField(max_length=4, min_length=4)

    def validate(self, attrs):
        """
        校验
        """
        image_code_id = attrs['image_code_id']
        text = attrs['text']
        # 查询真实图片验证码
        redis_conn = get_redis_connection('verify_codes')
        real_image_code_text = redis_conn.get('img_%s' % image_code_id)
        if not real_image_code_text:
            raise serializers.ValidationError('图片验证码无效')

        # 删除图片验证码
        redis_conn.delete('img_%s' % image_code_id)

        # 比较图片验证码
        real_image_code_text = real_image_code_text.decode()
        if real_image_code_text.lower() != text.lower():
            raise serializers.ValidationError('图片验证码错误')

        # 判断是否在60s内
        mobile = self.context['view'].kwargs['mobile']
        send_flag = redis_conn.get("send_flag_%s" % mobile)
        if send_flag:
            raise serializers.ValidationError('请求次数过于频繁')

        return attrs

 在verifications/views.py中定义实现视图：

class SMSCodeView(GenericAPIView):
    """
    短信验证码
    传入参数：
        mobile, image_code_id, text
    """
    serializer_class = ImageCodeCheckSerializer

    # GET /sms_codes/(?P<mobile>1[3-9]\d{9})/?image_code_id=xxx&text=xxx
    def get(self, request, mobile):
        # 校验参数（由序列化器完成）
        serializer = self.get_serializer(data=request.query_params)
        serializer.is_valid(raise_exception=True)

        # 生成短信验证码
        sms_code = "%06d" % random.randint(0, 999999)
        print("短信验证码:", sms_code)
        # 保存短信验证码
        redis_conn = get_redis_connection("verify_codes")
        redis_conn.setex("sms_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)
        # 保存发送记录
        redis_conn.setex("send_flag_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, 1)

        # 发送短信
        # 使用云通讯第三方平台
        try:
            ccp = CCP()
            expires = constants.SMS_CODE_REDIS_EXPIRES // 60
            result = ccp.send_template_sms(mobile, [sms_code, expires], constants.SMS_CODE_TEMP_ID)
        except Exception as e:
            logger.error("发送验证码短信【异常】[ mobile: %s, message: %s]" % (mobile, e))
            return Response({"message": "failed"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
        else:
            if result == 0:
                return Response({"message": "OK"})
            else:
                logger.error("发送验证码短信【异常】[ mobile: %s]" % mobile)
                return Response({"message": "failed"}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)

因为这里我们要用到序列化器，所以就继承了GenericAPIView，这样的话，可以指定serializer_class，然后通过get_serializer就可以实例化序列化器了。

注意： 有些人可能会问了，既然继承了GenericAPIView，那为啥不设置queryset属性，只设置了serializer_class属性了呢？注意，这里用到谁，就设置谁。GenericAPIView没有要求必须都设置的。

发送间隔常量如下：

4.3.1 send_flag标记问题

为啥要保存一个send_flag_xx？

这个send_flag什么时候用到了？这个是在发送短信验证码序列化器中用到了。

send_flag标记的目的在于防止用户1分钟内多次请求，获取短信验证码逻辑：

那有些同学说，这个逻辑在前端做处理了呀，1分钟倒计时之后才能再次发送短信验证码。是的，但是用户是可以绕过前端，使用postman来发起请求，获取短信验证码的。

还有个问题：那能不能不要这个标记，只存储sms_xxx行不行，利用他的有效期来处理这个逻辑行不？

不行的，因为短信验证码的有效期是：5分钟。

 4.3.2 云通信集成

发送短信验证码，但是需要用到云通讯的ccp，所以需要引入云通讯工具：将资料中的yuntongxun文件夹，直接copy到utils下，copy结果：

然后修改一下配置信息：

把上图中的三个配置信息，修改为自己云通讯的三个配置，如下图：

4.3.3 补充redis管道

我们来看一个问题，我们在保存短信验证码和发送记录的时候，做了两次redis的操作

这其实是比较耗费性能的，因为都是网络操作，Redis服务配置如下：

即使是本机的服务也是要进行网络通信的。

那怎么办呢？使用redis管道：

        # 保存短信验证码
        redis_conn = get_redis_connection("verify_codes")

        # redis_conn.setex("sms_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)
        # # 保存发送记录
        # redis_conn.setex("send_flag_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, 1)

        # redis管道
        pl = redis_conn.pipeline()
        pl.setex("sms_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, sms_code)
        # 保存发送记录
        pl.setex("send_flag_%s" % mobile, constants.SMS_CODE_REDIS_EXPIRES, 1)

        # 让管道通知redis执行命令
        pl.execute()

注意： 最后一定要执行管道。 

4.3.4 补充删除图片验证码的逻辑

我们要做一件事情，就是避免用户拿着同一个图片验证码，获取多次短信验证码。

如何避免呢？在获取到图片验证码之后，将redis中的图片验证码删除。

4.4 前端实现

修改register.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-注册</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/host.js"></script>
    <script type="text/javascript" src="js/vue-2.5.16.js"></script>
    <script type="text/javascript" src="js/axios-0.18.0.min.js"></script>
</head>
<body>
    <div class="register_con">
        <div class="l_con fl">
            <a class="reg_logo"><img src="images/logo.png"></a>
            <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
            <div class="reg_banner"></div>
        </div>

        <div class="r_con fr">
            <div class="reg_title clearfix">
                <h1>用户注册</h1>
                <a href="/login.html">登录</a>
            </div>
            <div class="reg_form clearfix" id="app" v-cloak>
                <form id="reg_form" @submit.prevent="on_submit">
                <ul>
                    <li>
                        <label>用户名:</label>
                        <input type="text" v-model="username" @blur="check_username" name="user_name" id="user_name">
                        <span v-show="error_name" class="error_tip">{{ error_name_message }}</span>
                    </li>                    
                    <li>
                        <label>密码:</label>
                        <input type="password" v-model="password" @blur="check_pwd" name="pwd" id="pwd">
                        <span v-show="error_password" class="error_tip">密码最少8位，最长20位</span>
                    </li>
                    <li>
                        <label>确认密码:</label>
                        <input type="password" v-model="password2" @blur="check_cpwd" name="cpwd" id="cpwd">
                        <span v-show="error_check_password" class="error_tip">两次输入的密码不一致</span>
                    </li>
                    <li>
                        <label>手机号:</label>
                        <input type="text" v-model="mobile" @blur="check_phone" name="phone" id="phone">
                        <span v-show="error_phone" class="error_tip">{{ error_phone_message }}</span>
                    </li>
                    <li>
                        <label>图形验证码:</label>
                        <input type="text" v-model="image_code" @blur="check_image_code" name="pic_code" id="pic_code" class="msg_input">
                        <img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code">
                        <span v-show="error_image_code" class="error_tip">{{ error_image_code_message }}</span>
                    </li>
                    <li>
                        <label>短信验证码:</label>
                        <input type="text" v-model="sms_code" @blur="check_sms_code" name="msg_code" id="msg_code" class="msg_input">
                        <a @click="send_sms_code" class="get_msg_code">{{ sms_code_tip }}</a>
                        <span v-show="error_sms_code" class="error_tip">{{ error_sms_code_message }}</span>
                    </li>
                    <li class="agreement">
                        <input type="checkbox" v-model="allow" @change="check_allow" name="allow" id="allow">
                        <label>同意”美多商城用户使用协议“</label>
                        <span v-show="error_allow" class="error_tip2">请勾选同意</span>
                    </li>
                    <li class="reg_sub">
                        <input type="submit" value="注 册" name="">
                    </li>
                </ul>                
                </form>
            </div>

        </div>

    </div>

    <div class="footer no-mp">
        <div class="foot_link">
            <a href="#">关于我们</a>
            <span>|</span>
            <a href="#">联系我们</a>
            <span>|</span>
            <a href="#">招聘人才</a>
            <span>|</span>
            <a href="#">友情链接</a>        
        </div>
        <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
        <p>电话：010-****888    京ICP备*******8号</p>
    </div>
    <script type="text/javascript" src="js/register.js"></script>
</body>
</html>

修改register.js

var vm = new Vue({
    el: '#app',
    data: {
        host: host,

        error_name: false,
        error_password: false,
        error_check_password: false,
        error_phone: false,
        error_allow: false,
        error_image_code: false,
        error_sms_code: false,
        error_name_message: '',
        error_image_code_message: '',
        error_phone_message: '',
        error_sms_code_message: '',

        image_code_id: '', // 图片验证码id
        image_code_url: '',

        sms_code_tip: '获取短信验证码',
        sending_flag: false, // 正在发送短信标志

        username: '',
        password: '',
        password2: '',
        mobile: '', 
        image_code: '',
        sms_code: '',
        allow: false
    },
    mounted: function(){
        this.generate_image_code();
    },
    methods: {
        // 生成uuid
        generate_uuid: function(){
            var d = new Date().getTime();
            if(window.performance && typeof window.performance.now === "function"){
                d += performance.now(); //use high-precision timer if available
            }
            var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = (d + Math.random()*16)%16 | 0;
                d = Math.floor(d/16);
                return (c =='x' ? r : (r&0x3|0x8)).toString(16);
            });
            return uuid;
        },
        // 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
        generate_image_code: function(){
            // 生成一个编号
            // 严格一点的使用uuid保证编号唯一， 不是很严谨的情况下，也可以使用时间戳
            this.image_code_id = this.generate_uuid();

            // 设置页面中图片验证码img标签的src属性
            this.image_code_url = this.host + "/image_codes/" + this.image_code_id + "/";
        },
        check_username: function (){
            var len = this.username.length;
            if(len<5||len>20) {
                this.error_name_message = '请输入5-20个字符的用户名';
                this.error_name = true;
            } else {
                this.error_name = false;
            }

        },
        check_pwd: function (){
            var len = this.password.length;
            if(len<8||len>20){
                this.error_password = true;
            } else {
                this.error_password = false;
            }        
        },
        check_cpwd: function (){
            if(this.password!=this.password2) {
                this.error_check_password = true;
            } else {
                this.error_check_password = false;
            }        
        },
        check_phone: function (){
            var re = /^1[345789]\d{9}$/;
            if(re.test(this.mobile)) {
                this.error_phone = false;
            } else {
                this.error_phone_message = '您输入的手机号格式不正确';
                this.error_phone = true;
            }

        },
        check_image_code: function (){
            if(!this.image_code) {
                this.error_image_code_message = '请填写图片验证码';
                this.error_image_code = true;
            } else {
                this.error_image_code = false;
            }    
        },
        check_sms_code: function(){
            if(!this.sms_code){
                this.error_sms_code_message = '请填写短信验证码';
                this.error_sms_code = true;
            } else {
                this.error_sms_code = false;
            }
        },
        check_allow: function(){
            if(!this.allow) {
                this.error_allow = true;
            } else {
                this.error_allow = false;
            }
        },
        // 发送手机短信验证码
        send_sms_code: function(){
            if (this.sending_flag == true) {
                return;
            } 
            this.sending_flag = true;

            // 校验参数，保证输入框有数据填写
            this.check_phone();
            this.check_image_code();

            if (this.error_phone == true || this.error_image_code == true) {
                this.sending_flag = false;
                return;
            }

            // 向后端接口发送请求，让后端发送短信验证码
            axios.get(this.host + '/sms_codes/' + this.mobile + '/?text=' + this.image_code+'&image_code_id='+ this.image_code_id, {
                    responseType: 'json'
                })
                .then(response => {
                    // 表示后端发送短信成功
                    // 倒计时60秒，60秒后允许用户再次点击发送短信验证码的按钮
                    var num = 60;
                    // 设置一个计时器
                    var t = setInterval(() => {
                        if (num == 1) {
                            // 如果计时器到最后, 清除计时器对象
                            clearInterval(t);
                            // 将点击获取验证码的按钮展示的文本回复成原始文本
                            this.sms_code_tip = '获取短信验证码';
                            // 将点击按钮的onclick事件函数恢复回去
                            this.sending_flag = false;
                        } else {
                            num -= 1;
                            // 展示倒计时信息
                            this.sms_code_tip = num + '秒';
                        }
                    }, 1000, 60)
                })
                .catch(error => {
                    if (error.response.status == 400) {
                        this.error_image_code_message = '图片验证码有误';
                        this.error_image_code = true;
                        this.generate_image_code();
                    } else {
                        console.log(error.response.data);
                    }
                    this.sending_flag = false;
                })
        },
        // 注册
        on_submit: function(){
            this.check_username();
            this.check_pwd();
            this.check_cpwd();
            this.check_phone();
            this.check_sms_code();
            this.check_allow();


        }
    }
});

5 跨域CORS

我们为前端和后端分别设置了两个不同的域名

位置	域名
前端	www.meiduo.site
后端	api.meiduo.site

现在，前端与后端分处不同的域名，我们需要为后端添加跨域访问的支持。

我们使用CORS来解决后端对跨域访问的支持。

使用django-cors-headers扩展

参考文档https://github.com/ottoyiu/django-cors-headers/

• 安装

pip install django-cors-headers

• 添加应用

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

• 中间层设置

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

• 添加白名单

# CORS
CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8080',
    'localhost:8080',
    'www.meiduo.site:8080',
    'api.meiduo.site:8000'
)
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

• 凡是出现在白名单中的域名，都可以访问后端接口
• CORS_ALLOW_CREDENTIALS 指明在跨域访问中，后端是否支持对cookie的操作。