用axios写一个发送验证码请求

可以使用Hutool的验证码工具类来生成验证码，并将其展示在登录页面上，然后使用axios将用户输入的账号、密码和验证码发送给后端进行验证。 以下是一个示例代码： 前端部分： ```html <!-- 展示验证码 --> <img :src="captchaUrl" @click="refreshCaptcha"> <!-- 账号输入框 --> <input type="text" v-model="username"> <!-- 密码输入框 --> <input type="password" v-model="password"> <!-- 验证码输入框 --> <input type="text" v-model="captcha"> <!-- 登录按钮 --> <button @click="login">登录</button> ``` ```javascript export default { data() { return { username: '', password: '', captcha: '', captchaUrl: '/captcha' } }, methods: { refreshCaptcha() { this.captchaUrl = '/captcha?timestamp=' + new Date().getTime(); }, login() { axios.post('/login', { username: this.username, password: this.password, captcha: this.captcha }).then(response => { if (response.data.success) { // 登录成功 } else { // 登录失败 } }); } } } ``` 在上面的示例代码中，前端展示了一个验证码图片和账号、密码和验证码的输入框以及一个登录按钮。当用户点击验证码图片时，前端会通过axios请求后端获取新的验证码图片。当用户点击登录按钮时，通过axios将用户输入的账号、密码和验证码发送到后端进行验证。 后端部分： ```java // 生成验证码 String captcha = CaptchaUtil.createLineCaptcha(200, 100, 4, 150).getCode(); // 将验证码存储到session中 request.getSession().setAttribute("captcha", captcha); // 验证登录信息 String username = request.getParameter("username"); String password = request.getParameter("password"); String inputCaptcha = request.getParameter("captcha"); String sessionCaptcha = (String) request.getSession().getAttribute("captcha"); boolean success = inputCaptcha.equalsIgnoreCase(sessionCaptcha) && "admin".equals(username) && "123456".equals(password); Map<String, Object> resultMap = new HashMap<>(); resultMap.put("success", success); // 将验证结果返回给前端 response.setContentType("application/json;charset=UTF-8"); response.getWriter().write(JSON.toJSONString(resultMap)); ``` 在上面的示例代码中，后端使用Hutool的验证码工具类生成验证码，并将其存储到session中。当用户输入账号、密码和验证码并点击登录按钮时，后端将用户输入的验证码与session中的验证码进行比较，判断验证码是否正确，同时还判断账号密码是否正确。最后，后端将验证结果返回给前端。如果登录验证成功，可以将用户的相关信息存储到session中，以便后续的操作使用。

好的，我可以为你提供一个简单的示例代码。 首先，你需要在你的Vue项目中安装 `vue-axios` 和 `vue-cookie` 库，用于发送请求和存储Cookie。 安装方式为： ```bash npm install --save vue-axios vue-cookie ``` 然后在你的Vue组件中，你可以编写如下的代码： ```vue <template> <div> <form> <div> <label>用户名：</label> <input type="text" v-model="username"> </div> <div> <label>密码：</label> <input type="password" v-model="password"> </div> <div> <label>验证码：</label> <input type="text" v-model="captcha"> <img :src="captchaUrl" @click="refreshCaptcha"> </div> <button @click.prevent="login">登录</button> </form> </div> </template> <script> import axios from 'axios' import VueAxios from 'vue-axios' import VueCookie from 'vue-cookie' export default { name: 'LoginForm', data() { return { username: '', password: '', captcha: '', captchaUrl: '', } }, created() { this.refreshCaptcha() }, methods: { login() { const params = { username: this.username, password: this.password, captcha: this.captcha, } this.$http.post('/api/login', params).then(response => { if (response.data.code === 0) { this.$cookie.set('token', response.data.token) this.$router.push('/home') } else { this.$message.error(response.data.msg) } }).catch(error => { console.error(error) }) }, refreshCaptcha() { this.captchaUrl = '/api/captcha?time=' + new Date().getTime() }, }, mounted() { Vue.use(VueAxios, axios) Vue.use(VueCookie) }, } </script> ``` 其中，`username`、`password` 和 `captcha` 分别绑定了输入框的值，`captchaUrl` 是验证码图片的URL地址。 在 `refreshCaptcha` 方法中，我们使用 `time` 参数来避免浏览器缓存，以确保每次刷新都能获取到新的验证码图片。 在 `login` 方法中，我们使用 `axios` 库向服务器发送POST请求，传递参数并获取响应结果。如果登录成功，我们使用 `vue-cookie` 库将服务器返回的 `token` 存储到浏览器的Cookie中，并跳转到主页。 你需要替换成你自己的接口地址，同时还需要在服务器端实现 `/api/login` 和 `/api/captcha` 接口，分别用于处理登录请求和获取验证码图片。