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

举报
程序员一诺python 发表于 2025/07/16 21:24:46 2025/07/16
【摘要】 欢迎来到美多商城！ 项目需求分析 1. 项目主要页面介绍 2. 归纳项目主要模块 3. 知识要点 项目架构设计 1. 项目开发模式 2. 项目运行机制 项目介绍 创建工程 1. 准备项目代码仓库 3. 创建美多商城工程 配置开发环境 1. 新建配置文件 2. 指定开发环境配置文件 配置Jinja2模板引擎 1. 安装Jinja2扩展包 配置MySQL数据库 3. 安装PyMyS

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

https://bbs.huaweicloud.com/blogs/455836

https://bbs.huaweicloud.com/blogs/453363

https://bbs.huaweicloud.com/blogs/453508

全套教程部分目录：

图形验证码

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

1. 图形验证码接口设计

1.请求方式

选项 方案
请求方法 GET
请求地址 image_codes/(?P[\w-]+)/
>
2.请求参数：路径参数
参数名 类型 是否必传 说明
uuid string 是 唯一编号
>
3.响应结果：image/jpg

2. 图形验证码接口定义

1.图形验证码视图

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
class ImageCodeView(View):
    """图形验证码"""

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

2.总路由

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# verifications


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

3.子路由

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# 图形验证码


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

图形验证码后端逻辑

1. 准备captcha扩展包

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

可能出现的错误

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

解决办法

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

2. 准备Redis数据库

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
"verify_code": { # 验证码
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://127.0.0.1:6379/2",
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
        }
    },

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
check_image_code(){
    if(!this.image_code) {
        this.error_image_code_message = '请填写图片验证码';
        this.error_image_code = true;
    } else {
        this.error_image_code = false;
    }
},

3.图形验证码校验效果

图形验证码

短信验证码逻辑分析

知识要点

  1. 保存短信验证码是为注册做准备的。
  2. 为了避免用户使用图形验证码恶意测试，后端提取了图形验证码后，立即删除图形验证码。
  3. Django不具备发送短信的功能，所以我们借助第三方的容联云通讯短信平台来帮助我们发送短信验证码。

容联云通讯短信平台

1. 容联云通讯短信平台介绍

1.容联云官网

  • 容联云通讯网址：[
  • 注册并登陆

2.容联云管理控制台

3.容联云创建应用

4.应用申请上线，并进行资质认证

5.完成资质认证，应用成功上线

![](https://fileserver.developer.huaweicloud.com/FileServer/getFile/communitytemp/20250716/community/383/461/571/0001696944383461571.202507

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
5G diango Python 后端
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入