spring boot+vue 实现登录注册图形验证码功能

大家好我是程序员凡心，感谢大家支持我~！挑战全网最详细图形验证码

第一步导pom文件

第二步编写config

第三步编写CaptureController

第三步编写AccountController

第四步给实体类加个变量

第五步vue前端login页面

<el-form-item prop="name">
  <div style="display: flex;justify-content: center;margin: 20px 0">
  <el-input size="medium"  style="width: 160px;margin-top: 20px" placeholder="请输入图形验证码" prefix-icon="el-icon-user" v-model="user.verCode"></el-input>
  <img :src="captchaUtl"  @click="clickImg" width="160px" height="60px" style="margin-left: 10px" />
  </div>
</el-form-item>

clickImg(){
  this.key=Math.random();
  this.captchaUtl='http://localhost:9090/captcha?key='+this.key;
}

return{
  user:{},
  key:'',

}

mounted(){
  this.key=Math.random();
  this.captchaUtl='http://localhost:9090/captcha?key='+this.key;

},

 

login(){
  this.request.post("account/login?key="+this.key,this.user).then(res => {
    if(res.code === '200'){
      let user=res.data;
      localStorage.setItem('user',JSON.stringify(user))
      if(user && user.level && 1 === user.level){
        this.$router.push("/adminPerson");
      }
      if(user && user.level && 2 === user.level){
        this.$router.push("/teacherPerson");
      }
      if(user && user.level && 3 === user.level){

        this.$router.push("/studentPerson");
      }
    }else {
      this.$message.error(res.msg);
      this.clickImg();

    }
  })
},