基于 Spring Boot 的 Web 三大核心交互案例精讲
基于 Spring Boot 的 Web 三大核心交互案例精讲
（2026年最实用写法 · 企业真实场景）
在 Spring Boot Web 开发中，真正决定项目质量和维护难度的，往往不是写了多少 Controller，而是你是否真正掌握了以下三大核心交互场景的正确、优雅、可维护的处理方式：
- 前后端分离的登录 + Token 认证（JWT + 无感刷新）
- 文件上传下载（大文件、分片上传、断点续传）
- 实时消息推送（WebSocket + SSE 对比实战）
下面用最现代的 Spring Boot 3.x + Spring Security 6.x 写法，给你最实用的完整案例。
1. 前后端分离登录 + Token 认证（JWT + 无感刷新）
核心要点
- Access Token 短效（15~60分钟）
- Refresh Token 长效（7~30天），HttpOnly Cookie 存储
- 前端拦截 401 自动刷新
- 滚动刷新（可选，安全性更高）
后端关键代码片段（简化版）
// 登录返回双 token@PostMapping("/api/auth/login")publicResponseEntity<?>login(@RequestBodyLoginRequestrequest,HttpServletResponseresponse){// 验证用户名密码...StringuserId="user-1001";StringaccessToken=jwtUtil.generateAccessToken(userId,30);// 30分钟StringrefreshToken=UUID.randomUUID().toString();// 存 redis（带过期时间）redisTemplate.opsForValue().set("refresh:"+refreshToken,userId,14,TimeUnit.DAYS);// 设置 HttpOnly CookieCookierefreshCookie=newCookie("rt",refreshToken);refreshCookie.setHttpOnly(true);refreshCookie.setSecure(true);// 生产必须 httpsrefreshCookie.setPath("/");refreshCookie.setMaxAge(14*24*60*60);refreshCookie.setAttribute("SameSite","Strict");response.addCookie(refreshCookie);returnResponseEntity.ok(newTokenVO(accessToken));}// 刷新 token 接口@PostMapping("/api/auth/refresh")publicResponseEntity<?>refresh(HttpServletRequestrequest){StringrefreshToken=null;Cookie[]cookies=request.getCookies();if(cookies!=null){refreshToken=Arrays.stream(cookies).filter(c->"rt".equals(c.getName())).map(Cookie::getValue).findFirst().orElse(null);}if(refreshToken==null){returnResponseEntity.status(401).body("无 refresh token");}StringuserId=redisTemplate.opsForValue().get("refresh:"+refreshToken);if(userId==null){returnResponseEntity.status(401).body("refresh token 已失效");}// 可选：滚动刷新（生成新 refresh token）StringnewRefreshToken=UUID.randomUUID().toString();redisTemplate.delete("refresh:"+refreshToken);redisTemplate.opsForValue().set("refresh:"+newRefreshToken,userId,14,TimeUnit.DAYS);// 返回新 access tokenreturnResponseEntity.ok(newTokenVO(jwtUtil.generateAccessToken(userId,30)));}前端 Axios 拦截器（最经典写法）
// request 拦截器 - 自动加 tokenapi.interceptors.request.use(config=>{consttoken=localStorage.getItem('access_token')if(token){config.headers.Authorization=`Bearer${token}`}returnconfig})// response 拦截器 - 401 自动刷新api.interceptors.response.use(response=>response,asyncerror=>{constoriginalRequest=error.configif(error.response?.status===401&&!originalRequest._retry){originalRequest._retry=truetry{const{data}=awaitapi.post('/auth/refresh')// 自动携带 cookielocalStorage.setItem('access_token',data.accessToken)// 重试原请求originalRequest.headers.Authorization=`Bearer${data.accessToken}`returnapi(originalRequest)}catch(refreshErr){// 刷新失败 → 跳转登录localStorage.removeItem('access_token')window.location.href='/login'returnPromise.reject(refreshErr)}}returnPromise.reject(error)})2. 文件上传下载（大文件、分片、断点续传）
三种主流方式对比（2026企业真实选型）
| 场景 | 推荐方式 | 最大文件 | 断点续传 | 复杂度 | 代表技术栈 |
|---|---|---|---|---|---|
| 小文件（<50MB） | 普通 multipart | 50~100MB | 不支持 | ★☆☆☆☆ | spring.servlet.multipart |
| 中大文件（100MB~2GB） | 分片上传 + 秒传 | 无上限 | 支持 | ★★★☆☆ | tus / Resumable.js / 前端分片 |
| 超大文件、企业级需求 | 分片 + Redis 记录 | 无上限 | 完美支持 | ★★★★☆ | minio + redis + 前端分片 |
推荐中型项目写法：分片上传 + 秒传（Redis 判断）
后端核心代码
@PostMapping("/upload/chunk")publicResponseEntity<?>uploadChunk(@RequestParam("file")MultipartFilechunk,@RequestParam("md5")StringfileMd5,@RequestParam("chunkIndex")intchunkIndex,@RequestParam("totalChunks")inttotalChunks){// 1. 秒传判断if(redisTemplate.hasKey("file:md5:"+fileMd5)){returnResponseEntity.ok("秒传成功");}// 2. 保存分片（临时目录 + chunkIndex 命名）StringchunkPath=uploadDir+"/"+fileMd5+"/"+chunkIndex;chunk.transferTo(newFile(chunkPath));// 3. 记录已上传分片redisTemplate.opsForSet().add("chunks:"+fileMd5,String.valueOf(chunkIndex));// 4. 判断是否全部上传完成LonguploadedCount=redisTemplate.opsForSet().size("chunks:"+fileMd5);if(uploadedCount==totalChunks){// 合并分片（异步任务或立即合并）mergeChunks(fileMd5,totalChunks);// 记录完成redisTemplate.opsForValue().set("file:md5:"+fileMd5,"completed",7,TimeUnit.DAYS);}returnResponseEntity.ok("分片上传成功");}前端推荐库（2026年最流行）：
- resumable.js（最稳定）
- uploader.js/tus-js-client（支持 tus 协议）
- spark-md5（前端算 MD5 实现秒传）
3. 实时消息推送（WebSocket vs SSE 终极对比实战）
2026年真实选型表
| 需求场景 | 首选技术 | 双向通信 | 浏览器兼容 | 断线重连 | 实现复杂度 | 代表框架/库 |
|---|---|---|---|---|---|---|
| 聊天、IM、协作编辑 | WebSocket | 是 | 极好 | 需手动 | ★★★★☆ | Spring WebSocket + STOMP |
| 服务器主动推送（通知、进度） | SSE | 否 | 极好 | 自动 | ★★☆☆☆ | SseEmitter |
| 海量用户单向广播 | SSE | 否 | 极好 | 自动 | ★★☆☆☆ | Redis Pub/Sub + SSE |
| 低频、兼容性极致要求 | Long Polling | 否 | 最好 | 自动 | ★☆☆☆☆ | 基本不用了 |
SSE 推荐写法（最简单、最高性价比）
@GetMapping(value="/progress/{taskId}",produces=MediaType.TEXT_EVENT_STREAM_VALUE)publicSseEmitterprogress(@PathVariableStringtaskId){SseEmitteremitter=newSseEmitter(Long.MAX_VALUE);// 长连接// 异步推送进度Executors.newSingleThreadExecutor().submit(()->{try{for(inti=0;i<=100;i+=10){emitter.send(SseEmitter.event().name("progress").data(newProgressVO(i,"处理中...")));Thread.sleep(1000);}emitter.send(SseEmitter.event().name("complete").data("任务完成"));emitter.complete();}catch(Exceptione){emitter.completeWithError(e);}});returnemitter;}前端 SSE 写法
constsource=newEventSource(`/api/progress/${taskId}`);source.addEventListener('progress',e=>{constdata=JSON.parse(e.data)console.log(`进度：${data.percent}% -${data.message}`)})source.addEventListener('complete',e=>{console.log('任务完成！')source.close()})source.onerror=()=>{console.log('连接断开，浏览器会自动重连...')}总结：三大核心交互的企业级优先级排序（2026）
- 必须掌握：前后端分离 Token 认证 + 无感刷新（几乎所有项目都有）
- 强烈建议：文件分片上传 + 秒传（中大型项目必备）
- 根据业务选：SSE（单向推送首选） > WebSocket（双向实时首选）
你目前项目里最常遇到哪个交互的痛点？
是 Token 刷新并发问题？大文件上传卡顿？还是实时推送掉线重连？
告诉我，我可以给你更针对性的代码优化或避坑方案～