【Django开发】前后端分离django美多商城项目第4篇：图形验证码,图形验证码接口设计和定义【附代码文档】

教程总体简介：欢迎来到美多商城！、项目需求分析、项目架构设计、项目介绍、创建工程、配置开发环境、配置Jinja2模板引擎、配置MySQL数据库、配置Redis数据库、配置工程日志、配置前端静态文件、工程创建和配置、项目准备、收货地址、展示地址前后端逻辑、修改地址前后端逻辑、删除地址前后端逻辑、设置默认地址、修改地址标题、修改密码、用户中心、商品数据库表设计、SPU和SKU、首页广告数据库表分析、商品信息数据库表分析、文件存储方案FastDFS、准备商品数据、容器化方案Docker、Docker和FastDFS上传和下载文件、录入商品数据和图片数据、首页广告、展示首页商品频道分类、展示首页商品广告、自定义Django文件存储类、商品列表页分析、商品列表页、列表页面包屑导航、列表页分页和排序、列表页热销排行、全文检索方案Elasticsearch、商品搜索、Haystack扩展建立索引、渲染商品搜索结果、商品详情页分析和准备、展示详情页数据、商品详情页、统计分类商品访问量、设计浏览记录存储方案、保存和查询浏览记录、用户浏览记录、商品、购物车存储方案、购物车管理、添加购物车、展示购物车、修改购物车、删除购物车、全选购物车、合并购物车、展示商品页面简单购物车、购物车、订单、结算订单、创建订单数据库表、保存订单基本信息和订单商品信息、使用事务保存订单数据、展示用户注册页面、创建用户模块子应用、追加导包路径、定义用户模型类、迁移用户模型类、用户模型类、用户注册业务逻辑分析、用户注册接口设计和定义、提交订单、使用乐观锁并发下单、展示提交订单成功页面、我的订单、订单支付功能、保存订单支付结果、评价订单商品、详情页展示评价信息、评价订

全套教程部分目录：

图形验证码

图形验证码接口设计和定义

1. 图形验证码接口设计

1.请求方式

选项	方案
请求方法	GET
请求地址	image_codes/(?P[\w-]+)/

2.请求参数：路径参数

参数名	类型	是否必传	说明
uuid	string	是	唯一编号

3.响应结果：image/jpg

2. 图形验证码接口定义

1.图形验证码视图

class ImageCodeView(View):
    """图形验证码"""

    def get(self, request, uuid):
        """
        :param request: 请求对象
        :param uuid: 唯一标识图形验证码所属于的用户
        :return: image/jpg
        """
        pass

2.总路由

  
  
# verifications
  
  
url(r'^', include('verifications.urls')),

3.子路由

  
  
# 图形验证码
  
  
url(r'^image_codes/(?P<uuid>[\w-]+)/$', views.ImageCodeView.as_view()),

图形验证码后端逻辑

1. 准备captcha扩展包

提示：captcha扩展包用于后端生成图形验证码

可能出现的错误

报错原因：环境中没有Python处理图片的库：PIL

解决办法

安装Python处理图片的库：pip install Pillow

2. 准备Redis数据库

准备Redis的2号库存储验证码数据

"verify_code": { # 验证码
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/2",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    },

3. 图形验证码后端逻辑实现

class ImageCodeView(View):
    """图形验证码"""

    def get(self, request, uuid):
        """
        :param request: 请求对象
        :param uuid: 唯一标识图形验证码所属于的用户
        :return: image/jpg
        """
        # 生成图片验证码
        text, image = captcha.generate_captcha()

        # 保存图片验证码
        redis_conn = get_redis_connection('verify_code')
        redis_conn.setex('img_%s' % uuid, constants.IMAGE_CODE_REDIS_EXPIRES, text)

        # 响应图片验证码
        return http.HttpResponse(image, content_type='image/jpg')

图形验证码前端逻辑

1. Vue实现图形验证码展示

1.register.js

mounted(){
    // 生成图形验证码
    this.generate_image_code();
},
methods: {
    // 生成图形验证码
    generate_image_code(){
        // 生成UUID。generateUUID() : 封装在common.js文件中，需要提前引入
        this.uuid = generateUUID();
        // 拼接图形验证码请求地址
        this.image_code_url = "/image_codes/" + this.uuid + "/";
    },
    ......
}

2.register.html

<li>
    <label>图形验证码:</label>
    <input type="text" name="image_code" id="pic_code" class="msg_input">
    <img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code">
    <span class="error_tip">请填写图形验证码</span>
</li>

3.图形验证码展示和存储效果

2. Vue实现图形验证码校验

1.register.html

<li>
    <label>图形验证码:</label>
    <input type="text" v-model="image_code" @blur="check_image_code" name="image_code" id="pic_code" class="msg_input">
    <img :src="image_code_url" @click="generate_image_code" alt="图形验证码" class="pic_code">
    <span class="error_tip" v-show="error_image_code">[[ error_image_code_message ]]</span>
</li>

2.register.js

check_image_code(){
    if(!this.image_code) {
        this.error_image_code_message = '请填写图片验证码';
        this.error_image_code = true;
    } else {
        this.error_image_code = false;
    }
},