动态验证码问题

现在，我们的大多数网页或者APP一般都有用户登录功能，并且动态验证码也是必不可少的，那么它如何实现呢，看代码

<template>
  <el-form :model="user" :rules="rules" ref="loginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
    <header class="header">
      <img src="../../assets/logo.png" alt="">
    </header>
    <h3 class="title">系统登录</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="user.username" auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="user.password" auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-form-item prop="checkcode">
      <el-col :span="16">
        <el-input type="text" v-model="user.checkcode" auto-complete="off" placeholder="验证码"></el-input>
      </el-col>
      <el-col :span="8" class="text-right">
        <img @click="changeImg" :src="codeUrl" alt="">
        ／／这里是出现验证图片的地方
      </el-col>
    </el-form-item>
   <!-- <el-checkbox v-model="checked" checked class="remember">记住密码</el-checkbox>-->
    <el-form-item >
      <el-button type="primary"  @click="handleSubmit" :loading="logining">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  import {checkCodeUrl,login} from '../../api/api'
  export default {
    data() {
      return {
        logining: false,
        user: {
          username: '',
          password: '',
          checkcode:''
        },
        rules: {
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
          checkcode:[
            {required:true,message:'请输入验证码',trigger:'blur'}
          ],
        },
        codeUrl:checkCodeUrl,
        ／／这里是验证码图片的url地址
        checked: true
      };
    },
    methods: {
      handleSubmit(ev) {
        var _this = this;
        this.$refs.loginForm.validate(function(valid){
          if (valid) {
            _this.logining = true;
            login(_this.user).then(function (res) {
              _this.logining=false;
              if(res.data&&res.data.code==1){
                _this.$store.commit('login',true);
                _this.$router.push('/explain')
              }else{
                _this.$message(
                  {message: res.data.msg,
                    type: 'error'});
              }

            }).catch(function () {
              _this.logining=false;
              _this.$message(
                {message: '登录失败',
                type: 'error'});
            })
          }else{
            _this.$message(
              {message: '验证失败',
                type: 'error'});
            return false;
          }
      });
      },
      ／／这里是处理当我们点击时改变验证码的数字或字母
      changeImg(){
        this.codeUrl=checkCodeUrl+'?'+Date.now();
      }
    }
  }

</script>
<style lang="less">
  @import "../../style/login.less";
</style>

关于上面的checkCodeUrl在哪里呢，它是后台给我们的验证码图片的url，例如
let base = ‘http://192.168.1.110:8081/hhdj‘;

export default {
//验证码
checkCode:${base}/validatecode.jsp,
以上就是我们如何设置验证码图片的代码