Spring Boot + Vue前后端分离的宠物管理系统开发实战

先说说这个项目是怎么来的。当时家里养了只猫，疫苗本翻得卷了边，驱虫日期全靠手机闹钟硬记，换一家宠物医院复查就得从头讲一遍病史。身边养狗养猫的朋友也差不多，信息散在聊天记录、纸质本子和朋友圈里，真要找某一次的就诊记录，比翻旧账还难。后来琢磨着，这种事靠备忘录不是办法，干脆做一个宠物管理系统，把所有跟宠物相关的数据放到统一的地方管理起来。于是就有了这个基于 Java 和 Vue 的前后端分离项目，整套交付包括源码、数据库脚本和配套文档。

这个系统不是只做一个宠物档案增删改查那么简单，它涵盖了宠物信息管理、疫苗驱虫记录、健康档案、寄养与领养业务、用户权限管理等环节。对正在做课程设计的学生、想练习前后端分离项目的初级开发者来说，它是很好的参考模板；对想给自家宠物医院或宠物店搭内部管理工具的人来说，它的结构和思路也能直接借鉴。下面我就把整个项目的完整拆解写出来，从功能梳理、技术选型、数据库设计，到后端接口实现、前端页面搭建、本地运行与交付注意事项，一次性讲清楚。

1. 先想清楚管理什么：宠物管理系统的功能边界

做这类项目最容易犯的毛病是一上来就写代码。实际上，宠物管理系统的核心难点不是技术，是“业务边界”。到底要管哪些数据？谁在使用系统？每个角色能看到和操作什么？这些想不明白，代码写一半就会返工。

1.1 从用户角色反推功能模块

我把系统用户分成三类：系统管理员、宠物主人（普通用户）、前台接待人员（适用于宠物店或小型宠物医院场景）。管理员负责维护基础数据、管理所有用户和宠物档案；宠物主人负责维护自家宠物的资料和健康记录；接待人员则侧重于寄养订单和领养申请的登记处理。按这个角色划分，功能模块就清晰了：

• 宠物档案管理：新增、编辑、删除、查询宠物信息，上传宠物照片，绑定主人
• 疫苗接种记录：记录疫苗名称、接种日期、下次接种日期，支持到期提醒
• 驱虫记录：区分体内驱虫和体外驱虫，记录药品和下次驱虫时间
• 健康检查记录：体重、体温、诊断结论、用药信息，形成宠物健康时间线
• 寄养管理：登记寄养订单，记录入住和离店日期、每日费用
• 领养管理：发布待领养宠物、提交领养申请、审核申请状态
• 系统管理：用户管理、数据统计看板

1.2 核心流程：从痛点倒推功能优先级

我梳理这个系统时，核心出发点是解决“宠物健康数据分散”的问题。所以第一优先级是宠物档案和疫苗驱虫记录，这两块是每天都会用到的；第二优先级是健康检查记录，它构成宠物的电子病历；第三才是寄养和领养，这是偏业务运营的功能。把优先级排好之后，开发顺序就有了，不会出现做到一半发现某个模块其实可有可无的尴尬。

提示：如果你是拿这个项目做课程设计，建议在功能清单里把寄养、领养这类“业务特色功能”写上。评委和老师最喜欢看到有完整业务闭环的系统，而不是单纯的增删改查。

对于宠物医院场景，还需要额外考虑病历归档和医生排班，但对于以家庭养宠人和小型门店为主的系统，上述模块已经能覆盖日常管理的绝大部分需求。这个边界确定后，表结构和接口设计都不会跑偏。

2. 技术选型：为什么是 Spring Boot + Vue 这个组合

做技术选型的时候，周边也有人问：为什么不直接用 PHP 或 Django？为什么前端不选 React？实话实说，Spring Boot + Vue 在这个项目里并不是唯一解，但它是综合成本最低、最适合中小型管理系统的选择。

