基于Spring Boot的服务端数组存储购票对象功能异常排查

前端触发层排查 #

• 打开浏览器开发者工具，切换到Network面板复现提交操作，确认是否有对应的购票提交请求发出
  • 如果完全无请求记录，逐点核验：
    • 切换到Console面板，检查是否存在JS语法报错、变量未定义类报错——这类报错会直接中断后续的请求执行逻辑
    • 检查提交按钮的事件绑定逻辑：确认DOM元素加载完成后再执行事件绑定，避免脚本执行时DOM节点还未渲染导致绑定失效
    • 排查表单默认提交行为的拦截逻辑：如果使用自定义提交逻辑，确认preventDefault()执行后，后续的fetch/axios请求代码是正常执行的，没有被多余的return语句提前中断
    • 检查页面DOM层级：确认提交按钮没有被其他透明元素遮挡，实际点击触发的是遮挡层的事件，而非按钮本身

服务端链路排查 #

• 确认请求发出后的传输状态，定位链路中断点
  • 如果Network面板能看到请求条目，但状态为无响应、跨域报错，逐点核验：
    • 检查Spring Boot启动日志，确认服务是否在配置的端口正常监听，没有出现端口被占用、启动失败的问题
    • 核对前端请求的接口路径和后端Controller的注解路径：确认没有斜杠缺失、大小写不一致、路径前缀不匹配的拼写问题
    • 检查跨域配置：如果前端静态页面和Spring Boot服务运行在不同端口，需要在Controller类上加@CrossOrigin注解，避免浏览器拦截跨域请求，这类跨域拦截不会在前端页面抛出显性的报错提示，很容易被误判为前端逻辑完全失效

参数接收层排查 #

• 如果请求正常到达后端，但没有完成数组存储逻辑，逐点核验：
  • 核对请求头和后端接口的参数接收方式：如果后端用@RequestBody接收JSON参数，前端必须设置Content-Type: application/json的请求头，否则Spring Boot会直接拒绝解析参数
  • 核对前端传递的购票对象字段名和后端购票实体类的字段名，确保命名完全一致，避免字段映射失败导致接收到空对象
  • 确认存储购票记录的数组是Controller类的共享成员变量，不能是接口方法内部每次新建的局部变量，否则每次请求都会创建新的空数组，表现为数据无法正常存储

参考可运行代码片段 #

• 后端核心Controller逻辑：

@RestController
@RequestMapping("/api/ticket")
@CrossOrigin // 跨域配置
public class TicketController {
    // 类级别共享数组存储购票记录
    private final List<Ticket> ticketStorage = new ArrayList<>();

    // 提交购票记录接口
    @PostMapping
    public void addTicket(@RequestBody Ticket ticket) {
        ticketStorage.add(ticket);
    }

    // 获取全部购票记录接口
    @GetMapping
    public List<Ticket> getTicketList() {
        return ticketStorage;
    }

    // 一键清空购票记录接口
    @DeleteMapping("/clear")
    public void clearTickets() {
        ticketStorage.clear();
    }
}

• 前端最小提交逻辑：

// 绑定提交按钮点击事件
document.getElementById('submitBtn').addEventListener('click', async () => {
    const ticketForm = {
        movieName: document.getElementById('inputMovie').value,
        seatNumber: document.getElementById('inputSeat').value,
        orderTime: new Date().toLocaleString()
    }
    // 发送POST请求到后端
    await fetch('http://localhost:8080/api/ticket', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(ticketForm)
    })
    // 调用列表渲染方法刷新页面展示
    renderTicketList()
})

内容的提问来源于stack exchange，提问作者WenckeLarsson