springboot和vue怎么结合
作者:综合 来源:焦点 浏览: 【大 中 小】 发布时间:2026-10-17 06:21:53 评论数:
SpringBoot和Vue的结合结合,本质上不是结合技术选型问题,而是结合团队协作的切分问题。我见过太多项目死磕“前后端分离”,结合结果分离成了两个仓库、结合两套权限、结合两拨人互相甩锅。结合真正的结合结合,是结合从接口设计那天就开始的。
先看一个最直白的结合例子。你有一个SpringBoot后端,结合暴露一个接口:GET /api/users,结合返回JSON数组。结合Vue前端用axios请求这个地址,结合渲染成表格。结合就这么简单?对,但也不对。你很快就会遇到跨域、Token刷新、文件上传格式、时间格式化不一致……这些破事才是结合的真相。
我的建议是,别把Vue当“页面”,把它当“客户端”。SpringBoot只做资源服务,Vue负责状态管理。比如登录状态,SpringBoot发一个JWT,Vue存到localStorage,每次请求带上。这没什么高深,但很多人把用户信息也塞进后端Session,那就又退回服务端渲染的老路了。
具体到工程结构,我会这样干。后端按模块分包,每个模块的Controller只返回统一Result对象——{ code: 200, data: ...}。前端呢,用Vuex管理全局用户信息,用router拦截器判断是否登录。后端别管前端怎么跳转,前端也别管后端怎么查库。唯一要死磕的,是接口文档。
说个我踩过的坑。去年帮朋友调一个项目,后端返回的日期是2023-07-21T10:30:00,前端直接显示,用户看到一串带T的字符串,以为出bug了。后来统一在后端用@JsonFormat转成yyyy-MM-dd HH:mm:ss,前端就干净了。这不难,但你不提前约定,就会在联调时互相扯皮。
还有文件上传。SpringBoot用MultipartFile接收,Vue用FormData提交。这没问题,但文件大小限制、异常处理,你得在两边都写。前端拦截413状态码提示用户,后端捕获MaxUploadSizeExceededException返回友好信息。否则用户点了上传没反应,只能干瞪眼。
最容易被忽略的是部署。开发时你开两个端口,前端8080,后端8081,用proxy代理解决跨域。生产环境呢?我习惯把Vue打包后的dist目录扔进SpringBoot的src/main/resources/static里,一个jar包搞定。这样运维只维护一个进程,省心。当然你要是用Nginx单独部署前端也行,但那就得处理跨域和Cookie SameSite,麻烦得多。
说到底,SpringBoot和Vue结合得好不好,看的是你们团队有没有把“数据契约”当回事。前端别乱改字段名,后端别随意增删参数。我见过最离谱的,后端把userName改成了username,前端没同步,页面白屏,查了半天才发现是大小写问题。这种事情,靠代码审查不如靠约定俗成。
最后说个技巧。如果你用Vue3,组合式API配合SpringBoot的分页查询特别顺手。后端返回Page对象,包含records、total、current、size,前端直接用reactive包一个分页状态,el-table绑定records,el-pagination绑定total和current,改动任何一方,另一方自动响应。这比jQuery时代手动拼接DOM舒服太多了。
所以别纠结“怎么结合”,先跑通一个最简单的增删改查,然后不断往里面加东西——权限、日志、缓存、消息推送。每加一个功能,你都会更清楚两边的边界在哪里。技术这东西,动手比看文章管用十倍。