2.1 后端的理由：Spring Boot 的开发效率和生态

Java 生态里，Spring Boot 已经成为事实上的标准。它对 Spring 全家桶做了大量自动化配置，一个注解就能启动内嵌的 Tomcat，省去了传统 SSM 项目里一堆 XML 配置。更重要的是，Spring Boot 的文档、社区问答、示例项目数量非常多，遇到问题几乎都能搜到对应解决方案。宠物管理系统的业务逻辑大多围绕增删改查和状态流转，Spring Boot 配合 MyBatis-Plus 或 JPA，开发效率非常高，一周左右就能把后端核心接口全部写完。

2.2 前端的理由：Vue 对中小型项目的友好度

Vue 在国内中小型项目中的普及率相当高。相比 React，它的模板语法更接近原生 HTML，上手门槛低，特别适合从后端转前端或者刚接触前后端分离开发的初学者。配合 Element UI 组件库，表格、表单、弹窗、日期选择器都有现成组件，不用自己手写样式，页面做出来也不会太难看。对于宠物管理系统这类以数据录入和展示为主的项目，Vue 完全够用。

2.3 版本组合与开发环境参考

为了方便复现，这里给出我实际使用的版本组合：

这个组合的核心思路是“求稳不求新”。你如果用的是更高版本，大概率也能跑，但可能遇到一些意想不到的兼容问题。例如 Spring Boot 3.x 依赖 Java 17，一些老教材里的写法就不适用了；Vue 3 搭配 Element Plus 时，组件的 API 和 Vue 2 + Element UI 有很大差异，照着老教程写会报错。所以如果你希望把项目跑起来的时间控制在半小时内，直接用上面这套版本。

3. 数据库设计：把一张“宠物档案”拆成六张表

数据库设计是这类系统的灵魂。数据库建得好不好，直接决定后端接口是几下就能写完还是要在 Service 层疯狂拼接。

3.1 用户表与系统管理基础表

先看用户表sys_user，它承担登录和身份识别功能：

密码加密我使用了 BCrypt，Spring Security 自带该工具，不用自己写 MD5 加盐逻辑。这里有个关键点：管理系统的用户表不要做过于复杂的权限模型，用角色字段区分即可，角色表、菜单表、权限表三件套适合大型系统，对这个项目来说重了。

3.2 宠物档案表：系统的数据中枢

宠物表pet是核心表，几乎其他所有业务表都通过 pet_id 关联到它：

status字段是设计的亮点。一开始我没想加这个字段，后来发现寄养、领养流程都要判断“这只宠物现在处于什么状态”，没有状态字段就得写一堆关联查询。加上之后，判断变简单了：寄养订单创建时把宠物状态改成 1，完成后改回 0；发布领养时改成 2，领养成功后改成 3。

3.3 疫苗与驱虫记录：时间线式健康数据

疫苗表vaccine_record和驱虫表deworm_record结构相似：

vaccine_record: id, pet_id, vaccine_name(疫苗名称), hospital(接种医院), vaccinate_date(接种日期), next_vaccinate_date(下次接种日期), doctor(接种医生), remark, create_time deworm_record: id, pet_id, deworm_type(1-体内 2-体外), medicine_name(药品名称), deworm_date(驱虫日期), next_deworm_date(下次驱虫日期), deworm_place(驱虫地点), remark, create_time

这两张表的关键是next_*_date字段。系统的“疫苗到期提醒”功能就是靠它实现的：后端获取当前日期，筛选出next_vaccinate_date在近 7 天内的记录，返回给前端，在首页统计看板里展示。实际上，宠物医生强调的“定期接种、定期驱虫”本质上就是一个时间提醒系统，这个设计思路比只记录“过去什么时候做过”要实用得多。

3.4 健康检查表、寄养订单表、领养申请表

health_check表记录每次体检和就诊情况：

