django_01项目 图形验证码

图形验证码逻辑分析

请求图形验证码的两种方式

• 用户进入注册界面
• 用户点击图形验证码

大体逻辑分析

• 前端发送ajax请求图形验证码
  • js生成uuid
• 后端接收请求
  • 提取参数
  • 校验参数
  • 生成图片验证码
    • 验证码图片
    • 验证码内容
  • 保存图形验证码的内容和前端发送的uuid到redis
  • 响应图形验证码：return http.HttpResponse(image, content_type="image/jpg")


一、前端

这里需要注意，在用户进入到注册页面的时候我们就需要发送一个ajax请求获取图形验证码。所以我们需要在vue中用到mounted()。可以参考vue的生命周期

vue实现图形验证码的展示

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 + "/";
    },
    ......
}

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>

vue实现图形验证码的校验

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>

js

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