Vue+Spring Boot前后端分离实战：减肥网站开发与部署踩坑全记录-北京尧图网络

1. 项目整体设计与技术选型分析1.1 为什么选 Vue Spring Boot 做减肥网站先说结论这个组合放到今天依然是中小型管理系统和个人实习项目最稳妥的选择没有之一。我在实习期间接手这个减肥网站项目时第一件事不是写代码而是把技术栈明确下来。当时备选方案有三个纯 JSP Servlet、Vue Spring Boot、Vue Node.js。JSP 那套早就该淘汰了前后端耦合严重改一个页面样式都要重启服务器效率低到没法看。Node.js 做后端虽然轻量但公司现有服务器环境、运维习惯都是 Java 体系而且要对接后续的权限框架、工作流引擎Java 生态明显更占优势。Vue Spring Boot 的组合能站住脚核心原因是前后端彻底分离。前端只需要关心页面渲染和用户交互后端只需要关心业务逻辑和数据接口两边通过 JSON 通信互不干扰。实习期间带我的组长说了一句话我到现在都记得“团队协作的本质是减少沟通成本前后端分离就是在架构层面减少沟通成本。”你在公司里写代码很少是一个人从头写到尾的前端组、后端组、测试组各管一摊技术栈不分离协作就是灾难。这个项目本身的需求也不复杂用户注册登录、个人资料管理、饮食记录、运动记录、体重曲线、减肥计划推荐、社区帖子互动。说白了就是一个垂直领域的业务管理系统加上一点内容社交属性。这类场景对技术架构的要求不是“高并发、高可用”而是“结构清晰、易维护、能快速迭代”。Vue 的组件化开发方式非常适合这种业务模块较多的项目Spring Boot 的自动配置和 Starter 机制又极大减少了后端样板代码。另外一个很现实的因素是学习资源密度。Vue 和 Spring Boot 的社区资料太丰富了遇到任何问题基本都能搜到现成答案。对于实习生来说这意味着你可以把精力放在业务逻辑和功能实现上而不是被困在环境配置和框架使用上。1.2 宏观功能拆解减肥网站到底有哪些模块实习报告的框架不能只写技术栈功能模块的拆解才是体现你对业务理解的地方。我最终把整个系统分成六大模块每个模块都对应一个业务场景用户模块注册、登录、个人信息维护、密码修改。这是所有系统的基础最简单也最容易忽略细节。饮食管理模块记录一日三餐的热量摄入维护常见食物数据库支持自定义食物。运动管理模块记录有氧运动和无氧运动的时长、消耗热量生成运动打卡记录。体重趋势模块按天记录体重数据用折线图展示变化趋势支持不同时间范围的筛选。计划推荐模块根据用户的基础代谢率BMR和每日消耗给出减脂期的热量缺口建议和饮食运动计划。社区互动模块发布减肥心得帖子、评论、点赞。这块是为了提升用户粘性也让实习报告看起来更有层次。从难度系数来说前四个模块属于标准 CRUD第五个模块涉及一点简单的算法逻辑第六个模块涉及表关联和列表分页。这个难度梯度刚好踩在实习生的能力区间——太简单了学不到东西太难了做不完。体重趋势模块是整站的亮点功能我用到了 ECharts 来绘制折线图前端只负责把后端返回的体重数据组扔给图表组件后端负责数据的聚合查询。这个功能演示效果非常好实习答辩的时候评委老师特意多看了两眼因为图表比表格直观太多了。2. 前端 Vue 核心细节拆解与实操要点2.1 Vue 工程化搭建与目录结构设计现在做 Vue 项目基本都是从 Vue CLI 或者 Vite 起步。我这里用的 Vue 3 Vite 组合。很多人纠结选 Vue 2 还是 Vue 3我的建议非常直接新项目一律 Vue 3除非公司老项目维护需要 Vue 2。Vue 3 的组合式 APIComposition API在逻辑复用层面比选项式 APIOptions API舒服太多尤其是一个组件里涉及多个业务状态的时候选项式会把 data、methods、computed 拆得七零八落而组合式可以按功能点把逻辑收拢在一起。环境搭建流程其实很简单装 Node.js 的时候顺手把 npm 也装了然后用npm create vitelatest初始化项目。这里有个坑我一定要说国内网络环境下npm 直接装依赖经常超时我实习第一天就栽在这里。解决办法是换淘宝镜像源一行命令搞定npm config set registry https://registry.npmmirror.com没用镜像之前一个 vue-router 装了快二十分钟最后还给报 ETIMEDOUT换了镜像之后全程不到三十秒。这是面试里经常被问到的点也是实习工作里的基础常识写进报告里绝对是加分项。工程目录我是按照业务模块来划分的src/ ├── api/ # 接口请求封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── router/ # 路由配置 ├── store/ # Pinia 状态管理 ├── utils/ # 工具函数 ├── views/ # 页面组件 │ ├── diet/ # 饮食管理页面 │ ├── exercise/ # 运动管理页面 │ ├── weight/ # 体重趋势页面 │ ├── plan/ # 计划推荐页面 │ └── community/ # 社区页面 └── App.vue这样的目录结构在答辩和日后面试复盘时都能讲出道理按业务域划分目录是在为项目的可扩展性做铺垫以后每增加一个模块直接在 views 下建一个文件夹不会把项目搞成一锅粥。2.2 前端路由与权限控制的落地方式路由是 Vue 项目里最容易出问题的部分也是面试必考。我这个项目用的是 Vue Router 4配合 Pinia 做登录态的全局管理。路由表我分成了两部分基础路由登录页、注册页、首页和需要登录后才能访问的业务路由。请求拦截器在上一个步骤里已经统一带上了 token但页面级别的跳转还需要在前端做一层守卫判断。Vue Router 的全局前置守卫是这么写的// router/index.js router.beforeEach((to, from, next) { const token localStorage.getItem(token) const whiteList [/login, /register] if (token) { next() } else { if (whiteList.includes(to.path)) { next() } else { next(/login) } } })没有 token 就直接送回登录页这个逻辑很直白。但实习生容易漏掉一个细节token 过期的情况。如果 localStorage 里的 token 是过期的前端仍然放行请求发到后端被拦截接口返回 401界面就白屏了。所以我在响应拦截器里也加了一重处理// utils/request.js axios.interceptors.response.use( response response, error { if (error.response error.response.status 401) { localStorage.removeItem(token) router.push(/login) } return Promise.reject(error) } )前端做权限控制只是用户体验层面的事真正的安全防线一定在后端。实习报告里要体现这种认知前端的路由守卫可以被绕过后端的接口鉴权才是安全底线。2.3 播放器、图表等组件的选择与踩坑记录减肥网站里我嵌入了两个比较有分量的第三方组件一个是 ECharts 体重折线图一个是西瓜播放器xgplayer用于播放运动教学视频。ECharts 在 Vue 3 项目里推荐用vue-echarts封装组件支持按需引入能明显减小打包体积。一开始我图省事直接全量引入Vite 打包后 chunk 文件有 800 多 KB页面首屏加载那个慢啊后来改成按需引入直接缩到 200 KB 以内。这就是实习报告里可以写的性能优化点面试官很吃这一套。播放器这里有个跟热词相关的需求播放 m3u8 格式的视频流。m3u8 是 HLS 直播/点播常用的格式浏览器原生不支持直接播放需要借助 hls.js。西瓜播放器恰好内置了 hls 支持使用起来非常简单import Player from xgplayer const player new Player({ id: video-container, url: https://example.com/video/index.m3u8, isLive: false, autoplay: false })踩过的坑是跨域问题。视频文件放在服务器的静态资源目录里播放请求被同源策略拦截折腾了半天发现后端加一段 CORS 配置就解决了。这个我在后面后端章节展开讲。3. 后端 Spring Boot 设计与环境配置经验3.1 版本选型与环境配置的坑Spring Boot 的版本问题在热词里出现了好多次比如“springboot版本太高”“springboot配置”之类说明这是很多新手共同的痛点。我实习那会儿用 IntelliJ IDEA 创建项目默认拉到最新的 Spring Boot 版本结果跟公司内部的依赖一整合各种兼容性问题就冒出来了。我最终用的是 Spring Boot 2.7.x 版本。说句实话Spring Boot 3.x 虽然已经发布很久了但它基于 Jakarta EE很多老教程和老依赖还是用 javax 命名空间对实习生来说遇到问题搜索成本太高。2.7.x 是 2.x 系列的最后一个维护版本资料最多踩过的坑几乎都有现成的解决方案。数据库用了 MySQL 8.0持久层框架用的是 MyBatis Plus 而不是原生 MyBatis。原因很简单MyBatis Plus 内置了单表 CRUD 的通用方法不需要自己写 XML 映射文件开发效率高一大截。虽然面试的时候有人会杠“MyBatis Plus 不尊重 SQL”但实习项目就是要快速出活MyBatis Plus 完全够用复杂的多表查询照样可以写自定义 SQL。热词里有一个非常实用的问题“springboot mybatis 当表不存在自动建表”。实习期间我刚好遇到了这个需求部署到新环境时数据库里表结构还没初始化每次都手动导入 SQL 太痛苦。MyBatis Plus 提供了一个自动建表的扩展组件mybatis-plus-extension配合initialization-mode: always配置可以在应用启动时自动执行建表脚本# application.yml spring: sql: init: mode: always schema-locations: classpath:sql/schema.sql前提是schema.sql里的语句要写得足够健壮最好都带上IF NOT EXISTS否则每次启动都会尝试建表抛出“表已存在”的异常。3.2 核心业务后端的接口设计与实现后端接口我遵循的是 RESTful 风格用/api作为统一前缀。每个业务模块设计对应的 Controller、Service、Mapper 三层结构。拿饮食管理模块举例接口设计是这样方法路径功能GET/api/diet/list获取当前用户的饮食记录列表POST/api/diet/add新增一条饮食记录PUT/api/diet/update修改饮食记录DELETE/api/diet/delete/{id}删除饮食记录代码示例里最关键的其实是 Service 层的事务控制。比如用户新增一条饮食记录时不仅要插入记录本身还要同步更新“今日总摄入热量”这个冗余字段。这两个操作必须放在同一个事务里否则数据会不一致Service public class DietServiceImpl extends ServiceImplDietMapper, Diet implements DietService { Override Transactional(rollbackFor Exception.class) public boolean addDietRecord(DietDTO dto) { // 1. 插入饮食记录 Diet diet new Diet(); BeanUtils.copyProperties(dto, diet); this.save(diet); // 2. 更新当日热量统计 return calorieStatisticsService.updateDailyIntake(dto.getUserId(), dto.getIntakeCalorie()); } }注意Transactional注解里rollbackFor Exception.class这个参数。默认情况下 Spring 的事务管理只对 RuntimeException 生效如果方法抛的是 checked exception事务不会回滚这个细节面试经常问。3.3 Spring Boot 配置文件与安全加固配置Spring Boot 的配置文件是application.yml里面最核心的几块是数据源、服务器端口、MyBatis Plus 配置、JWT 配置。热词里有人搜“springboot yml 密文”说的是配置文件里的密码不能明文存储的问题。我在实习项目里实践了一把用 Jasypt 做配置项加密# application.yml spring: datasource: url: ENC(EncryptedDatabaseUrl) username: ENC(EncryptedUsername) password: ENC(EncryptedPassword) jasypt: encryptor: password: ${JASYPT_SECRET}Jasypt 的原理是用一个外部传入的主密钥去解密配置文件里的 ENC 密文即使配置文件泄露了攻击者也拿不到真正的数据库密码。当然这个方案只是增加了一层保护真正生产环境里更推荐用配置中心来管理敏感信息。热词里还有“springboot heapdump 敏感信息泄露漏洞”这个知识点值得特别注意。Spring Boot Actuator 的 heapdump 端点如果暴露在外网攻击者可以直接下载内存快照从中提取密码、token、数据库连接信息。实习的时候我竟然把这个风险忽略了后来被组长点名批评。解决方式很粗暴# 生产环境禁用不必要的端点 management: endpoints: web: exposure: include: health,info只暴露health和info端点其他的一律关闭。如果业务上确实需要 metrics 端点也要放到内网并通过权限控制访问。4. 前后端联调与核心功能实现4.1 接口联调中的 Token 处理方案前后端分离项目里Token 处理是联调阶段最磨人的环节。我参考了网上 vben admin 这类成熟模板的做法统一在 axios 请求拦截器里处理// utils/request.js const request axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer ${token} } return config })所有请求自动带上Authorization头后端通过拦截器解析并校验 token。这个方案的好处非常明显业务代码里不需要关心 token 在哪、怎么传全部在基础设施层处理干净了。后端的 JWT 校验我用的是 HandlerInterceptor ThreadLocal 的组合public class JwtInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) { String token request.getHeader(Authorization); if (StringUtils.hasText(token) token.startsWith(Bearer )) { token token.substring(7); // 解析 token将用户信息存入 ThreadLocal } // 校验失败则返回 401 response.setStatus(401); return false; } }Token 校验通过后把当前用户 ID 存到 ThreadLocal 里后续的 Controller 和 Service 层直接通过UserContext.getUserId()获取操作人不用在每个接口里反复解析 token。这个小工具类写起来不难但能让代码优雅很多。4.2 体重趋势模块的前后端实现过程体重趋势模块是前后端联调最典型的例子。前端需要根据用户选择的时间范围近 7 天、近 30 天、近 90 天展示折线图。前端逻辑在WeightTrend.vue里监听时间范围切换重新调用接口获取数据const loadWeightData async () { const res await getWeightTrend(selectedRange.value) if (res.data.code 200) { chartData.value res.data.data } }后端接口接收days参数按日期聚合查询GetMapping(/trend) public ResultListWeightTrendVO getTrend(RequestParam Integer days) { LocalDate startDate LocalDate.now().minusDays(days - 1); ListWeightRecord records weightMapper.selectList( new LambdaQueryWrapperWeightRecord() .ge(WeightRecord::getRecordDate, startDate) .eq(WeightRecord::getUserId, UserContext.getUserId()) .orderByAsc(WeightRecord::getRecordDate) ); return Result.success(convertToVO(records)); }这里有个设计上的小细节减肥期间体重数据不可能每天都有记录如果直接查出来什么画什么折线图会缺很多点。我在 VO 转换层做了日期补全把没有记录的日子用null填充前端 ECharts 的connectNulls: false配置会让断点处断开图表看起来更真实。4.3 部署上线从本地到服务器的完整路径实习报告的另一个亮点是部署经历。热词里有人搜“xshell 部署 vue 打完包前端”这确实是一个劳动密集但收获很大的环节。前端打包很简单npm run build打包完成后的dist目录是一个纯静态文件集合里面只有一个index.html和若干 JS/CSS 资源。我在服务器上用的是 Nginx 来托管前端文件后端用的是java -jar直接跑 Spring Boot jar 包。Nginx 配置里最关键的是一段反向代理server { listen 80; server_name your-domain.com; # 前端静态文件 root /data/web/dist; index index.html; # 解决 Vue Router history 模式刷新 404 的问题 location / { try_files $uri $uri/ /index.html; } # 后端接口反向代理 location /api/ { proxy_pass http://127.0.0.1:8080/api/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }第三行的try_files指令是 Vue Router history 模式部署的关键。如果不加这一行用户在/weight这种路径下刷新页面Nginx 找不到对应的物理文件会返回 404加了之后 Nginx 会把路由重定向到index.html由前端路由接管后续的页面渲染。后端启动命令我习惯写成脚本避免每次手敲长串参数#!/bin/bash nohup java -jar weight-fat-loss-server.jar \ --spring.profiles.activeprod \ --server.port8080 \ logs/app.log 21 nohup保证即使 SSH 窗口关闭进程也能继续运行。--spring.profiles.activeprod指定生产环境配置保持环境隔离。5. 常见问题与排查技巧实录5.1 前端高频问题速查实习期间前端踩过的坑我整理成了一张问题排查表问题现象根本原因解决方案Vue 对象赋值后页面不更新Vue 3 中用obj.xxx value新增属性非响应式使用reactive或ref包裹或利用Object.assign重新赋值路由跳转后页面不刷新Vue Router 复用组件实例导致 created 钩子不执行使用onBeforeRouteUpdate监听路由参数变化npm 安装依赖超时网络原因切换淘宝镜像源打包后文件太大全量引入了 ECharts改为按需引入Nginx 部署后刷新 404缺少try_files配置添加try_files $uri $uri/ /index.html;第一行那个“Vue 对象赋值页面不变”是热词里被频繁搜索的问题我实际也遇到过。原因是 Vue 3 的响应式系统是基于 Proxy 实现的如果给一个已经创建好的 reactive 对象动态添加新属性Proxy 是可以感知到的但如果用的是普通对象比如ref({})里的对象直接添加属性就不会触发视图更新。解决办法是预先定义好所有字段或者在赋值时把整个对象换掉。5.2 后端高频问题速查问题现象根本原因解决方案java -jar启动失败但本地 IDEA 正常生产环境依赖的 MySQL 连接不上检查防火墙、数据库账号权限、连接串写法存在 CORS 跨域报错前端请求未经允许跨域访问后端后端配置 CORS 或使用 Nginx 反向代理解决同源问题MyBatis Plus 自动建表不生效数据源初始化模式配错确认spring.sql.init.mode配置为alwaysheapdump 端点暴露安全基线不达标关闭多余 Actuator 端点接口返回 401 且前端白屏token 过期后未做拦截处理拦截器捕获 401 并跳转登录页5.3 我最想强调的两个经验教训实习里学到的东西很多但最想分享的是这两个。第一日志是你最好的调试工具。前后端联调出问题时新手第一反应是打 UI看接口返回了什么。但实际上问题经常出现在调用链的中间层。我排查过一个问题前端明明传了正确的userId后端查到的记录却是空的。后来看日志发现数据库表里的user_id字段是 bigint 类型而我传入的是一个 Integer 类型的uidMyBatis 类型转换直接失败了。如果没有日志这种问题能查一天。Spring Boot 里使用Slf4j注解配上 Lombok然后直接用log.info()、log.error()打日志断点调试反而没有这个高效特别是生产环境没法打断点。第二写实习报告和做项目一样重要。如果一个功能你自己都没想清楚为什么这么做答辩的时候被问两句就露馅了。我的做法是每完成一个模块就在项目文档里记录三件事这个模块解决了什么问题、技术上踩了什么坑、还有什么可改进的空间。最后实习报告其实就是把这份文档结构化整理一遍工作量小很多而且内容真诚不像是拼凑课设出来的。6. 实习项目总结与后续可扩展方向严格来说我建议你把这部分当成项目的复盘问答来用而不是单纯的大段总结。写报告的时候其实就是回答三个问题项目做了什么、你怎么做的、如果没有你它会怎么样。减肥网站这个项目本身并不复杂但它的价值在于完整覆盖了一个前后端分离项目从开发到上线的全部流程。如果你在写自己的实习报告可以试着把视角拔高一点不只是写“我实现了十个接口”而是写“我通过这个项目理解了系统设计、团队协作、代码规范、部署运维的完整链路”。面试官真正想听的是这个。后续可扩展的方向我列几个都是真实业务里出现过或可能有用的引入 Redis 做缓存优化体重排行榜和高频热帖的查询效率引入 RabbitMQ 做消息队列支持社区帖子的异步通知接入第三方登录微信或飞书降低注册门槛把计划推荐模块的简单公式替换为机器学习算法用户画像饮食偏好前端加上移动端适配做一套响应式界面最后再分享一个实际体会实习报告不是写给人看的是写给三个月前的自己看的。如果读完报告你能想起来当时为什么踩坑、怎么把坑填平这个项目就真正的属于你了。祝你答辩顺利。

Vue+Spring Boot前后端分离实战：减肥网站开发与部署踩坑全记录

相关推荐

可靠性三综合试验全流程解析：从原理到实操要点

Jackett 完整指南：把 500 多个追踪站汇成统一种子搜索入口

Duix.Avatar 本地部署教程：跑通一套免费的全离线 AI 数字人视频生成器

更多资讯

数字城管智慧城市大脑建设方案解析

AlphaFold 蛋白质设计怎么筛选突变方案：4 个判断阈值与 5 个易踩的坑

scientific-agent-skills 之 optimize-for-gpu：RAPIDS 与 NVIDIA GPU 库选型决策框架实战指南

awesome-copilot 中的 DevOps 核心原则：以 CALMS 框架与 DORA 指标驱动 GitHub Copilot 的软件交付实践

Dataiku DSS数据集特性分析与优化实践

基于YOLOv8的食物卡路里检测与估算系统实战

今日更新

Linux 内核 ARM 虚拟内存布局全解析：从 4GB 地址空间划分到源码级验证

AIGC降重工具测评与教育应用指南

数据容灾核心指标与实战方案解析

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？