课次27-31：Vue前端 + SpringBoot后端联调实战

微头条旅游项目开发笔记｜从后端封装到前后端完整联调全流程

前言

今天完整走完了微头条一站式旅游平台后端核心功能开发、JWT鉴权、拦截器权限校验、新闻模块CRUD，最后完成Vue前端与SpringBoot后端联调，踩了跨域、Token失效、配置缺失等不少坑，记录完整流程方便后续复盘。

课次27：统一结果封装 + 全局异常处理

核心解决痛点

之前接口返回格式杂乱，成功返回字符串、异常返回原生500报错页面，前端需要写多套解析逻辑，统一封装后所有接口固定返回{code,message,data}结构，异常自动包装成标准JSON。

1. 创建通用返回类Result
   新建com.weitoutiao.common.Result，使用Lombok简化get/set，提供success()、error()静态方法快速构造返回体，区分「带数据成功」「纯提示成功」「业务异常失败」三种场景。
2. 全局异常处理器GlobalExceptionHandler
   借助@RestControllerAdvice全局捕获运行时异常，拦截所有Controller抛出的RuntimeException，统一封装为Result格式返回，不再抛出浏览器原生错误页。
3. 改造测试接口HelloController
   /hello接口不再直接返回字符串，改用Result.success()包装，Postman请求后直接拿到标准化JSON响应，为后续所有业务接口定下返回规范。

课次28：JWT工具类 & 登录接口开发

核心解决痛点

实现用户无状态登录认证，登录成功下发Token，后续接口凭Token识别登录用户。

1. 环境准备
   pom.xml引入JJWT JWT加密依赖、jaxb兼容依赖，刷新Maven加载包；application.yml配置JWT加密密钥、Token过期时长（7天）。
2. 封装JwtUtil工具类
   放在util包，添加@Component交给Spring管理，通过@Value读取yml密钥配置，提供生成Token、解析Token、提取用户ID、校验Token有效性四个核心方法。
3. 分层开发登录业务
   • DTO：UserLoginDTO接收前端账号密码入参；
   • Service层：UserService定义登录接口，UserServiceImpl通过MyBatis-Plus条件构造器查询数据库用户，账号密码匹配则生成JWT，不匹配返回空；
   • Controller层：UserController提供/user/loginPOST接口，接收登录参数，调用service生成Token，用Result封装返回。
4. Postman验证登录
   POST请求携带JSON账号密码，登录成功返回携带Token的标准JSON，这串凭证是后续所有需要登录接口的通行凭证。

课次29：拦截器Token校验 + ThreadLocal存储登录用户

核心解决痛点

不用每个接口手动判断登录状态，全局拦截请求自动校验Token；全局任意位置可便捷获取当前登录用户ID，用于权限判断。

1. UserContext线程工具类
   基于ThreadLocal实现线程隔离存储，存放当前登录用户ID，提供存、取、清除方法；请求结束自动清空，避免线程复用导致数据错乱。
2. JwtInterceptor登录拦截器
   实现HandlerInterceptor，前置拦截所有请求：从请求头Authorization提取Bearer开头的Token，校验有效后解析用户ID存入UserContext；Token无效直接返回401未登录JSON，拦截接口访问。
3. MVC配置类注册拦截器
   InterceptorConfig配置拦截规则：拦截全部接口，放行登录、注册无需鉴权的接口；配置完成后所有新闻发布/修改/删除接口都会强制校验登录状态。

踩坑记录

直接访问/hello无Token时Postman返回401 未登录或token失效，解决方案：请求头添加Bearer + 空格 + 登录获取的Token。

课次30：新闻模块完整CRUD + 资源权限控制

核心解决痛点

实现旅游资讯新闻增删改查，增加权限校验：用户仅能修改、删除自己发布的新闻。

1. 入参DTO拆分
   NewsAddDTO：发布新闻接收标题、内容；NewsUpdateDTO：修改新闻接收新标题、内容，按需传参，精简接口入参。
2. NewsController五层接口（RESTful规范）
   • POST /news/add：发布新闻，从UserContext获取登录用户ID绑定新闻发布人；
   • GET /news/page：分页查询全部新闻，无需登录，按发布时间倒序；
   • GET /news/{id}：新闻详情，自动累加浏览量，无需登录；
   • PUT /news/{id}：修改新闻，校验新闻发布人是否等于当前登录用户，非本人禁止修改；
   • DELETE /news/{id}：删除新闻，同修改权限校验，仅可操作自己发布内容。
3. Postman测试流程
   1. 调用/user/login登录复制Token；
   2. 访问新闻相关接口，在Authorization栏填入Bearer Token；
   3. 发送新增请求，数据库自动插入带用户ID的新闻数据；无Token/非本人操作会直接返回业务错误提示。

课次31：Vue前端 + SpringBoot后端联调实战

核心解决痛点

打通前后端数据交互，修复跨域报错，实现前端登录存储Token、跳转首页完整流程。

1. 前端代码改造
   • request.js统一axios请求基地址改为后端http://localhost:8080；
   • 封装登录请求方法login()，发送POST请求到后端登录接口；
   • 页面Login.vue登录逻辑改造：接收后端标准Result返回，code=200则提取Token存入全局状态，跳转首页；登录失败展示后端返回的错误文案。
2. 跨域问题踩坑与解决
   前端运行在5173端口、后端8080端口，浏览器同源策略拦截请求，报错CORS跨域；临时解决方案：所有Controller类添加@CrossOrigin(origins = "http://localhost:5173")允许前端域名跨域访问，重启后端生效。
3. 完整联调流程
   1. 启动SpringBoot后端项目；
   2. 前端项目执行npm run dev启动；
   3. 页面输入测试账号testuser、密码123456，点击登录；
   4. 登录成功自动跳转首页，浏览器控制台打印存储的Token，前端可正常调用新闻列表等公开接口。

今日总结

1. 后端搭建完整标准化架构：统一返回封装→全局异常处理→JWT登录认证→拦截器全局鉴权→业务CRUD权限控制，符合企业前后端分离开发规范；
2. 掌握Postman接口调试完整流程：登录获取Token、带鉴权访问受限接口、排查401未登录报错；
3. 学会前后端联调基础操作，定位并解决最常见的跨域问题，实现账号登录、状态存储、页面跳转全流程；
4. 后续优化方向：全局统一跨域配置类替代单个Controller注解、自定义业务异常细分错误码、完善前端新闻发布/编辑页面对接后端接口。