id, pet_id, check_date(检查日期), weight(体重), temperature(体温), diagnosis(诊断结果), prescription(用药/处方), check_doctor(检查医生), hospital(医院), remark, create_time

boarding_order表记录寄养业务：

id, order_no(订单编号), pet_id, start_date(入住日期), end_date(离店日期), daily_fee(每日费用), total_fee(总费用), contact_name(联系人), contact_phone(联系电话), status(0-进行中 1-已完成 2-已取消), remark, create_time

adoption_apply表记录领养申请：

id, pet_id, applicant_name(申请人), applicant_phone(联系电话), applicant_address(家庭住址), has_experience(是否有养宠经验), reason(申请理由), status(0-待审核 1-已通过 2-已拒绝), create_time, update_time

这三张表分别对应体检、寄养、领养三个闭环。这里想强调的是boarding_order的total_fee字段，它没有设计成存储过程计算，而是由后端在订单创建时根据daily_fee和start_date、end_date的日期差直接计算并写入，这样列表页和详情页展示时就不需要重复计算了。

3.5 表关系与 SQL 脚本组织方式

表关系上，sys_user和pet是一对多，其余业务表通过pet_id和pet多对一关联。外键我没有在数据库物理层面建立，而是在应用层通过逻辑关联维护。这个做法在互联网项目中很常见，好处是数据导入导出和分库分表更灵活，坏处是需要代码保证数据一致性，对中小型管理系统完全够用。

SQL 脚本我按模块拆分成三个文件：01_schema.sql（建库建表）、02_data.sql（示例数据）、03_index.sql（索引脚本）。示例数据我会构造三只宠物、五条疫苗记录、三条驱虫记录，保证前端页面打开就有数据看，页面不会空荡荡。索引脚本里主要给pet.user_id、vaccine_record.pet_id、next_vaccinate_date这几个高频查询字段加普通索引。

4. 后端落地：Spring Boot 接口实现的关键设计

数据库设计完成后，后端开发就顺理成章了。这个阶段的核心工作是把数据库表转化为对前端友好的接口。我按照标准的三层架构组织代码：Controller 层负责参数接收和响应返回，Service 层负责业务逻辑，Mapper 层负责数据库访问。

4.1 项目目录结构与分层职责

项目包结构如下：

com.example.petmanagement ├── controller # 接口入口 │ ├── AuthController.java │ ├── PetController.java │ ├── VaccineRecordController.java │ ├── BoardingOrderController.java │ └── ... ├── service # 业务逻辑 │ ├── PetService.java │ └── impl/ ├── mapper # MyBatis-Plus Mapper 接口 ├── entity # 数据库实体类 ├── config # 配置类（跨域、静态资源映射等） ├── common # 统一返回结果、异常处理 │ ├── Result.java │ └── GlobalExceptionHandler.java └── utils # JWT 工具、日期工具等

统一返回结果Result设计成{ code, message, data }结构。code 为 200 表示成功，其他业务码对应不同错误。这个设计虽然简单，但前后端联调时能减少很多沟通成本，前端只需要判断 code 就能决定是展示数据还是弹出错误提示。

4.2 登录鉴权与拦截器逻辑

