一个django的商城项目:登录页面的图片验证码和发送短信验证码

登录页面html和css

这里主要分享后端内容，所以简单写写html和css内容，完成后前端网页界面如下：
需要启动前端和后端服务器，前端live-server具体配置看：https://blog.csdn.net/paul0926/article/details/90750408

后端生成的图片验证码以及判断验证对错内容、发送短信验证码：

在django项目新建一个模块image_code，里面的views.py内容：

from django.http import HttpResponse
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework.generics import *
from shanghuishop.libs.captcha.captcha import captcha
from redis import StrictRedis
import random
import logging
# 容联云
from shanghuishop.libs.CCPRestSDK.sms import CCP

# 自己的包
from . import constants
from .serializers import *
# Create your views here.
# 日志操作
log = logging.getLogger('code')


class ImageCode(APIView):
    def get(self, request, image_id):
        # 1.生成验证码图片
        text, image = captcha.generate_captcha()
        # 创建redis对象,设置数据库
        sr = StrictRedis(host='localhost', port=6379, db=12)
        # 2.要保存验证码上的文字部分，key为uuid，值为text
        sr.set(image_id, text, constants.IMAGE_UUID_REDIS_EXPIRES)
        # 3.返回图片
        return HttpResponse(image, content_type='image/png')


class CodeTrueOrFalse(GenericAPIView):
    serializer_class = ImageTextSer

    def get(self, request, uuid, text, phone):
        # 1.校验图片验证码,用序列化器
        data = {
   'uuid': uuid, 'text': text, 'phone': phone}
        ser = self.get_serializer(data=data)
        print('##########################')
        if ser.is_valid(raise_exception=True):
            print('解析成功')
        else:
            print('失败')
        # print(request.query_params)  # 这个是个字典，值为get后拼接内容
        print(ser.validated_data)

        # 2.在3分钟内不再重复发送短信验证码
        # 3.生成短信验证码
        msg = '%04d' % random.randint(0, 9999)
        # 4.保存短信验证码到redis
        conn = StrictRedis(host='localhost', port=6379, db=12)
        # pipe管道，最后一起执行
        pipe = conn.pipeline()
        pipe.setex('%s_code' % phone, constants.PHONE_CODE_REDIS_EXPIRES, msg)
        pipe.setex('%s_flag' % phone, constants.PHONE_FLAG_REDIS_EXPIRES, 1)
        pipe.execute()
        # 5.发送短信 用的容联云，详情看容联云官网
        ccp = CCP()
        # 因为是测试，可以写死手机号码
        # 三个参数具体看官方api介绍
        res = ccp.send_template_sms(phone, [msg, constants.PHONE_CODE_REDIS_EXPIRES//60], 1)
        print('短信发送结果', res)
        # 6.返回响应数据
        return Response('ok')

urls.py跳转逻辑，注意项目下的urls.py也需要对应的配置

from django.conf.urls import url
from . import views

urlpatterns = [
    url(r'^(?P<image_id>[\w-]+)/$', views.ImageCode.as_view()),
    url(r'^(?P<uid>[\w-]+)/(?P<text>[\w]+)/(?P<phone>[\d]+)$', views.CodeTrueOrFalse.as_view()),
]

新建一个serializers.py写检验逻辑

from rest_framework import serializers
from django_redis import get_redis_connection
import logging
from users.models import Users
# 日志操作对象
log = logging.getLogger('code')


class ImageTextSer(serializers.Serializer):
    # 校验图片验证码
    uuid = serializers.UUIDField(required=True)
    text = serializers.CharField(required=True, max_length=4, min_length=4)
    phone = serializers.CharField(max_length=11, min_length=11)

    def validate(self, attrs)