SpringBoot+Vue宠物健康管理系统开发实战-育师

1. 项目概述：宠物健康管理系统的技术实现方案

去年帮朋友开发宠物诊所管理系统时，我深刻体会到传统宠物健康管理的痛点：纸质档案易丢失、就诊记录难追溯、健康数据分散。这个基于SpringBoot+Vue的宠物健康顾问系统，正是为了解决这些实际问题而设计的全栈解决方案。系统采用前后端分离架构，后端使用Java+SpringBoot处理业务逻辑，前端用Vue.js构建响应式界面，MySQL作为数据存储引擎，非常适合计算机专业学生作为毕业设计或课程设计的实战项目。

系统核心功能模块包括：

宠物档案管理（基础信息、品种、年龄等）
健康记录追踪（疫苗接种、体检报告）
预约挂号系统
数据分析看板
多角色权限控制（管理员、医生、普通用户）

提示：选择这个技术栈不仅因为其成熟稳定，更因为SpringBoot+Vue的组合在中小企业级应用中具有典型代表性，掌握后能快速适应实际工作场景。

2. 技术架构深度解析

2.1 后端SpringBoot设计要点

采用经典的MVC分层架构：

com.pethealth ├── config # 配置类 ├── controller # 控制层 ├── service # 业务逻辑 ├── dao # 数据访问 ├── entity # 实体类 └── util # 工具包

关键依赖配置（pom.xml精选）：

<dependencies> <!-- SpringBoot基础 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 数据库相关 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.2.0</version> </dependency> <!-- 安全控制 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> </dependencies>

数据库设计示例（宠物表）：

CREATE TABLE `pet` ( `id` int NOT NULL AUTO_INCREMENT, `name` varchar(50) NOT NULL, `type` enum('DOG','CAT','OTHER') NOT NULL, `breed` varchar(100) DEFAULT NULL, `birth_date` date DEFAULT NULL, `owner_id` int NOT NULL, `chip_number` varchar(50) UNIQUE, `created_at` timestamp DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`), FOREIGN KEY (`owner_id`) REFERENCES `user`(`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2.2 前端Vue.js实现技巧

采用Vue CLI脚手架创建项目结构：

src/ ├── api/ # 接口封装 ├── assets/ # 静态资源 ├── components/ # 公共组件 ├── router/ # 路由配置 ├── store/ # Vuex状态管理 ├── views/ # 页面组件 └── utils/ # 工具函数

典型页面组件示例（宠物档案卡片）：

<template> <div class="pet-card"> <el-card shadow="hover"> <div slot="header" class="clearfix"> <span>{{ pet.name }}</span> <el-tag :type="petTypeColor">{{ pet.type }}</el-tag> </div> <div class="pet-info"> <el-image :src="pet.avatar" fit="cover"></el-image> <div class="pet-meta"> <p>品种：{{ pet.breed || '未知' }}</p> <p>年龄：{{ calculateAge(pet.birthDate) }}</p> <p>最近体检：{{ lastCheckup || '暂无记录' }}</p> </div> </div> </el-card> </div> </template> <script> export default { props: { pet: { type: Object, required: true } }, computed: { petTypeColor() { const colors = { DOG: 'success', CAT: 'warning', OTHER: 'info' } return colors[this.pet.type] || 'info' }, lastCheckup() { return this.pet.records?.[0]?.checkupDate } }, methods: { calculateAge(birthDate) { // 年龄计算逻辑... } } } </script>

3. 核心功能实现细节

3.1 健康记录时间轴实现

后端接口设计（SpringBoot）：

@RestController @RequestMapping("/api/records") public class HealthRecordController { @Autowired private RecordService recordService; @GetMapping("/{petId}") public ResponseEntity<List<HealthRecord>> getRecordsByPet( @PathVariable Long petId, @RequestParam(required = false) String recordType) { return ResponseEntity.ok( recordService.getRecordsByPet(petId, recordType) ); } }

前端时间轴组件（Vue+ElementUI）：

<template> <el-timeline> <el-timeline-item v-for="(record, index) in records" :key="index" :timestamp="formatDate(record.createTime)" placement="top"> <el-card> <h4>{{ record.typeName }}</h4> <p>{{ record.description }}</p> <div v-if="record.images" class="record-images"> <el-image v-for="(img, i) in record.images" :key="i" :src="img" :preview-src-list="record.images"> </el-image> </div> </el-card> </el-timeline-item> </el-timeline> </template>

3.2 预约挂号业务逻辑

状态机设计（使用Spring State Machine）：

public enum AppointmentState { PENDING, // 待确认 CONFIRMED, // 已确认 CANCELLED, // 已取消 COMPLETED // 已完成 } public enum AppointmentEvent { CONFIRM, // 确认预约 CANCEL, // 取消预约 COMPLETE // 完成就诊 } @Configuration @EnableStateMachineFactory public class AppointmentStateMachineConfig extends EnumStateMachineConfigurerAdapter<AppointmentState, AppointmentEvent> { @Override public void configure(StateMachineStateConfigurer<AppointmentState, AppointmentEvent> states) throws Exception { states .withStates() .initial(AppointmentState.PENDING) .states(EnumSet.allOf(AppointmentState.class)); } @Override public void configure(StateMachineTransitionConfigurer<AppointmentState, AppointmentEvent> transitions) throws Exception { transitions .withExternal() .source(AppointmentState.PENDING) .target(AppointmentState.CONFIRMED) .event(AppointmentEvent.CONFIRM) .and() .withExternal() // 其他状态转换规则... } }

4. 项目部署与优化实践

4.1 生产环境部署方案

推荐使用Docker Compose编排服务：

version: '3' services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: pethealth123 MYSQL_DATABASE: pet_health ports: - "3306:3306" volumes: - mysql_data:/var/lib/mysql backend: build: ./backend ports: - "8080:8080" depends_on: - mysql environment: SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/pet_health SPRING_DATASOURCE_USERNAME: root SPRING_DATASOURCE_PASSWORD: pethealth123 frontend: build: ./frontend ports: - "80:80" depends_on: - backend volumes: mysql_data:

4.2 性能优化技巧

数据库查询优化：

// 使用MyBatis的懒加载和二级缓存 @Mapper @CacheNamespace public interface PetMapper { @Select("SELECT * FROM pet WHERE owner_id = #{ownerId}") @Results({ @Result(property = "records", column = "id", many = @Many(select = "findRecordsByPetId", fetchType = FetchType.LAZY)) }) List<Pet> findByOwnerId(Long ownerId); }

前端性能优化：

使用Vue的异步组件加载
配置Webpack的SplitChunks插件
对API响应进行Gzip压缩

5. 常见问题解决方案

5.1 跨域问题处理

SpringBoot后端配置：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("*") .maxAge(3600); } }

5.2 文件上传实现

后端接口示例：

@PostMapping("/upload") public ResponseEntity<String> uploadFile( @RequestParam("file") MultipartFile file) { if (file.isEmpty()) { return ResponseEntity.badRequest().body("请选择文件"); } try { String fileName = StorageService.store(file); return ResponseEntity.ok("/uploads/" + fileName); } catch (IOException e) { return ResponseEntity.status(500) .body("上传失败: " + e.getMessage()); } }

前端上传组件：

<el-upload action="/api/upload" :on-success="handleSuccess" :before-upload="beforeUpload"> <el-button type="primary">点击上传</el-button> <div slot="tip" class="el-upload__tip"> 只能上传jpg/png文件，且不超过2MB </div> </el-upload>