SpringBoot+Vue构建宠物救助SaaS系统实战-代码聚汇网

SpringBoot+Vue构建宠物救助SaaS系统实战

顾培

1. 项目概述：当宠物救助遇上全栈开发

去年参与本地流浪动物保护协会的IT系统改造时，我亲眼目睹志愿者用Excel表格管理上百只待领养动物的窘境。信息不同步导致同一只猫被重复预约、医疗记录遗失、志愿者排班混乱等问题频发。这正是我们决定用SpringBoot+Vue开发宠物收养志愿者管理系统的初衷——用技术提升公益效率。

这个系统本质上是一个垂直领域的SaaS平台，核心解决三个痛点：

动物信息数字化管理（从纸质档案到云端数据库）
领养流程线上化（预约-审核-签约全电子流）
志愿者协同作业（任务分配+移动端协作）

技术选型上，后端采用SpringBoot 2.7 + MyBatis Plus + Redis的组合，前端使用Vue3 + Element Plus构建管理后台，配合微信小程序端覆盖移动场景。特别要说明的是，我们没有选择现成的CMS系统，而是坚持自主开发，因为宠物收养业务有着独特的流程：

动物健康状态追踪需要自定义字段
领养人资格审查涉及多步骤验证
志愿者技能标签体系需要灵活配置

关键决策：在数据库设计阶段，我们放弃了传统的EAV模型，采用JSON字段存储动态属性。比如布偶猫需要记录"瞳色"，而田园犬则需要"是否绝育"等差异化字段。

2. 核心模块设计与实现细节

2.1 动物档案管理中心

这是系统的核心数据枢纽，我们设计了分层存储结构：

java复制// 基础信息实体
public class Animal {
    private Long id;
    private String name;
    private Integer animalType; // 猫/狗/其他
    private LocalDate rescueDate;
    private String healthStatus; // JSON字符串存储动态字段
    // 关联医疗记录、领养申请等
}

前端采用标签页+详情卡片的交互形式：

vue复制<el-tabs v-model="activeTab">
  <el-tab-pane label="基本信息" name="basic">
    <animal-basic :data="formData"/>
  </el-tab-pane>
  <el-tab-pane label="医疗记录" name="medical">
    <medical-history :animalId="id"/>
  </el-tab-pane>
</el-tabs>

遇到的典型问题及解决方案：

图片存储方案：初期使用本地存储导致移动端加载慢
→ 迁移到阿里云OSS，配合CDN加速
健康状态变更追溯：增加HBase作为历史数据存储
批量导入优化：采用EasyExcel处理志愿者上传的遗留数据

2.2 领养流程引擎

这个模块实现了状态机驱动的领养流程：

code复制申请提交 → 初审(自动) → 家访(人工) → 终审 → 签约 → 回访

关键技术点：

使用Spring StateMachine实现流程控制
自动初审规则引擎：

java复制// 规则示例：拒绝有遗弃记录的申请人
rule "adoption_blacklist"
    when
        $a : AdoptionApplication(blacklisted == true)
    then
        $a.setStatus(REJECTED);
end

电子签约集成法大大API
定时任务提醒回访（Quartz实现）

踩坑记录：初期没有考虑并发修改问题，导致多个志愿者同时操作时状态覆盖。最终通过乐观锁（version字段）+ 操作日志解决了这个问题。

2.3 志愿者协同平台

采用微前端架构，主应用包含：

任务看板（Kanban模式）
技能标签系统
值班排班日历
即时通讯模块（集成融云SDK）

性能优化技巧：

志愿者位置热力图使用WebGL渲染
排班冲突检测算法优化：

javascript复制// 使用Temporal API处理跨时区问题
function checkConflict(schedule1, schedule2) {
  return schedule1.start < schedule2.end && 
         schedule1.end > schedule2.start;
}

移动端PWA改造，支持离线填写报告

3. 关键技术深度解析

3.1 前后端分离实践

我们采用的接口规范：