登录流程是这样的：用户提交用户名密码，后端用 BCrypt 校验密码，校验通过后生成 JWT 令牌返回给前端。前端把令牌存在 localStorage，请求时在请求头加上Authorization: Bearer <token>。后端写一个拦截器，对所有/api/**接口校验 token，除了/api/auth/login等白名单路径。

JWT 的密钥放在application.yml配置文件中，用 HS256 算法签名，过期时间设为 24 小时。这里给出核心代码，代码逻辑就是生成令牌和解析令牌：

public String generateToken(Long userId, String username, String role) { return Jwts.builder() .setSubject(username) .claim("userId", userId) .claim("role", role) .setExpiration(new Date(System.currentTimeMillis() + 24 * 3600 * 1000)) .signWith(SignatureAlgorithm.HS256, SECRET_KEY) .compact(); } public Claims parseToken(String token) { return Jwts.parser() .setSigningKey(SECRET_KEY) .parseClaimsJws(token) .getBody(); }

拦截器拦截后，将解析出的 userId 和 role 存入请求上下文（ThreadLocal），后续 Service 层通过工具类获取当前登录用户。这样宠物档案接口只需要在 SQL 中限定user_id = 当前登录用户，就能实现不同用户只能看到自己的宠物。

注意：如果项目只是内部管理系统，用 JWT 已经足够了。但如果你是给学生演示用，建议在文档里补充说明“生产环境需要配合 Spring Security 做精细化权限控制”，这样答辩时被问到权限相关问题就能从容作答。

4.3 宠物档案接口与照片上传的实现细节

宠物档案的核心接口包括分页查询、新增、修改、删除、详情查询。分页查询使用 MyBatis-Plus 的分页插件，只需要在配置类中注册一个MybatisPlusInterceptor，并在 Mapper 查询前传入Page对象即可。查询条件支持宠物类型、宠物名称模糊查询、状态筛选。对应的 Controller 接口签名：

@GetMapping("/pet/page") public Result page( @RequestParam(defaultValue = "1") Integer pageNum, @RequestParam(defaultValue = "10") Integer pageSize, @RequestParam(required = false) String petType, @RequestParam(required = false) String petName, @RequestParam(required = false) Integer status) { // 构造查询条件并分页 }

照片上传使用 Spring Boot 的 MultipartFile 机制。上传接口接收文件，将其保存到服务器本地目录upload/，然后把访问 URL 返回给前端。为了让前端能直接访问到图片，我在配置类中做了静态资源映射：

@Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/upload/**") .addResourceHandler("file:" + uploadPath + "/"); } }

这样，上传后的文件可以通过http://localhost:8080/upload/xxx.jpg直接访问。前端 avatar 字段只需要存相对路径/upload/xxx.jpg，渲染图片时由 axios baseURL 拼接完整地址。

4.4 疫苗到期提醒：一个简单的日期计算逻辑

这个功能是整个系统最有实用价值的点。写代码前我分析了一下需求：需要在首页展示“近 7 天内需要接种疫苗的宠物”和“已过期未接种的宠物”。查询逻辑如下：

public List<VaccineRecord> getUpcomingVaccineRecords() { LocalDate today = LocalDate.now(); LocalDate sevenDaysLater = today.plusDays(7); LambdaQueryWrapper<VaccineRecord> wrapper = new LambdaQueryWrapper<>(); wrapper.between(VaccineRecord::getNextVaccinateDate, today, sevenDaysLater) .or().lt(VaccineRecord::getNextVaccinateDate, today); return vaccineRecordMapper.selectList(wrapper); }

注意这里用LocalDate而不是Date，可以避免时区导致的时间偏移问题。返回给前端时，把每一条记录的daysLeft字段计算好（nextVaccinateDate - today的天数），前端直接展示“已过期 3 天”“还剩 5 天”这样的文字提示即可。

4.5 接口文档的编写方式

我用 Swagger 注解给每个接口生成了在线调试界面，但说实话，维护一份 Markdown 格式的接口文档对我自己更实用。文档按模块列出每个接口的路径、请求方式、请求参数、返回示例。例如宠物模块的文档长这样：

### 分页查询宠物列表 接口路径：GET /api/pet/page 请求参数： pageNum: 当前页码，默认1 pageSize: 每页条数，默认10 petType: 宠物类型（猫/狗），可选 petName: 宠物名称，模糊搜索，可选 返回示例： { "code": 200, "data": { "records": [...], "total": 5 } }

写这种文档用不了多少时间，但几个月后你自己回头看代码，会发现这份文档比注释有用得多。

5. 前端开发：Vue 页面怎么搭才不乱

前端部分用的是 Vue 2 + Element UI。整体页面结构是经典的“左侧菜单 + 右侧内容区”后台布局，路由通过 vue-router 管理，请求通过 axios 统一处理。

5.1 路由与布局设计

页面分为两大类：登录页和管理后台。登录页是单独布局，管理后台是整体布局。路由配置：

const routes = [ { path: '/login', component: Login }, { path: '/', component: Layout, redirect: '/dashboard', children: [ { path: 'dashboard', component: Dashboard, meta: { title: '首页看板' } }, { path: 'pet', component: PetList, meta: { title: '宠物管理' } }, { path: 'pet/detail/:id', component: PetDetail, meta: { title: '宠物详情' } }, { path: 'vaccine', component: VaccineList, meta: { title: '疫苗记录' } }, { path: 'boarding', component: BoardingOrder, meta: { title: '寄养管理' } }, { path: 'adoption', component: AdoptionApply, meta: { title: '领养管理' } } ] } ]

路由守卫需要在跳转前检查本地是否存在 token，没有 token 就强制跳转到登录页。这套逻辑在 Vue 2 中用beforeEach钩子实现即可。

5.2 宠物列表页的实现思路

宠物列表页是核心页面。页面结构是顶部搜索栏 + 中间表格 + 底部操作列，逻辑很清楚：搜索栏筛选条件绑定到 data，点击查询时把参数拼进请求，表格展示接口返回的 records，操作列放“详情”“编辑”“删除”按钮。

表格里有个展示难点是宠物照片。由于 Element UI 的表格列不好直接放带样式的图片，我用的是template插槽：

<el-table-column label="照片" width="80"> <template slot-scope="scope"> <img :src="scope.row.avatar" style="width: 40px; height: 40px; border-radius: 50%;" /> </template> </el-table-column>

删改操作都放在handleEdit和handleDelete函数里。删除操作需要弹二次确认框，避免用户误触：

handleDelete(row) { this.$confirm('确定删除该宠物吗？删除后不可恢复。', '提示', { confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning' }).then(async () => { await deletePet(row.id) this.$message.success('删除成功') this.loadData() }).catch(() => {}) }

5.3 宠物详情页的多 Tab 信息组织

宠物详情页是这个系统前端部分最值得展开讲的。点开某只宠物后，页面除了基本信息外，还需要展示这只宠物的疫苗记录、驱虫记录、健康检查和寄养历史。这么多信息堆在一个页面会显得很乱，所以我采用el-tabs组织内容，第一个 Tab 是宠物基本信息，后面依次是疫苗记录、驱虫记录、健康检查记录、寄养记录。

每个 Tab 内部又是独立的卡片组件。这样做的好处是数据加载可以按 Tab 懒加载：默认只请求宠物基本信息，切换 Tab 时才请求对应的记录列表，减少首屏数据量。组件之间通过props传递 petId，子组件内部自己发请求。

5.4 axios 封装与跨域处理

axios 封装是前后端联调的关键点。我在src/utils/request.js里统一创建 axios 实例：

const service = axios.create({ baseURL: '/api', timeout: 10000 }) service.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = 'Bearer ' + token } return config }) service.interceptors.response.use( response => { const res = response.data if (res.code !== 200) { this.$message.error(res.message || '请求失败') return Promise.reject(new Error(res.message)) } return res }, error => { if (error.response && error.response.status === 401) { localStorage.removeItem('token') router.push('/login') } return Promise.reject(error) } )

baseURL 设为/api后，开发环境需要配置代理将请求转发到后端端口。在vue.config.js里配置 devServer 代理：

devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } } }

这样解决了跨域问题，前端代码里统一写baseURL = '/api'，后端接口路径也统一以/api开头。后端 Controller 上加类级别注解@RequestMapping("/api/pet")即可对应上。

6. 从代码到交付：数据库导入、本地运行与踩坑排查

项目代码写完只是第一步，“跑起来”才是很多初学者真正卡住的地方。这一节我把完整运行过程和环境问题排查写清楚。

6.1 数据库导入两种方式

方式一：命令行导入。进入 MySQL 后执行：

mysql -u root -p source /path/to/01_schema.sql; source /path/to/02_data.sql;

方式二：图形化工具导入。以 Navicat 为例，连接数据库后右键数据库选择“运行 SQL 文件”，依次运行 schema 和 data 文件。这里有个提醒：如果导入 8.0 版本的 SQL 脚本到 5.7 数据库，要注意字符集配置。创建数据库时统一使用：

CREATE DATABASE pet_management DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

utf8mb4能存 emoji 表情，宠物名字和备注里出现特殊符号时不会报错。

6.2 后端启动步骤

后端启动比较顺，关键是要把数据库连接配置改对。打开application.yml，确认数据库 URL、用户名、密码与本地环境一致：

spring: datasource: url: jdbc:mysql://localhost:3306/pet_management?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai username: root password: your_password

然后在项目根目录执行：

mvn spring-boot:run

看到 “Started Application” 日志就说明启动成功。如果你用 IDE 开发，直接运行启动类即可。

6.3 前端启动步骤

前端启动命令不复杂，但 Node 环境容易出问题：

npm install npm run serve

npm install阶段，如果你用的 Node 版本过高（17 以上），安装 node-sass 很可能会报错。实际替代方案是卸载重装 Node 14，或者把node-sass换成dart-sass。这是最常见的坑，有条件的建议一开始就用 Node 14，可以省掉一大半报错排查时间。

6.4 常见问题排查清单

6.5 关于交付文档的三层组织方式

文档是这个项目交付的一部分，我没有只写一份 README，而是分成三份：一是运行部署文档，面向第一次接触项目的人，写清楚从安装 JDK、MySQL、Node 到启动前后端的全流程，配截图和操作步骤；二是系统设计文档，面向课程设计或答辩场景，包括需求分析、功能模块说明、数据库设计、接口设计；三是使用说明书，面向最终用户，图文说明如何登录、录入宠物信息、登记疫苗等。

写运行文档最关键的一条：自己照着文档重新走一遍，确保从零开始能跑起来。很多项目文档写得不仔细，作者觉得没问题，但新人照着做总是卡住，主要问题就是漏了环境变量的配置细节。我把“安装完 MySQL 要记得把 bin 目录加入系统 PATH”这种细节都写进去了。

7. 做完这个项目之后，我的一些体会

仔细想想，宠物管理系统这类项目最大的价值不是技术有多难，而是训练你把现实问题转化成数据结构和业务流程的能力。比如宠物的“疫苗到期提醒”，本质上就是日期字段和当前时间的比较；寄养订单的“总费用”，就是两个日期之间差值的乘法计算。技术永远是这些基础操作的组合，难的是怎么把零散的信息整理成有逻辑的数据结构。

整个开发过程里，我的体会是：不要一上来就追求模块多、页面全，先把“宠物档案 + 疫苗记录 + 基础统计”这个最小闭环跑通，再逐步往上加寄养、领养、健康检查这些扩展模块。第一版系统在自家电脑上跑通时，只有三个页面，但已经能把宠物的疫苗接种和驱虫情况管理得清清楚楚。后来逐步扩展成完整系统，过程中每一步改动都能清晰地看到边界在哪里，不会出现一次大改导致整个项目崩溃的尴尬局面。

另外一个小建议：项目做完后，用真实数据跑一遍。把我自己那只猫的信息录进去，拍张照片上传，登记一次驱虫，再创建一个寄养订单，从头到尾把每个按钮点一遍。这个试用的过程能发现很多写代码时不会注意到的细节问题，比如日期选择器能不能选今天以前的日期、删除宠物时如果已经有寄养记录会不会报外键错误、刷新页面后登录状态是不是还保留。把这些细节改完，这个项目才算真正可以交付给别人使用。