企业官网建设流程全解析

网站规划html,手机app ui设计,电子商务网站开发的背景,免费网站生成软件基于 Spring Boot 的 Web 三大核心交互案例精讲 #xff08;2026年最实用写法 企业真实场景#xff09; 在 Spring Boot Web 开发中#xff0c;真正决定项目质量和维护难度的#xff0c;往往不是写了多少 Controller#xff0c;而是你是否真正掌握了以下三大核心交互场景…基于 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 自动刷新滚动刷新可选安全性更高后端关键代码片段简化版// 登录返回双 tokenPostMapping(/api/auth/login)publicResponseEntity?login(RequestBodyLoginRequestrequest,HttpServletResponseresponse){// 验证用户名密码...StringuserIduser-1001;StringaccessTokenjwtUtil.generateAccessToken(userId,30);// 30分钟StringrefreshTokenUUID.randomUUID().toString();// 存 redis带过期时间redisTemplate.opsForValue().set(refresh:refreshToken,userId,14,TimeUnit.DAYS);// 设置 HttpOnly CookieCookierefreshCookienewCookie(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){StringrefreshTokennull;Cookie[]cookiesrequest.getCookies();if(cookies!null){refreshTokenArrays.stream(cookies).filter(c-rt.equals(c.getName())).map(Cookie::getValue).findFirst().orElse(null);}if(refreshTokennull){returnResponseEntity.status(401).body(无 refresh token);}StringuserIdredisTemplate.opsForValue().get(refresh:refreshToken);if(userIdnull){returnResponseEntity.status(401).body(refresh token 已失效);}// 可选滚动刷新生成新 refresh tokenStringnewRefreshTokenUUID.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{consttokenlocalStorage.getItem(access_token)if(token){config.headers.AuthorizationBearer${token}}returnconfig})// response 拦截器 - 401 自动刷新api.interceptors.response.use(responseresponse,asyncerror{constoriginalRequesterror.configif(error.response?.status401!originalRequest._retry){originalRequest._retrytruetry{const{data}awaitapi.post(/auth/refresh)// 自动携带 cookielocalStorage.setItem(access_token,data.accessToken)// 重试原请求originalRequest.headers.AuthorizationBearer${data.accessToken}returnapi(originalRequest)}catch(refreshErr){// 刷新失败 → 跳转登录localStorage.removeItem(access_token)window.location.href/loginreturnPromise.reject(refreshErr)}}returnPromise.reject(error)})2. 文件上传下载大文件、分片、断点续传三种主流方式对比2026企业真实选型场景推荐方式最大文件断点续传复杂度代表技术栈小文件50MB普通 multipart50~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 命名StringchunkPathuploadDir/fileMd5/chunkIndex;chunk.transferTo(newFile(chunkPath));// 3. 记录已上传分片redisTemplate.opsForSet().add(chunks:fileMd5,String.valueOf(chunkIndex));// 4. 判断是否全部上传完成LonguploadedCountredisTemplate.opsForSet().size(chunks:fileMd5);if(uploadedCounttotalChunks){// 合并分片异步任务或立即合并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},producesMediaType.TEXT_EVENT_STREAM_VALUE)publicSseEmitterprogress(PathVariableStringtaskId){SseEmitteremitternewSseEmitter(Long.MAX_VALUE);// 长连接// 异步推送进度Executors.newSingleThreadExecutor().submit(()-{try{for(inti0;i100;i10){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 写法constsourcenewEventSource(/api/progress/${taskId});source.addEventListener(progress,e{constdataJSON.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 刷新并发问题大文件上传卡顿还是实时推送掉线重连告诉我我可以给你更针对性的代码优化或避坑方案