json复制{
  "code": 200,
  "data": {},
  "message": "success"
}

Axios封装要点：

javascript复制// 请求拦截器处理JWT
service.interceptors.request.use(config => {
  config.headers['Authorization'] = getToken()
  return config
})

// 响应拦截器处理通用错误
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      showError(res.message)
      return Promise.reject(new Error(res.message))
    }
    return res.data
  }
)

3.2 权限控制方案

RBAC模型扩展实现：

标准角色：志愿者、组长、管理员
自定义权限点：如"医疗记录编辑"、"领养审批"
数据权限：区域隔离（志愿者只能查看本区域动物）

后端注解示例：

java复制@PreAuthorize("hasPermission('adoption:approve')")
@PostMapping("/approve")
public Result approveApplication(@RequestBody ApproveDTO dto) {
    // 审批逻辑
}

前端权限指令：

vue复制<el-button 
  v-permission="'animal:edit'" 
  @click="handleEdit">
  编辑
</el-button>

3.3 性能优化实战

缓存策略：
- Redis缓存热点数据（如待领养动物列表）
- 本地缓存志愿者基本信息

SQL优化：

sql复制/* 反例：N+1查询问题 */
SELECT * FROM animal;
/* 正例：关联查询 */
SELECT a.*, m.vaccine_status 
FROM animal a LEFT JOIN medical_record m ON a.id = m.animal_id;

前端懒加载：

vue复制<template>
  <LazyMedicalHistory v-if="activeTab === 'medical'"/>
</template>

4. 部署与运维方案

4.1 生产环境架构

code复制前端Nginx(80)
    ↓
API网关(Spring Cloud Gateway)
    ↓
微服务集群(动物服务/领养服务/志愿者服务)
    ↓
MySQL集群(主从) + Redis哨兵

4.2 监控体系搭建

Prometheus + Grafana监控JVM指标
ELK收集业务日志

关键业务埋点：

java复制@Around("@annotation(monitor)")
public Object monitor(ProceedingJoinPoint pjp) {
    String metricName = getMetricName(pjp);
    Timer.Sample sample = Timer.start();
    try {
        return pjp.proceed();
    } finally {
        timer.record(() -> sample.stop(registry.timer(metricName)));
    }
}

4.3 持续交付流水线

GitLab CI配置要点：

yaml复制stages:
  - build
  - test
  - deploy

backend-build:
  stage: build
  script:
    - mvn clean package -DskipTests
  artifacts:
    paths:
      - target/*.jar

5. 典型问题排查手册

5.1 微信小程序图片上传失败

现象：安卓设备上传总是超时
排查过程：

检查Nginx配置发现client_max_body_size为1M
微信压缩后的图片仍可能超过限制
解决方案：

nginx复制client_max_body_size 10M;

5.2 定时任务重复执行

现象：家访提醒短信发送了多次
原因：Quartz集群配置中使用了错误的instanceId
修复方案：

properties复制org.quartz.scheduler.instanceId = AUTO
org.quartz.jobStore.isClustered = true

5.3 Vue内存泄漏

现象：长时间使用后浏览器卡顿
定位方法：

Chrome Memory面板创建堆快照
对比操作前后的对象保留情况
发现的问题：

未销毁的ECharts实例
全局事件监听未移除
修复代码：

javascript复制onBeforeUnmount(() => {
  chart.dispose()
  eventBus.off('update', handler)
})

6. 项目演进方向

当前系统已在3个城市试点运行，日均处理200+领养申请。后续计划：

引入AI能力：
- 图片自动识别动物品种
- 领养人匹配推荐算法
物联网集成：
- 智能项圈数据接入
- 喂食器远程控制
区块链存证：
- 领养协议上链
- 捐赠记录公开可查

在开发过程中最深刻的体会是：技术方案必须服从业务场景。比如最初设计的复杂领养流程，在实际运行中发现志愿者操作成本过高，最终简化为现在的三步流程。建议后续开发者在类似项目中，一定要先深入一线工作场景，再动手写代码。