毕业后第一次做全栈项目不少人会直接选“宠物健康顾问系统”。说实话这个题目在毕设和课设里出现的频率相当高数据模型清晰、业务边界明确、技术栈又刚好踩在主流Java后端和前端框架上用来锻炼完整的项目开发流程再合适不过。这篇博文不打算搞代码逐行翻译而是把我在做同类系统时梳理过的设计思路、关键实现和踩坑记录一次讲干净。内容会围绕 SpringBoot Vue Java MySQL 的组合展开重点拆解怎么把“宠物健康顾问”这个业务变成一套能跑的源码而不是停留在抄表、增删改查的层面。先说这个系统是干什么的。宠物健康顾问系统的核心是把宠物主人和健康服务提供方连起来。用户可以创建宠物档案、记录日常体征、提交健康咨询管理员可以管理用户、维护知识库、分配咨询资源。底层的本质是围绕“宠物”这个业务主体做一套带权限区分的数据管理平台做得好的版本还会叠加上单状态流转和内容审核机制。对于毕设来说这个规模的业务闭环刚刚好——既覆盖了常见的 CRUD也涉及了登录鉴权、表关联、前后端交互但又不会复杂到让人没时间写论文。从技术选型上看后端用 SpringBoot 是合理的它让很多人不用手动配置复杂的 XML直接通过注解就能快速把接口暴露出来。配合 Java 8 及以上版本的 Lambda 写法代码量比传统 SSM 少一大截。前端用 Vue 则是因为它的组件化开发模式非常适合管理后台这类页面重复度高的场景配合 Element UI 一类的组件库表单、表格、弹窗都能在这个框架里快速组装起来。数据库不用多说MySQL 在校园项目和中小型系统中几乎是默认选项免费、稳定关于它的博客和教程数量也是最多的遇到问题搜得到答案。不过选这个项目有价值的地方不只在技术更在于它的业务建模过程。宠物档案、用户、咨询记录这几个实体之间的关联关系实际上是在模拟真实系统的设计逻辑。如果只是照着现成源码抄一遍忽略表结构背后的思考开发完还是不会有提升。我在后面几节会把实体设计、接口规划、前后端联调、打包部署这些重头戏逐步拆开希望你看完能自己动手写而不是拿着代码包照搬。1. 整体设计思路与模块边界1.1 用户角色与业务闭环宠物健康顾问系统的角色划分直接决定整张表的结构和权限体系。通常我会把系统拆成两类端一个给普通用户用一个给系统管理员用。用户端聚焦宠物档案的创建和健康记录的提交管理员端则负责审核这些数据、管理基础信息比如宠物品种、常见疾病标签。这也是答辩环节里最常被问到的部分理清角色才能把功能边界画清楚。角色划分清楚之后业务闭环就变得很自然用户注册登录完善个人资料创建宠物档案录入宠物基本信息提交健康咨询或记录异常体征系统保存数据并在后台生成待处理任务管理员登录后台查看、处理。一个咨询状态可能经历“待处理—处理中—已完成”的流转也可以通过状态字段直接推进。这些逻辑如果提前画好状态图写代码时就不容易乱。1.2 技术栈选型与版本搭配SpringBoot 版本建议用 2.7.x不会太高也不会太旧社区教程丰富兼容性相对稳妥。Java 版本就用 8 或 11大部分学校的实训环境都预装了 JDK 8避免因为版本兼容浪费精力。前端使用 Vue 2 Element UI配合 Axios 做请求发送后端接口用 RESTful 风格暴露给前端调用。数据库选 MySQL 5.7 或者 8.0 都可以。如果环境是 Windows直接装 MySQL 8.0 问题不大如果是在云服务器上部署5.7 的镜像更方便。ORM 层面习惯用 MyBatis-Plus它内置了通用的 CRUD 方法连简单的分页查询都可以直接调 API省下大量重复代码。还有一点要注意MySQL 8.0 的驱动包名改成了com.mysql.cj.jdbc.Driver用老配置会报错环境适配时容易踩坑。2. 数据库设计与核心实体拆解2.1 表结构规划从用户到宠物档案表设计是一切的基础。我习惯先把数据库拆成用户表、宠物表、健康档案表、咨询表、管理员表这几张核心表再按需增加知识库表或系统配置表。用户表至少包含id、username、password、phone、email、create_time这些字段。密码必须加密存储不能明文入库MD5 已经不太安全推荐用 BCrypt 加密。宠物表是整个系统的业务核心字段要覆盖宠物名称、种类、品种、性别、生日、体重、是否绝育、疫苗接种情况等。还要考虑与用户表的外键关联通过user_id知道这只宠物属于哪个用户。这里建议不要省掉唯一的宠物 ID同时创建一个index提升查询效率因为在健康档案页面经常要按宠物 ID 查记录。健康档案表稍微复杂一点记录体温、体重、食欲状态、精神状态、异常描述、记录时间。由于一只宠物会有多条记录档案表要用pet_id作为外键创建时间作为排序字段。咨询表则要包含咨询标题、内容描述、图片附件地址、咨询状态、管理员回复内容等字段。写咨询表时把状态字段定为数字比如 0待处理1处理中2已完成前后端都用数字传递前端再根据数字映射文本避免直接存中文。2.2 表关联关系与查询设计一个用户对应多只宠物一只宠物对应多条健康档案一条咨询记录归属于某个用户。如果后续扩展知识库管理员维护的疾病字典也可以和咨询表做关联。这样的关系在数据库层面表现为一对多在 Java 实体类中就是TableId和TableField的相互配合。用 MyBatis-Plus 写单表 CRUD 很容易多表关联可以写 XML 中的自定义 SQL也可以用 Wrapper 做查询条件拼接。一个小建议宠物列表页尽量不要用全表查询再分页那样数据量大了会卡。可以在 SQL 中带条件比如SELECT * FROM pet WHERE user_id ? ORDER BY create_time DESC LIMIT ? OFFSET ?。合理使用分页参数前端传 pageNum 和 pageSize后端用 MyBatis-Plus 的Page对象封装返回结果。这样接口在答辩演示时响应速度会好看很多。3. 后端接口设计与业务逻辑实现3.1 Controller 层规划与响应体封装接口设计决定了前后端联调是否顺畅。我习惯把类按模块划分UserController、PetController、HealthRecordController、ConsultationController、AdminController。每个控制器里只放与当前实体相关的接口避免出现一个大类管所有东西的情况。基础路径使用/api/user、/api/pet这种带前缀的风格后续配置拦截器和鉴权也简单。接口返回值建议统一封装。定义一个Result类包含code、message、data三个字段。成功时 code 为 200失败时根据场景返回 400 或 500。这样的好处是前端 Axios 拦截器可以统一判断 code不用在每个请求回调里重复处理错误分支。public class ResultT { private Integer code; private String message; private T data; // 省略 getter/setter }Controller 里返回Result.success(data)或者Result.error(参数错误)语义明确前端拿到响应后直接根据 code 做界面反馈。这个小习惯在春秋招面试时也可以作为一个亮点聊。3.2 登录鉴权与 Token 方案毕设项目的登录鉴权不需要引入重型的 Spring Security 配置做好 JWT 就足够。用户输入用户名密码后端校验通过后生成一个 Token 返回前端。前端把 Token 存到localStorage或sessionStorage后续每个请求都在请求头里带上Authorization字段。后端写一个拦截器对需要认证的路径做 Token 校验校验不通过就返回 401。生成 JWT 时密钥建议单独配置在application.yml里不要硬编码到类中。Token 中携带用户 ID 和用户名过期时间设置为 2 小时。拦截器解析 Token 时把用户信息放到ThreadLocal或请求 Attribute 中这样在 Controller 里可以直接拿到当前登录用户然后用来过滤数据。比如查询宠物列表时只查询user_id 当前用户ID的记录安全性就会好很多。String token request.getHeader(Authorization); Claims claims JwtUtil.parseToken(token); Long userId claims.get(userId, Long.class);3.3 核心服务逻辑宠物档案与健康记录宠物档案模块做的事情比较常规新增宠物、编辑宠物、删除宠物、查看宠物列表。删除操作要注意一个坑就是如果有健康档案关联这只宠物删除前要么级联删除要么提示“该宠物下存在健康档案无法删除”。我在项目里习惯用逻辑删除也就是在表中增加deleted字段删除时执行UPDATE ... SET deleted 1而不是物理删除DELETE FROM ...。逻辑删除的好处是数据可恢复答辩时也能解释清楚为什么这么设计。健康记录模块的核心在于记录录入和记录展示。录入时前端提交体温、体重、症状描述等字段后端先校验必填项再写入health_record表。展示时按宠物 ID 查询按时间倒序排列前端用列表或折线图展示体温变化趋势。折线图可以用 ECharts 实现把后端返回的时间节点和体温数据映射成图表坐标视觉效果会比单纯的表格好很多也是评分时容易拿印象分的点。4. 前端页面设计与联调实践4.1 Vue 工程结构与路由划分Vue 端我习惯用 Vue CLI 创建项目版本选 2因为 Element UI 与 Vue 2 的配合最成熟。工程内部按页面划分登录页、注册页、首页、宠物管理页、健康记录页、咨询页、个人中心页。如果项目里包含管理员端再把页面分成views/user和views/admin两个目录路由也分开写。Vue Router 配置时要注意用懒加载方式引入组件这样首次加载首页不会被全部页面拖慢。比如component: () import(/views/admin/AdminDashboard.vue)。虽然项目规模小、加载差异不明显但这种写法更接近生产项目的风格。路由守卫也是关键一环如果用户没登录就访问内部页面直接重定向到登录页面。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })4.2 Axios 封装与请求统一管理Axios 是 Vue 项目里最常用的 HTTP 请求库。建议把所有请求集中放到src/api目录每个页面一个 API 文件比如pet.js文件里导出获取宠物列表、新增宠物、编辑宠物这些方法。这样做的最大好处是页面组件代码干净后端路径变了只需要改一个文件。请求拦截器里统一加入 Token响应拦截器里处理公共错误。比如 Token 失效时后端返回 401前端直接跳转登录页。网络错误时统一弹出消息提示。这样单个页面的业务逻辑就只关心数据和交互不用每处都重复写错误处理的代码。service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config })4.3 关键页面表单校验与数据回显宠物管理页面是典型的新增编辑一体的表单页面。点击新增按钮弹窗表单清空点击编辑按钮弹窗回显当前行数据。Element UI 的表单校验规则配置在data中必填项指定required: true提交前调用this.$refs.form.validate()做校验。这里最容易犯的错误是忘记在编辑回显时重置表单校验状态导致已经提示过的错误消息一直留在页面上影响交互体验。健康记录页面我比较推荐做成卡片式布局时间、体温、体重、症状描述一目了然。条件筛选区放一个时间范围和宠物选择器筛选参数传到后端做动态查询。咨询页的核心是提交咨询表单上传图片用 Element UI 的 Upload 组件上传成功后拿到 URL 再随表单提交到后端。这个上传接口如果用本地存储需要自己在后端完成文件流写入操作如果暂时不想处理也可以先只存图片名称不做物理存储。5. 项目部署与打包细节5.1 前后端联调与跨域问题开发环境下的前后端联调最常碰到的问题是跨域。Vue 开发服务器默认端口是 8080后端 SpringBoot 端口是 8081 或 8082不同端口之间发请求属于跨域浏览器会拦截。解决办法有两种后端加CrossOrigin注解或配置全局 CORS 过滤器前端在 vue.config.js 里配置 devServer 的 proxy 代理。我个人更推荐用代理方式。前端请求的地址写成/api开发服务器把/api开头的请求转发到http://localhost:8081这样浏览器看到的是同源请求能有效规避跨域问题。后端也不需要额外加 CORS 配置代码更干净。部署到服务器后再用 Nginx 做反向代理把同一个域名的不同路径转发到前后端服务整个链路就顺了。devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true } } }5.2 SpringBoot 工程打包与运行后端打包用 Maven 的 package 命令打包前确认application.yml里的数据库地址是否已经改成部署环境所用的地址。执行mvn clean package -DskipTests后在target目录下找到 jar 包用java -jar 项目名.jar启动。如果是在 Linux 服务器上跑建议用nohup让进程在后台运行。前端打包用npm run build生成dist目录。部署时可以把dist里的文件直接丢到 Nginx 的html目录下然后把/api路径代理到后端的 SpringBoot 服务。这个方案的好处是只需暴露一个端口后端接口不直接暴露给外部安全性和整洁度都好一些。5.3 线上部署遇到端口和路径问题有两次部署经历让我印象比较深。一次是服务器上同时跑了其他服务MySQL 默认 3306 端口已经被占用只能改到 3307 端口结果后端连不上数据库。排查时发现连接串没有改端口改完之后一切正常。另一次是前端打包后静态资源路径不对页面白屏打开控制台发现 JS 文件路径带了绝对路径定位不到资源。后来在vue.config.js里设置了publicPath: ./问题就解决了。类似的细节如果不注意本地跑得再好一上服务器就翻车。6. 常见问题整理与排查思路6.1 数据库连接报错处理刚建好工程启动时最常见的是数据库连接失败报Access denied for user或者Communications link failure。前者是用户名或密码错误检查application.yml里的账号密码是否和 MySQL 一致后者多半是端口、IP 没写对或者 MySQL 服务没启动。Windows 上如果安装 MySQL 8.0还要确认驱动依赖版本是 8.x不要用 MySQL 5.x 的驱动。还有一个隐藏问题是时区报错启动日志显示The server time zone value Öйú±ê׼ʱ¼ä is unrecognized。解决方案是在连接串后面加?serverTimezoneAsia/Shanghai。这个问题在本地 MySQL 5.7 上不常见换成 MySQL 8.0 就要注意。6.2 前端接口返回后数据渲染异常页面能启动但表格或列表区域空白这是前后端联调时的高频问题。先打开浏览器开发者工具看 Network 面板确认请求是否发出、状态码是什么、响应体是否正常。如果请求状态码是 200但列表还是空重点检查返回数据的字段名是否和前端绑定字段一致。比如后端返回pet_name前端页面写的是petName字段对不上就渲染不出来这类问题用 JSON 格式化工具一眼就能看出来。6.3 登录成功但访问接口报 401登录成功说明 Token 生成正常后续接口报 401大多是请求头里没带 Token或者 Token 格式和拦截器校验的格式不一致。检查前端 Axios 拦截器里是否设置了Authorization头检查后端拦截器解析 Token 时是否对字符串做了特殊处理。如果用了“Bearer ”前缀前后端就要统一。项目规模不大时直接不带前缀更省事。7. 从源码到答辩我再多唠叨几句我见过太多人把源码下载下来能跑通但答辩被问一句“你这个表为什么这么设计”就卡壳。所以源码可以借助现成项目但一定要自己把表结构、接口流程、状态流转从头捋一遍。哪怕是照着代码把流程图画出来也比完全不看强。答辩时重点准备几个地方登录鉴权怎么做、宠物和健康档案怎么关联、咨询状态怎么流转、部署时用到了哪些中间件。如果你是在这个项目基础上做二次开发可以考虑加入一些加分项。比如用 Redis 缓存热点数据像宠物品种列表这种基本不变的数据没必要每次都查数据库给咨询模块加入通知机制管理员处理完咨询后用户登录首页能看到未读消息健康记录模块用 ECharts 绘制体重趋势图视觉反馈更强。这些都是低成本高回报的扩展点做完后整体项目的完成度会明显提升。最后再分享一个我个人的习惯。写这类全栈项目时我建议把数据库建表脚本单独存一份不要依赖自动生成功能因为答辩和演示时可能需要在一台新电脑上快速把环境搭起来一份完整的 SQL 脚本能省很多时间。前端接口请求封装好后先把所有接口的假数据跑通再对接真实后端定位问题时就不会前后端互相甩锅。项目本身是固定的但每个人做出来的细节都不一样。把表设计做严谨、接口写规范、页面交互做完整这套源码到你手上就不会只是一个能跑通的演示品而是真正能展示你全栈能力的作品。
SpringBoot+Vue宠物健康顾问系统全栈开发实战解析
毕业后第一次做全栈项目不少人会直接选“宠物健康顾问系统”。说实话这个题目在毕设和课设里出现的频率相当高数据模型清晰、业务边界明确、技术栈又刚好踩在主流Java后端和前端框架上用来锻炼完整的项目开发流程再合适不过。这篇博文不打算搞代码逐行翻译而是把我在做同类系统时梳理过的设计思路、关键实现和踩坑记录一次讲干净。内容会围绕 SpringBoot Vue Java MySQL 的组合展开重点拆解怎么把“宠物健康顾问”这个业务变成一套能跑的源码而不是停留在抄表、增删改查的层面。先说这个系统是干什么的。宠物健康顾问系统的核心是把宠物主人和健康服务提供方连起来。用户可以创建宠物档案、记录日常体征、提交健康咨询管理员可以管理用户、维护知识库、分配咨询资源。底层的本质是围绕“宠物”这个业务主体做一套带权限区分的数据管理平台做得好的版本还会叠加上单状态流转和内容审核机制。对于毕设来说这个规模的业务闭环刚刚好——既覆盖了常见的 CRUD也涉及了登录鉴权、表关联、前后端交互但又不会复杂到让人没时间写论文。从技术选型上看后端用 SpringBoot 是合理的它让很多人不用手动配置复杂的 XML直接通过注解就能快速把接口暴露出来。配合 Java 8 及以上版本的 Lambda 写法代码量比传统 SSM 少一大截。前端用 Vue 则是因为它的组件化开发模式非常适合管理后台这类页面重复度高的场景配合 Element UI 一类的组件库表单、表格、弹窗都能在这个框架里快速组装起来。数据库不用多说MySQL 在校园项目和中小型系统中几乎是默认选项免费、稳定关于它的博客和教程数量也是最多的遇到问题搜得到答案。不过选这个项目有价值的地方不只在技术更在于它的业务建模过程。宠物档案、用户、咨询记录这几个实体之间的关联关系实际上是在模拟真实系统的设计逻辑。如果只是照着现成源码抄一遍忽略表结构背后的思考开发完还是不会有提升。我在后面几节会把实体设计、接口规划、前后端联调、打包部署这些重头戏逐步拆开希望你看完能自己动手写而不是拿着代码包照搬。1. 整体设计思路与模块边界1.1 用户角色与业务闭环宠物健康顾问系统的角色划分直接决定整张表的结构和权限体系。通常我会把系统拆成两类端一个给普通用户用一个给系统管理员用。用户端聚焦宠物档案的创建和健康记录的提交管理员端则负责审核这些数据、管理基础信息比如宠物品种、常见疾病标签。这也是答辩环节里最常被问到的部分理清角色才能把功能边界画清楚。角色划分清楚之后业务闭环就变得很自然用户注册登录完善个人资料创建宠物档案录入宠物基本信息提交健康咨询或记录异常体征系统保存数据并在后台生成待处理任务管理员登录后台查看、处理。一个咨询状态可能经历“待处理—处理中—已完成”的流转也可以通过状态字段直接推进。这些逻辑如果提前画好状态图写代码时就不容易乱。1.2 技术栈选型与版本搭配SpringBoot 版本建议用 2.7.x不会太高也不会太旧社区教程丰富兼容性相对稳妥。Java 版本就用 8 或 11大部分学校的实训环境都预装了 JDK 8避免因为版本兼容浪费精力。前端使用 Vue 2 Element UI配合 Axios 做请求发送后端接口用 RESTful 风格暴露给前端调用。数据库选 MySQL 5.7 或者 8.0 都可以。如果环境是 Windows直接装 MySQL 8.0 问题不大如果是在云服务器上部署5.7 的镜像更方便。ORM 层面习惯用 MyBatis-Plus它内置了通用的 CRUD 方法连简单的分页查询都可以直接调 API省下大量重复代码。还有一点要注意MySQL 8.0 的驱动包名改成了com.mysql.cj.jdbc.Driver用老配置会报错环境适配时容易踩坑。2. 数据库设计与核心实体拆解2.1 表结构规划从用户到宠物档案表设计是一切的基础。我习惯先把数据库拆成用户表、宠物表、健康档案表、咨询表、管理员表这几张核心表再按需增加知识库表或系统配置表。用户表至少包含id、username、password、phone、email、create_time这些字段。密码必须加密存储不能明文入库MD5 已经不太安全推荐用 BCrypt 加密。宠物表是整个系统的业务核心字段要覆盖宠物名称、种类、品种、性别、生日、体重、是否绝育、疫苗接种情况等。还要考虑与用户表的外键关联通过user_id知道这只宠物属于哪个用户。这里建议不要省掉唯一的宠物 ID同时创建一个index提升查询效率因为在健康档案页面经常要按宠物 ID 查记录。健康档案表稍微复杂一点记录体温、体重、食欲状态、精神状态、异常描述、记录时间。由于一只宠物会有多条记录档案表要用pet_id作为外键创建时间作为排序字段。咨询表则要包含咨询标题、内容描述、图片附件地址、咨询状态、管理员回复内容等字段。写咨询表时把状态字段定为数字比如 0待处理1处理中2已完成前后端都用数字传递前端再根据数字映射文本避免直接存中文。2.2 表关联关系与查询设计一个用户对应多只宠物一只宠物对应多条健康档案一条咨询记录归属于某个用户。如果后续扩展知识库管理员维护的疾病字典也可以和咨询表做关联。这样的关系在数据库层面表现为一对多在 Java 实体类中就是TableId和TableField的相互配合。用 MyBatis-Plus 写单表 CRUD 很容易多表关联可以写 XML 中的自定义 SQL也可以用 Wrapper 做查询条件拼接。一个小建议宠物列表页尽量不要用全表查询再分页那样数据量大了会卡。可以在 SQL 中带条件比如SELECT * FROM pet WHERE user_id ? ORDER BY create_time DESC LIMIT ? OFFSET ?。合理使用分页参数前端传 pageNum 和 pageSize后端用 MyBatis-Plus 的Page对象封装返回结果。这样接口在答辩演示时响应速度会好看很多。3. 后端接口设计与业务逻辑实现3.1 Controller 层规划与响应体封装接口设计决定了前后端联调是否顺畅。我习惯把类按模块划分UserController、PetController、HealthRecordController、ConsultationController、AdminController。每个控制器里只放与当前实体相关的接口避免出现一个大类管所有东西的情况。基础路径使用/api/user、/api/pet这种带前缀的风格后续配置拦截器和鉴权也简单。接口返回值建议统一封装。定义一个Result类包含code、message、data三个字段。成功时 code 为 200失败时根据场景返回 400 或 500。这样的好处是前端 Axios 拦截器可以统一判断 code不用在每个请求回调里重复处理错误分支。public class ResultT { private Integer code; private String message; private T data; // 省略 getter/setter }Controller 里返回Result.success(data)或者Result.error(参数错误)语义明确前端拿到响应后直接根据 code 做界面反馈。这个小习惯在春秋招面试时也可以作为一个亮点聊。3.2 登录鉴权与 Token 方案毕设项目的登录鉴权不需要引入重型的 Spring Security 配置做好 JWT 就足够。用户输入用户名密码后端校验通过后生成一个 Token 返回前端。前端把 Token 存到localStorage或sessionStorage后续每个请求都在请求头里带上Authorization字段。后端写一个拦截器对需要认证的路径做 Token 校验校验不通过就返回 401。生成 JWT 时密钥建议单独配置在application.yml里不要硬编码到类中。Token 中携带用户 ID 和用户名过期时间设置为 2 小时。拦截器解析 Token 时把用户信息放到ThreadLocal或请求 Attribute 中这样在 Controller 里可以直接拿到当前登录用户然后用来过滤数据。比如查询宠物列表时只查询user_id 当前用户ID的记录安全性就会好很多。String token request.getHeader(Authorization); Claims claims JwtUtil.parseToken(token); Long userId claims.get(userId, Long.class);3.3 核心服务逻辑宠物档案与健康记录宠物档案模块做的事情比较常规新增宠物、编辑宠物、删除宠物、查看宠物列表。删除操作要注意一个坑就是如果有健康档案关联这只宠物删除前要么级联删除要么提示“该宠物下存在健康档案无法删除”。我在项目里习惯用逻辑删除也就是在表中增加deleted字段删除时执行UPDATE ... SET deleted 1而不是物理删除DELETE FROM ...。逻辑删除的好处是数据可恢复答辩时也能解释清楚为什么这么设计。健康记录模块的核心在于记录录入和记录展示。录入时前端提交体温、体重、症状描述等字段后端先校验必填项再写入health_record表。展示时按宠物 ID 查询按时间倒序排列前端用列表或折线图展示体温变化趋势。折线图可以用 ECharts 实现把后端返回的时间节点和体温数据映射成图表坐标视觉效果会比单纯的表格好很多也是评分时容易拿印象分的点。4. 前端页面设计与联调实践4.1 Vue 工程结构与路由划分Vue 端我习惯用 Vue CLI 创建项目版本选 2因为 Element UI 与 Vue 2 的配合最成熟。工程内部按页面划分登录页、注册页、首页、宠物管理页、健康记录页、咨询页、个人中心页。如果项目里包含管理员端再把页面分成views/user和views/admin两个目录路由也分开写。Vue Router 配置时要注意用懒加载方式引入组件这样首次加载首页不会被全部页面拖慢。比如component: () import(/views/admin/AdminDashboard.vue)。虽然项目规模小、加载差异不明显但这种写法更接近生产项目的风格。路由守卫也是关键一环如果用户没登录就访问内部页面直接重定向到登录页面。router.beforeEach((to, from, next) { const token localStorage.getItem(token) if (to.meta.requiresAuth !token) { next(/login) } else { next() } })4.2 Axios 封装与请求统一管理Axios 是 Vue 项目里最常用的 HTTP 请求库。建议把所有请求集中放到src/api目录每个页面一个 API 文件比如pet.js文件里导出获取宠物列表、新增宠物、编辑宠物这些方法。这样做的最大好处是页面组件代码干净后端路径变了只需要改一个文件。请求拦截器里统一加入 Token响应拦截器里处理公共错误。比如 Token 失效时后端返回 401前端直接跳转登录页。网络错误时统一弹出消息提示。这样单个页面的业务逻辑就只关心数据和交互不用每处都重复写错误处理的代码。service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config })4.3 关键页面表单校验与数据回显宠物管理页面是典型的新增编辑一体的表单页面。点击新增按钮弹窗表单清空点击编辑按钮弹窗回显当前行数据。Element UI 的表单校验规则配置在data中必填项指定required: true提交前调用this.$refs.form.validate()做校验。这里最容易犯的错误是忘记在编辑回显时重置表单校验状态导致已经提示过的错误消息一直留在页面上影响交互体验。健康记录页面我比较推荐做成卡片式布局时间、体温、体重、症状描述一目了然。条件筛选区放一个时间范围和宠物选择器筛选参数传到后端做动态查询。咨询页的核心是提交咨询表单上传图片用 Element UI 的 Upload 组件上传成功后拿到 URL 再随表单提交到后端。这个上传接口如果用本地存储需要自己在后端完成文件流写入操作如果暂时不想处理也可以先只存图片名称不做物理存储。5. 项目部署与打包细节5.1 前后端联调与跨域问题开发环境下的前后端联调最常碰到的问题是跨域。Vue 开发服务器默认端口是 8080后端 SpringBoot 端口是 8081 或 8082不同端口之间发请求属于跨域浏览器会拦截。解决办法有两种后端加CrossOrigin注解或配置全局 CORS 过滤器前端在 vue.config.js 里配置 devServer 的 proxy 代理。我个人更推荐用代理方式。前端请求的地址写成/api开发服务器把/api开头的请求转发到http://localhost:8081这样浏览器看到的是同源请求能有效规避跨域问题。后端也不需要额外加 CORS 配置代码更干净。部署到服务器后再用 Nginx 做反向代理把同一个域名的不同路径转发到前后端服务整个链路就顺了。devServer: { port: 8080, proxy: { /api: { target: http://localhost:8081, changeOrigin: true } } }5.2 SpringBoot 工程打包与运行后端打包用 Maven 的 package 命令打包前确认application.yml里的数据库地址是否已经改成部署环境所用的地址。执行mvn clean package -DskipTests后在target目录下找到 jar 包用java -jar 项目名.jar启动。如果是在 Linux 服务器上跑建议用nohup让进程在后台运行。前端打包用npm run build生成dist目录。部署时可以把dist里的文件直接丢到 Nginx 的html目录下然后把/api路径代理到后端的 SpringBoot 服务。这个方案的好处是只需暴露一个端口后端接口不直接暴露给外部安全性和整洁度都好一些。5.3 线上部署遇到端口和路径问题有两次部署经历让我印象比较深。一次是服务器上同时跑了其他服务MySQL 默认 3306 端口已经被占用只能改到 3307 端口结果后端连不上数据库。排查时发现连接串没有改端口改完之后一切正常。另一次是前端打包后静态资源路径不对页面白屏打开控制台发现 JS 文件路径带了绝对路径定位不到资源。后来在vue.config.js里设置了publicPath: ./问题就解决了。类似的细节如果不注意本地跑得再好一上服务器就翻车。6. 常见问题整理与排查思路6.1 数据库连接报错处理刚建好工程启动时最常见的是数据库连接失败报Access denied for user或者Communications link failure。前者是用户名或密码错误检查application.yml里的账号密码是否和 MySQL 一致后者多半是端口、IP 没写对或者 MySQL 服务没启动。Windows 上如果安装 MySQL 8.0还要确认驱动依赖版本是 8.x不要用 MySQL 5.x 的驱动。还有一个隐藏问题是时区报错启动日志显示The server time zone value Öйú±ê׼ʱ¼ä is unrecognized。解决方案是在连接串后面加?serverTimezoneAsia/Shanghai。这个问题在本地 MySQL 5.7 上不常见换成 MySQL 8.0 就要注意。6.2 前端接口返回后数据渲染异常页面能启动但表格或列表区域空白这是前后端联调时的高频问题。先打开浏览器开发者工具看 Network 面板确认请求是否发出、状态码是什么、响应体是否正常。如果请求状态码是 200但列表还是空重点检查返回数据的字段名是否和前端绑定字段一致。比如后端返回pet_name前端页面写的是petName字段对不上就渲染不出来这类问题用 JSON 格式化工具一眼就能看出来。6.3 登录成功但访问接口报 401登录成功说明 Token 生成正常后续接口报 401大多是请求头里没带 Token或者 Token 格式和拦截器校验的格式不一致。检查前端 Axios 拦截器里是否设置了Authorization头检查后端拦截器解析 Token 时是否对字符串做了特殊处理。如果用了“Bearer ”前缀前后端就要统一。项目规模不大时直接不带前缀更省事。7. 从源码到答辩我再多唠叨几句我见过太多人把源码下载下来能跑通但答辩被问一句“你这个表为什么这么设计”就卡壳。所以源码可以借助现成项目但一定要自己把表结构、接口流程、状态流转从头捋一遍。哪怕是照着代码把流程图画出来也比完全不看强。答辩时重点准备几个地方登录鉴权怎么做、宠物和健康档案怎么关联、咨询状态怎么流转、部署时用到了哪些中间件。如果你是在这个项目基础上做二次开发可以考虑加入一些加分项。比如用 Redis 缓存热点数据像宠物品种列表这种基本不变的数据没必要每次都查数据库给咨询模块加入通知机制管理员处理完咨询后用户登录首页能看到未读消息健康记录模块用 ECharts 绘制体重趋势图视觉反馈更强。这些都是低成本高回报的扩展点做完后整体项目的完成度会明显提升。最后再分享一个我个人的习惯。写这类全栈项目时我建议把数据库建表脚本单独存一份不要依赖自动生成功能因为答辩和演示时可能需要在一台新电脑上快速把环境搭起来一份完整的 SQL 脚本能省很多时间。前端接口请求封装好后先把所有接口的假数据跑通再对接真实后端定位问题时就不会前后端互相甩锅。项目本身是固定的但每个人做出来的细节都不一样。把表设计做严谨、接口写规范、页面交互做完整这套源码到你手上就不会只是一个能跑通的演示品而是真正能展示你全栈能力的作品。