基于 Spring Boot 的 Web 三大核心交互案例精讲

基于 Spring Boot 的 Web 三大核心交互案例精讲 （2026年最实用写法 · 企业真实场景）

在 Spring Boot Web 开发中，真正决定项目质量和维护难度的，往往不是写了多少 Controller，而是你是否真正掌握了以下三大核心交互场景的正确、优雅、可维护的处理方式：

下面用最现代的 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")
public ResponseEntity<?> login(@RequestBody LoginRequest request, HttpServletResponse response) {
// 验证用户名密码…
String userId = "user-1001";

String accessToken = jwtUtil.generateAccessToken(userId, 30); // 30分钟
String refreshToken = UUID.randomUUID().toString();

// 存 redis（带过期时间）
redisTemplate.opsForValue().set("refresh:" + refreshToken, userId, 14, TimeUnit.DAYS);

// 设置 HttpOnly Cookie
Cookie refreshCookie = new Cookie("rt", refreshToken);
refreshCookie.setHttpOnly(true);
refreshCookie.setSecure(true); // 生产必须 https
refreshCookie.setPath("/");
refreshCookie.setMaxAge(14 * 24 * 60 * 60);
refreshCookie.setAttribute("SameSite", "Strict");
response.addCookie(refreshCookie);

return ResponseEntity.ok(new TokenVO(accessToken));
}

// 刷新 token 接口
@PostMapping("/api/auth/refresh")
public ResponseEntity<?> refresh(HttpServletRequest request) {
String refreshToken = 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) {
return ResponseEntity.status(401).body("无 refresh token");
}

String userId = redisTemplate.opsForValue().get("refresh:" + refreshToken);
if (userId == null) {
return ResponseEntity.status(401).body("refresh token 已失效");
}

// 可选：滚动刷新（生成新 refresh token）
String newRefreshToken = UUID.randomUUID().toString();
redisTemplate.delete("refresh:" + refreshToken);
redisTemplate.opsForValue().set("refresh:" + newRefreshToken, userId, 14, TimeUnit.DAYS);

// 返回新 access token
return ResponseEntity.ok(new TokenVO(jwtUtil.generateAccessToken(userId, 30)));
}

前端 Axios 拦截器（最经典写法）

// request 拦截器 – 自动加 token
api.interceptors.request.use(config => {
const token = localStorage.getItem('access_token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})

// response 拦截器 – 401 自动刷新
api.interceptors.response.use(
response => response,
async error => {
const originalRequest = error.config

if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true

try {
const { data } = await api.post('/auth/refresh') // 自动携带 cookie
localStorage.setItem('access_token', data.accessToken)

// 重试原请求
originalRequest.headers.Authorization = `Bearer ${data.accessToken}`
return api(originalRequest)
} catch (refreshErr) {
// 刷新失败 → 跳转登录
localStorage.removeItem('access_token')
window.location.href = '/login'
return Promise.reject(refreshErr)
}
}
return Promise.reject(error)
}
)

2. 文件上传下载（大文件、分片、断点续传）

三种主流方式对比（2026企业真实选型）

推荐中型项目写法：分片上传 + 秒传（Redis 判断）

后端核心代码

@PostMapping("/upload/chunk")
public ResponseEntity<?> uploadChunk(
@RequestParam("file") MultipartFile chunk,
@RequestParam("md5") String fileMd5,
@RequestParam("chunkIndex") int chunkIndex,
@RequestParam("totalChunks") int totalChunks) {

// 1. 秒传判断
if (redisTemplate.hasKey("file:md5:" + fileMd5)) {
return ResponseEntity.ok("秒传成功");
}

// 2. 保存分片（临时目录 + chunkIndex 命名）
String chunkPath = uploadDir + "/" + fileMd5 + "/" + chunkIndex;
chunk.transferTo(new File(chunkPath));

// 3. 记录已上传分片
redisTemplate.opsForSet().add("chunks:" + fileMd5, String.valueOf(chunkIndex));

// 4. 判断是否全部上传完成
Long uploadedCount = redisTemplate.opsForSet().size("chunks:" + fileMd5);
if (uploadedCount == totalChunks) {
// 合并分片（异步任务或立即合并）
mergeChunks(fileMd5, totalChunks);
// 记录完成
redisTemplate.opsForValue().set("file:md5:" + fileMd5, "completed", 7, TimeUnit.DAYS);
}

return ResponseEntity.ok("分片上传成功");
}

前端推荐库（2026年最流行）：

• resumable.js（最稳定）
• uploader.js / tus-js-client（支持 tus 协议）
• spark-md5（前端算 MD5 实现秒传）

3. 实时消息推送（WebSocket vs SSE 终极对比实战）

2026年真实选型表

SSE 推荐写法（最简单、最高性价比）

@GetMapping(value = "/progress/{taskId}", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter progress(@PathVariable String taskId) {
SseEmitter emitter = new SseEmitter(Long.MAX_VALUE); // 长连接

// 异步推送进度
Executors.newSingleThreadExecutor().submit(() -> {
try {
for (int i = 0; i <= 100; i += 10) {
emitter.send(SseEmitter.event()
.name("progress")
.data(new ProgressVO(i, "处理中…")));
Thread.sleep(1000);
}
emitter.send(SseEmitter.event().name("complete").data("任务完成"));
emitter.complete();
} catch (Exception e) {
emitter.completeWithError(e);
}
});

return emitter;
}

前端 SSE 写法

const source = new EventSource(`/api/progress/${taskId}`);

source.addEventListener('progress', e => {
const data = JSON.parse(e.data)
console.log(`进度：${data.percent}% – ${data.message}`)
})

source.addEventListener('complete', e => {
console.log('任务完成！')
source.close()
})

source.onerror = () => {
console.log('连接断开，浏览器会自动重连…')
}

总结：三大核心交互的企业级优先级排序（2026）

你目前项目里最常遇到哪个交互的痛点？ 是 Token 刷新并发问题？大文件上传卡顿？还是实时推送掉线重连？

告诉我，我可以给你更针对性的代码优化或避坑方案～