1. 项目背景与核心需求
流浪宠物管理一直是城市治理中的痛点问题。传统管理系统大多采用前后端混合架构，导致界面交互僵硬、功能扩展困难。我在实际参与某动物保护组织信息化改造时，深刻体会到这类系统的局限性——每次新增字段都需要前后端同步修改，志愿者在移动端操作时经常遇到页面错乱。
这个基于SpringBoot+Vue的分离式管理系统，主要解决三个核心问题：
- 多角色协同管理（管理员、志愿者、领养人）
- 宠物全生命周期跟踪（从发现到领养的全流程记录）
- 跨终端适配（PC端后台管理+移动端志愿者应用）
2. 技术栈选型解析
2.1 后端技术组合
采用SpringBoot 2.7 + MyBatis-Plus的组合主要基于：
- 快速开发：SpringBoot的自动配置特性可快速搭建RESTful API
- 数据操作效率：MyBatis-Plus的Lambda查询比传统XML方式减少30%代码量
- 安全考量：集成Spring Security实现RBAC权限控制
关键配置示例（application.yml）：
yaml复制mybatis-plus:
mapper-locations: classpath*:/mapper/**/*.xml
configuration:
map-underscore-to-camel-case: true
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
2.2 前端架构设计
Vue3 + Element Plus的组合带来：
- 响应式编程：通过Composition API实现复杂状态管理
- 组件复用：将宠物信息卡片等高频组件封装为全局组件
- 移动适配：基于vw/vh单位的响应式布局方案
典型组件结构：
code复制/src
/components
PetCard.vue # 宠物信息展示卡片
AdoptionForm.vue # 领养申请表单
/views
mobile/ # 移动端专属页面
3. 核心数据库设计优化
3.1 宠物信息表增强设计
在原表基础上增加了关键字段：
sql复制ALTER TABLE pet_info ADD (
sterilization_status TINYINT(1) DEFAULT 0 COMMENT '绝育状态',
chip_id VARCHAR(50) COMMENT '电子芯片编号',
image_urls JSON COMMENT '多张照片URL'
);
注意：JSON类型需要MySQL 5.7+版本支持，如需兼容低版本可改用TEXT存储序列化数据
3.2 领养流程状态机
领养申请状态流转设计：
mermaid复制stateDiagram
[*] --> PENDING
PENDING --> APPROVED: 管理员审核通过
PENDING --> REJECTED: 管理员拒绝
APPROVED --> COMPLETED: 完成领养手续
APPROVED --> CANCELED: 用户取消
对应状态枚举类：
java复制public enum AdoptionStatus {
PENDING("待审核"),
APPROVED("已通过"),
REJECTED("已拒绝"),
COMPLETED("已完成"),
CANCELED("已取消");
// 省略getter方法
}
4. 关键功能实现细节
4.1 宠物信息管理模块
采用阿里云OSS实现图片上传：
java复制public String uploadPetImage(MultipartFile file) {
String fileName = "pets/" + UUID.randomUUID() +
getFileExtension(file.getOriginalFilename());
OSS ossClient = new OSSClientBuilder().build(endpoint, accessKeyId, accessKeySecret);
ossClient.putObject(bucketName, fileName, file.getInputStream());
return "https://" + bucketName + "." + endpoint + "/" + fileName;
}
4.2 领养申请业务流程
采用Spring事件机制实现申请状态变更通知：
java复制@Service
@RequiredArgsConstructor
public class AdoptionService {
private final ApplicationEventPublisher eventPublisher;
public void processApplication(Long applyId, AdoptionStatus status) {
// 更新数据库状态...
eventPublisher.publishEvent(new AdoptionStatusEvent(applyId, status));
}
}
@Component
@Slf4j
class AdoptionStatusListener {
@EventListener
public void handleEvent(AdoptionStatusEvent event) {
// 发送邮件/短信通知
log.info("处理状态变更通知: {}", event);
}
}
5. 部署实战指南
5.1 后端部署要点
使用Docker Compose编排服务：
dockerfile复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
volumes:
- ./mysql-data:/var/lib/mysql
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- mysql
5.2 前端部署优化
配置Nginx缓存策略提升加载速度：
nginx复制server {
location / {
try_files $uri $uri/ /index.html;
expires 30d;
add_header Cache-Control "public";
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
}
6. 典型问题排查手册
6.1 跨域问题解决方案
开发环境配置（SpringBoot）：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.maxAge(3600);
}
}
生产环境推荐：
- 使用Nginx反向代理统一API入口
- 配置精确的allowedOrigins代替通配符
6.2 移动端表单提交异常
常见问题及解决：
- 日期格式问题：强制指定@DateTimeFormat(pattern="yyyy-MM-dd")
- 大文件上传：调整SpringBoot配置
properties复制spring.servlet.multipart.max-file-size=10MB
spring.servlet.multipart.max-request-size=10MB
7. 扩展功能建议
7.1 智能推荐算法
基于用户行为的领养推荐：
python复制# 伪代码示例
def recommend_pets(user_id):
viewed_pets = get_view_history(user_id)
similar_users = find_similar_users(user_id)
return Pet.objects.filter(
breed__in=[pet.breed for pet in viewed_pets],
health_status='HEALTHY'
).exclude(
id__in=[pet.id for pet in viewed_pets]
)[:5]
7.2 微信小程序集成
通过uni-app实现多端发布：
javascript复制// 获取宠物列表
uni.request({
url: 'https://api.example.com/pets',
success: (res) => {
this.petList = res.data
}
})
实际开发中我们发现，使用MyBatis-Plus的自动填充功能可以大幅减少基础CRUD代码量。例如通过@TableField(fill = FieldFill.INSERT)注解自动维护create_time字段，相比传统方式节省约40%的持久层代码。