vue+django实现图片验证码验证

• 获取图片验证码、验证图片验证码

• 一、流程：

  • 1、前端在挂载页面时生成唯一的UUID向后端发起请求获取图片验证码
  • 2、后端接受请求并生成图片验证码，并以UUID为键，图片验证码的文本为值，以一定的有效期存储至redis服务器中
  • 3、后端将生成的图片验证码以图片类型返回给前端
  • 4、前端接受显示
  • 
  • 5、用户将页面上显示的验证码输入文本框、点击验证，并携带验证码以及UUID向后端发起请求
  • 6、后端接受请求，接受参数，校验参数。
  • 7、后端从redis中取出当前UUID验证码的文本，并与前端传入的验证码进行比对。
  • 7、后端返回相应的响应信息
  • 

•  二、后端接口代码：

  • 1、接口的定义
  • 
  • 2、视图函数、路由（生成图片验证码代码）

• import json
  from django.views import View
  from auth.captcha.captcha import captcha
  from django_redis import get_redis_connection
  from django import http
  
  
  
  class GenerateImageCode(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连接对象
          redis_conn.setex('img_%s' % uuid, 120, text) # 以img_uuid为key存储图片验证码的文本
  
          # 响应图片验证码
          return http.HttpResponse(image, content_type='image/jpg')

  from django.urls import re_path
  from auth.views import GenerateImageCode
  
  urlpatterns = [
      re_path(r'^image_code/(?P<uuid>[\w-]+)/$', GenerateImageCode.as_view())
  ]

• 三、前端代码的定义编写

  • 1、使用npm create project 在前端创建一个vue项目
  • 2、新建vue项目后，在vue.config.js中配置跨域请求代理

  • const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      transpileDependencies: true,
      
      lintOnSave:false,
      
      devServer: {
        open: true,
        host: 'localhost',
        port: 8080,
        https: false,
        //以上的ip和端口是我们本机的;下面为需要跨域的
        proxy: {//配置跨域
            '/api': {
                target: 'http://127.0.0.1:8000',//这里后台的地址模拟的;应该填写你们真实的后台接口
                ws: true,
                changOrigin: true,//允许跨域
                pathRewrite: {
                    '^/api': ''//请求的时候使用这个api就可以
                }
                //rewrite:(path)=>path.replace(/^\/api/,"")
            }
    
        }
    }
    })
    

  • 3、新建一个command.js文件用于生成唯一的UUID

  • var generateUUID=function(){
        let d = new Date().getTime();
        if(window.performance && typeof window.performance.now === "function"){
            d += performance.now(); //use high-precision timer if available
        }
        let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            let r = (d + Math.random()*16)%16 | 0;
            d = Math.floor(d/16);
            return (c=='x' ? r : (r&0x3|0x8)).toString(16);
        });
        return uuid;
    }
    export {
        generateUUID
    }

  • 4、新建一个login.vue组件，并编写相应逻辑代码

  • <template>
        <div id="master">
            <label for="">图形验证码：</label>
            <input type="text" v-model="input_image_code">
            <img :src="image_code" alt="" @click="get_image_code"><br/>
            <span v-show="show_errmsg_status">{{show_errmsg}}</span>
            <button @click="check_image_code">验证</button><br/>      
        </div>
    </template>
    <script>
    
    import axios from 'axios' 
    import { generateUUID } from '@/js/command' //导入command.js
        export default {
            
            data() {
                return {
                    image_code: '',
                    input_image_code:'',
                    UUID:'',
                    show_errmsg:'',
                    show_errmsg_status:false
                }
            },
            methods: {
                get_image_code() {
                    this.UUID=generateUUID()
                    this.image_code='http://127.0.0.1:8000/image_code/'+ this.UUID 
                },
                // 获取文本框中输入的验证码，向后端发起请求验证验证码
                check_image_code(){
                    axios.post('/api/image_code/'+this.UUID+'/',{
                        image_code:this.input_image_code,
                        responseType: 'json',
                    })
                    .then((res)=>{
                        if(res.data.errmsg==='ok'){
                            this.show_errmsg_status=true;
                            this.show_errmsg='验证成功'
                        }else{
                            this.show_errmsg_status=true;
                            this.show_errmsg='验证失败'
                        }
                    })
                    .catch(err=>{
                        console.log('失败')
                    })
                }
            },
            mounted () {
                // 页面挂载后调用方法获取后端验证码显示在页面上
                this.get_image_code();
            },
        }
    </script>
    
    <style scoped>
        *{
            margin: 0px;
            padding: 0px;
        }
        #master{
            text-align: center;
        }
        label{
            color: grey;
        }
        img{
            width: 100px;
            height: 30px;
            padding-top: 10px;
        }
    </style>

  • 5、在router文件夹下的index.js中配置login组件的路由

  • { path:'/login', name:'login',component:()=>import('@/views/login')},

  • 6、在main.js下导入router使用router

  • import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    
    
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')

  • 7、在app.vue下使用router视图

    <template>
      <div id="app">
        
          <!-- home视图 -->
          <router-view></router-view> 
          
    </div>
    </template>

• 四、测试 （django跨域配置）

   

  •