SpringBoot 结合 Vue3 实现验证码功能

比眉伴天荒 2023-01-17 06:28 180阅读 0赞

## 效果 ##

![在这里插入图片描述][20210427132123894.gif]

## SpringBoot后台代码 ##

@RestController
    @RequestMapping("/user")
    public class UserController { 
        @Resource
        private UserService userService;
    
        @RequestMapping("/getVerifyCode")
        public void getVerifyCode(HttpSession session, HttpServletResponse response) throws IOException { 
            //生成验证码，6位
            String verifyCode = VerifyCodeUtils.generateVerifyCode(4);
            //验证码放入session
            session.setAttribute("verifyCode", verifyCode);
            //验证码存入图片
            response.setContentType("image/png");
            ServletOutputStream outputStream = response.getOutputStream();
            VerifyCodeUtils.outputImage(100, 39, outputStream, verifyCode);
        }
    
        @GetMapping("/checkVerifyCode")
        public Result checkVerifyCode(String code, HttpSession session) { 
            String tmp = (String) session.getAttribute("verifyCode");
            if (tmp == null || tmp.length() == 0) { 
                return ResultUtil.fail(ResultEnum.INTERNAL_SERVER_ERROR);
            }
            if (tmp.equalsIgnoreCase(code)) { 
                return ResultUtil.success(ResultEnum.CHECK_CODE_SUCCESS);
            } else { 
                return ResultUtil.fail(ResultEnum.CHECK_CODE_ERROR);
            }
        }
    }

上面代码中的工具类`VerifyCodeUtils`的源代码请参考博客：[好用的验证码工具类VerifyCodeUtils][VerifyCodeUtils]

## axios工具类 ##

// 二次封装axios
    import axios from 'axios'
    import qs from 'qs'
    import { ElLoading, ElNotification} from 'element-plus'
    
    // 根据环境变量区分接口默认地址（前缀）
    axios.defaults.baseURL = 'http://127.0.0.1/blog'
    // 请求超时时间
    axios.defaults.timeout = 10000
    // CROS跨域是否允许凭证
    axios.defaults.withCredentials = true
    
    /** * Get请求 * @param url 请求地址 * @param params 参数 * @returns {Promise<unknown>} */
    export function get(url: string, params: any = { }) { 
      return new Promise((resolve, reject) => { 
        axios.get(url, { 
          params: params
        }).then(res => { 
          resolve(res.data)
        }).catch(error => { 
          reject(error.data)
        })
      })
    }
    
    // 获取验证码
    export const checkVerifyCode = (url: string, params: Record<string, string>) => { 
      return new Promise((resolve, reject) => { 
        axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' // 默认
        axios.get(url, qs.stringify(params))
          .then(res => { 
            resolve(res.data)
          })
          .catch(err => { 
            reject(err.data)
          })
      })
    }

## vue页面 ##

<template>
        <h3>个人博客后台管理：用户登录</h3>
        <el-form label-width="80px" :model="user" :rules="ruleLoginForm">
        	<el-form-item>
                <el-input v-model="user.verifyCode" placeholder="请输入验证码" minlength="4" maxlength="4" @blur="checkVerifyCode"></el-input>
                <img id="img" alt="验证码" style="margin-left: 8px;" onclick="this.src='http://127.0.0.1/blog/user/getVerifyCode?t='+Math.random()" :src="'http://127.0.0.1/blog/user/getVerifyCode'"/>
          </el-form-item>
        </el-form>
    </template>
    
    <script lang="ts"> import { reactive} from 'vue' import { ElMessage} from 'element-plus' import axios from 'axios' export default { setup() { let user = reactive<any>({ verifyCode: '' }) let checkVerifyCode = () => { axios.checkVerifyCode({ code: user.verifyCode }).then((res: any) => { console.info(res) if (res.code !== 200) { ElMessage.error(res.msg) } else { ElMessage.success(res.msg) } }) } return { user, checkVerifyCode, ruleLoginForm: { verifyCode: [ { required: true, message: '请输入验证码', trigger: 'blur'}, { min: 4, max: 4, message: '长度4个字符', trigger: 'blur'} ] } } } } </script>

[20210427132123894.gif]: /images/20221021/eb5d37eb16634dc3810fbd8958124b88.png
[VerifyCodeUtils]: https://blog.csdn.net/lianghecai52171314/article/details/109124877?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161948793116780274136870%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=161948793116780274136870&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v29-2-109124877.nonecase&utm_term=%E9%AA%8C%E8%AF%81%E7%A0%81