Day23--前后端分离项目中如何使用 Vue.js 和 Axios 加载 WebServlet 生成的验证码图片

在前后端分离的项目中，使用 Vue.js 作为前端框架，通过 Axios 向后端发送请求以获取验证码图片是一个常见的场景。本文将介绍如何在 Vue 项目中通过 Axios 从后端 WebServlet 获取验证码图片流，并将其加载到前端页面中。

1. 需求分析

在许多应用中，验证码用于防止自动化脚本进行恶意操作。验证码图片通常由后端生成，然后前端需要通过 API 获取并展示。我们假设后端使用 Java WebServlet 来生成验证码图片，并将其作为二进制数据流返回给前端。前端使用 Vue.js 进行页面展示，并通过 Axios 发送 HTTP 请求。

2. 后端 WebServlet 生成验证码图片

首先，在后端，我们需要一个 WebServlet 来生成并返回验证码图片。下面是一个简单的示例：

package service;
import cn.dsna.util.images.*;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
@WebServlet("/code")
public class code extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //创建了一个 ValidateCode 实例，传入四个参数：
        //第一个参数是验证码图像的宽度（500 像素）。
        //第二个参数是验证码图像的高度（200 像素）。
        //第三个参数是验证码字符的数量（4 个字符）。
        //第四个参数是干扰线的数量（100 条线）。
        ValidateCode validateCode = new ValidateCode(500,200,4,100);
        //拿到生成的验证码值
        String code = validateCode.getCode();
//将生成的验证码字符串存储到 session 中，键为 "code"
// 这样可以在后续的请求中验证用户输入的验证码是否正确
        HttpSession sessions = req.getSession();
        sessions.setAttribute("code",code);
        //将生成的验证码图像写入到响应的输出流中。
        // 验证码图像会被发送给客户端显示。
        validateCode.write(resp.getOutputStream());
    }
}

此 WebServlet 处理 /captcha 路径的 GET 请求，生成验证码图片并将其作为 PNG 格式的响应返回。

3. 前端 Vue.js 中使用 Axios 请求验证码

在前端，我们使用 Axios 来发送请求并获取验证码图片数据。假设我们在一个 Vue 组件中加载验证码：

<template>
  <div>
    <img :src="captchaUrl" @click="loadCaptcha" alt="验证码" />
    <p>点击图片刷新验证码</p>
  </div>
</template>

<script>

    import axios from 'axios';

    new Vue({
    data() {
    return {
    captchaUrl: '', // 用于存储验证码图片的URL
};
},
    methods: {
    loadCaptcha() {
    // 请求后端的验证码图片
    axios.get('/captcha', { responseType: 'blob' }) // 确保响应类型为 blob
    .then(response => {
    const url = URL.createObjectURL(response.data); // 将 blob 转换为 URL
    this.captchaUrl = url;
})
    .catch(error => {
    console.error("获取验证码失败：", error);
});
}
},
    mounted() {
    this.loadCaptcha(); // 初始化时加载验证码
}
});
</script>

4. 关键技术点解析

• responseType: 'blob': 在 Axios 请求中设置 responseType 为 'blob'，确保 Axios 将二进制数据作为 Blob 对象处理，这对于处理图片数据尤为重要。

• URL.createObjectURL: 使用 URL.createObjectURL 方法将从后端获取的 Blob 数据转换为一个可供 <img> 标签使用的 URL。

• 图片刷新: 当用户点击图片时，调用 loadCaptcha 方法重新请求验证码图片，从而实现验证码的刷新。