Springboot+vue 前后端分离登录验证码功能

<template>
    <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
    >
        <el-form-item label="姓名" prop="username">
            <el-input  v-model="ruleForm.username" placeholder="请输入账号用户名">
                <template #prefix><el-icon><User /></el-icon></template>
            </el-input>
        </el-form-item>
        <el-form-item label="密码"  prop="password">
            <el-input v-model="ruleForm.password" placeholder="请输入账号密码">
                <template #prefix><el-icon><User /></el-icon></template>
            </el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="checkcode">
            <el-input placeholder="请输入验证码" v-model="ruleForm.checkcode"></el-input>
            <img :src="checkcodeurl" @click="getcode">
        </el-form-item>
        <el-form-item prop="">
            <el-checkbox v-model="ruleForm.rememberme " v-bind:lable="true">记住我</el-checkbox>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                登录
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
    </el-form>
</template>
<script lang="ts"  setup>
    import { reactive, ref } from 'vue'
    import type { FormInstance, FormRules } from 'element-plus'
    import request from "../utitiles/request"
    import {ElMessage} from "element-plus";
    import axios from "axios";
    const formSize = ref()
    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({
       username:'',
        password:'',
        checkcode:'',
        rememberme:''
    })
    const checkcodeurl=ref("http://localhost:8080/login/getcode?"+new Date().getTime())
    const getcode=()=>{
        checkcodeurl.value="http://localhost:8080/login/getcode?"+new Date().getTime()
    }
    const rules = reactive<FormRules>({
        username: [
            { required: true, message: 'Please input username', trigger: 'blur' },
            { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        password: [
            { required: true, message: 'Please input username', trigger: 'blur' },
        ],
        checkcode:[
            { required: true, message: '请输入验证码', trigger: 'blur' },
        ]
    })
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
               request.get("/login",{
                   params:{
                       username:ruleForm.username,
                       password:ruleForm.password,
                       checkcode:ruleForm.checkcode
                   }
               }).then(response=>{
                   console.log(response.data)
                   if(response.data=="success"){
                      alert("登录成功")
                   }
                   else
                       alert("登陆失败")
               })
            } else {
                console.log('error submit!', fields)
            }
        })
    }
    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }
</script>

@Controller
public class MyblogController {
    @Autowired
    RedisUtil redisUtil;
    @Autowired
    LoginMapper loginMapper;
    @RequestMapping("/login/getcode")
    public void getcode(HttpServletResponse response) throws IOException {
        CircleCaptcha circleCaptcha = CaptchaUtil.createCircleCaptcha(116, 30, 4, 10);
        redisUtil.set("code",circleCaptcha.getCode());
        ServletOutputStream outputStream = response.getOutputStream();
        circleCaptcha.write(outputStream);
        outputStream.close();
    }
    @RequestMapping("/login")
    @ResponseBody
    public String  login(String username,String password,String checkcode){
        QueryWrapper<Login> queryWrapper=new QueryWrapper<>();
        queryWrapper.eq("username",username).eq("password",password);
        Login login = loginMapper.selectOne(queryWrapper);
        String code=(String)redisUtil.get("code");
        if(login!=null&&code.equals(checkcode))
            return "success";
        else
            return "error";
    }
}