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; } },