SpringBoot+Vue宠物关爱系统：健康档案与自动提醒实战

朋友上周问我：我家猫的疫苗本找不到了，去年打的狂犬到底是哪天？翻出十几张疫苗本照片，愣是对不上是哪一只猫的。这个场景太典型了——养宠物的家庭不缺爱，缺的是对健康数据的记录和提醒。所以我用SpringBoot+Vue做了一套宠物关爱系统，说白了就是宠物专属的健康档案加日程管家，核心解决三件事：宠物档案的集中管理、疫苗驱虫等健康节点的自动提醒、照片视频等珍贵影像的归集。

这篇博文不只是贴代码，我会把从表结构设计、后端接口、前端页面到MinIO对象存储、Docker部署的完整链路都讲清楚，中间穿插大量我在实际开发里真正踩过的坑。基础弱的同学可以照着一步步复现，有经验的朋友可以直接跳到你关心的章节看选型逻辑和排错思路。

1. 宠物关爱系统到底在解决什么问题

1.1 养宠家庭最常见的"健康信息断层"

先说个真实现象：大多数人养猫养狗，疫苗本是一张纸质卡片，驱虫药是淘宝订单，体重是朋友圈照片，体检报告是宠物医院微信发来的图片。这些信息散落在不同渠道，等到需要的时候——比如猫要寄养、狗要办证、换了一家宠物医院——才发现什么都凑不齐。

我问过身边十几个养宠物的朋友，能准确说出"上次打疫苗时间"的不到三分之一。更麻烦的是疫苗有周期，狂犬每年一针，猫三联有加强针，驱虫药效只有一到三个月。靠人脑记这些时间点，迟早会漏。

这套系统的定位很明确：不做宠物社交、不做电商、不做在线问诊，只做一件别人懒得做但必须做的事——把宠物健康数据管理起来，并在该打疫苗、该驱虫的时候主动提醒你。

1.2 系统功能边界：哪些做，哪些坚决不做

项目启动前一定要想清楚边界，否则很容易做成一个四不像。我设计的核心功能有四块：

• 宠物档案：多宠物管理，记录品种、性别、生日、体重、绝育状态，上传头像和疫苗本照片
• 健康记录：疫苗、驱虫、体检、日常体重变化，每条记录都带下一次计划日期
• 提醒中心：按宠物、按提醒类型展示即将到期的疫苗和驱虫，后端定时任务每天扫描并生成待办
• 影像管理：把平时拍的宠物照片、小视频统一上传到对象存储，按宠物归档，支持视频在线播放

至于宠物商城、跑腿遛狗、在线问诊这些，我一概没做。一方面是工作量大，另一方面是偏离了"关爱"这个核心——健康数据的连续性和可追溯性，才是这个系统存在的意义。

1.3 谁适合参考这套设计

如果你是做毕设的学生，这套系统的功能量级和技术栈（SpringBoot+Vue+MySQL+MinIO+Docker）刚好覆盖了从后端到前端再到部署的完整链路，答辩时每个模块都能拿出实质性的东西。如果你是刚入行的后端开发，想找一个前后端分离的练手项目，它也不会让你陷入微服务的泥潭——单体应用先把业务做扎实，比一上来就拆一堆服务更符合实际。

2. 从需求到模块：技术选型与数据表设计

2.1 为什么依然是SpringBoot+Vue，而不是一套微服务

现在一聊技术选型，很多人上来就谈微服务、容器编排、分布式事务。但对于宠物关爱系统这种场景，用户量可能就几百个家庭，业务复杂度也不高，微服务带来的全是成本没有收益。SpringBoot+Vue的搭配在2025年的今天依然是中小型管理系统最稳的组合，原因很朴素：

• SpringBoot生态成熟，Maven一键构建，官方文档和第三方资料都是中文互联网上最全的
• 自动装配机制把大量样板配置吃掉了，我一个十人不到的团队能快速出活，靠的就是这个
• Vue前端上手曲线平滑，组件生态丰富，和SpringBoot后端天然形成前后端分离的开发模式，前端可以独立开发调试，后端接口用Postman自测，联调成本很低

这里多提一句SpringBoot的自动装配原理，面试常问，写代码时也很有用：SpringBoot通过@EnableAutoConfiguration配合各个starter包里的META-INF/spring.factories或AutoConfiguration.imports文件，把需要自动加载的配置类收集起来，再通过@ConditionalOnClass、@ConditionalOnMissingBean这类条件注解按需装配。比如你引入了spring-boot-starter-web，自动配置类DispatcherServletAutoConfiguration会在类路径存在DispatcherServlet时自动注册相关Bean。理解这个机制，你就能明白为什么有时候引入依赖后还要手动加配置——因为条件不满足。

2.2 核心表结构设计：五张表撑起整个业务

数据库我用了MySQL 8，表结构没有过度设计，五张核心表就把主线业务串起来了：

设计时有几个细节值得说。

第一，软删除字段。宠物档案表里我加了deleted字段，没有做物理删除。养宠物的人可能只是一时手滑删错了，软删除至少保留了恢复的可能。查询时统一通过MyBatis-Plus的逻辑删除注解@TableLogic处理，接口层不用感知。

第二，下一次计划日期单独存。健康记录里的next_date不是每次查询时用record_date + 周期现算的，而是在录入疫苗时由前端计算好提交。我见过很多系统偷懒不存这个字段，结果后期想实现"按宠物聚合提醒"就非常痛苦，要么写复杂SQL，要么在代码里做一堆判断。

第三，媒体表采用"桶+对象名"结构。bucket_name对象和object_name直接对应MinIO里的存储位置，url字段可以保留空值，由MinIO的预签名URL动态生成。不要直接在业务表里写死文件路径，后面换存储方案、迁移备份都会方便。

2.3 接口清单与模块划分

后端按业务域拆了五个Controller，接口都走RESTful风格：

• /api/auth/**：注册、登录、刷新Token
• /api/pets/**：宠物档案CRUD
• /api/health-records/**：健康记录增删改查，按宠物聚合查询
• /api/reminders/**：提醒列表、标记完成
• /api/files/**：MinIO上传、获取访问链接

前端页面和这个对应关系非常直接：宠物列表页对应/api/pets，详情页对应宠物详情+健康记录+影像列表，提醒中心对应/api/reminders。接口设计上我没有追求绝对RESTful，比如更新宠物详情用的是PUT /api/pets/{id}，但"标记提醒已完成"这种动作型接口我直接用POST /api/reminders/{id}/done，比强行套PATCH语义更符合团队直觉。

3. 后端落地：构建流程、JWT鉴权与提醒任务的核心实现

3.1 用Maven搭建项目骨架

我习惯用IDEA的Spring Initializr生成基础项目，然后手工调整依赖版本。JDK用的17，SpringBoot版本当初选的是2.7.18，没有直接用3.x，原因很简单：3.x默认使用Jakarta命名空间，很多旧教程和第三方组件还不兼容，团队里有人不熟悉。后来项目稳定后我升级到了SpringBoot 3.2，把javax改成jakarta，其他改动并不大。

pom.xml里核心依赖就这些：

xml复制<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.5.5</version>
    </dependency>
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>8.0.33</version>
    </dependency>
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt-api</artifactId>
        <version>0.11.5</version>
    </dependency>
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt-impl</artifactId>
        <version>0.11.5</version>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>io.minio</groupId>
        <artifactId>minio</artifactId>
        <version>8.5.7</version>
    </dependency>
</dependencies>

SpringBoot项目从零构建的核心流程是：初始化项目骨架 -> 引入starter依赖 -> 编写配置文件和启动类 -> 自动装配生效 -> 业务代码填充。注意版本不需要刻意追求最新，SpringBoot版本太高反而容易遇到第三方依赖没跟上导致的兼容问题，网上搜解决方案都是旧版本的经验，会非常被动。

3.2 项目目录结构与配置文件的坑

我的包结构是标准的controller / service / mapper / entity / config / common，没有用DDD那种复杂度，团队协作时新人十分钟就能上手。application.yml里有几个配置项值得敲黑板：

yaml复制server:
  port: 8080

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/pet_care?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
  servlet:
    multipart:
      max-file-size: 200MB
      max-request-size: 500MB

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

jwt:
  secret: your-secret-key-please-change-in-production
  expire-hours: 72

minio:
  endpoint: http://localhost:9000
  access-key: minioadmin
  secret-key: minioadmin
  bucket-prefix: pet-care

这里最容易踩的坑有两个：一个是数据库连接的serverTimezone不写，容器或服务器时区不是UTC+8就会导致时间类型数据错乱八小时；另一个是max-file-size，上传宠物视频动不动就是几十上百MB，不调大这个参数，上传直接报MaxUploadSizeExceededException，而排查半天可能都想不到是这里的问题。

3.3 JWT登录鉴权：拦截器配合用户名密码校验

宠物关爱系统不需要复杂的权限体系，一个用户管自己的多只宠物，JWT就够用了。我用jjwt生成Token，在登录接口里校验用户名密码，成功后签发Token返回，然后注册一个拦截器统一处理受保护接口。

认证相关的核心代码：

java复制@Component
public class JwtUtil {
    @Value("${jwt.secret}")
    private String secret;
    @Value("${jwt.expire-hours}")
    private Long expireHours;

    public String generateToken(Long userId, String username) {
        Date now = new Date();
        Date expireDate = new Date(now.getTime() + expireHours * 3600 * 1000);
        return Jwts.builder()
                .setSubject(String.valueOf(userId))
                .claim("username", username)
                .setIssuedAt(now)
                .setExpiration(expireDate)
                .signWith(Keys.hmacShaKeyFor(secret.getBytes()), SignatureAlgorithm.HS256)
                .compact();
    }

    public Claims parseToken(String token) {
        return Jwts.parserBuilder()
                .setSigningKey(Keys.hmacShaKeyFor(secret.getBytes()))
                .build()
                .parseClaimsJws(token)
                .getBody();
    }
}

拦截器里每次请求从Authorization头取出Token并解析，把userId放进ThreadLocal供后续业务使用。这里有个经验之谈：不要把用户ID直接写死在JWT的subject里不校验数据库，虽然性能好一点，但当用户被封禁或删除时Token依然有效。我后来在拦截器里加了一步Redis缓存判断，用户注销时把Token存进黑名单，黑名单命中就直接拒绝，代价很小，安全性提升明显。

需要提权限的地方，我用的是自定义注解@RequireLogin配合拦截器做粗粒度控制。宠物关爱系统里用户只能操作自己的宠物，所以Service层还必须额外校验pet的user_id归属。只靠拦截器校验登录态、不管数据归属，是这类系统最容易出现的越权漏洞。

3.4 疫苗提醒定时任务：别忽略时区

提醒功能是这套系统的灵魂。我的实现策略是：每天凌晨扫描一遍未来7天内next_date到期的健康记录，生成对应的reminder记录，用户打开提醒中心就能看到。

用Spring自带的@Scheduled就够了，没必要引入Quartz：

java复制@Component
@RequiredArgsConstructor
public class ReminderTask {

    private final HealthRecordMapper healthRecordMapper;
    private final ReminderMapper reminderMapper;

    @Scheduled(cron = "0 0 3 * * ?")
    public void generateReminders() {
        LocalDate today = LocalDate.now();
        LocalDate sevenDaysLater = today.plusDays(7);
        List<HealthRecord> records = healthRecordMapper.selectComingNextDates(today, sevenDaysLater);
        for (HealthRecord record : records) {
            Reminder reminder = new Reminder();
            reminder.setPetId(record.getPetId());
            reminder.setUserId(record.getUserId());
            reminder.setRemindType(record.getRecordType());
            reminder.setRemindDate(record.getNextDate());
            reminder.setContent(record.getTitle() + "已到期，请及时为宠物安排");
            reminder.setStatus(0);
            reminderMapper.insert(reminder);
        }
    }
}

这里有个非常隐蔽的坑：cron表达式的时区取决于JVM默认时区。本地开发时Windows默认Asia/Shanghai没问题，但部署到Linux容器时很可能是UTC，凌晨三点执行的定时任务，在UTC时区下是北京时间早上十一点执行，提醒生成时间晚了大半天。解决方法是启动类上手动指定：

java复制@SpringBootApplication
public class PetCareApplication {
    public static void main(String[] args) {
        TimeZone.setDefault(TimeZone.getTimeZone("Asia/Shanghai"));
        SpringApplication.run(PetCareApplication.class, args);
    }
}

或者在docker-compose里给容器设置环境变量TZ=Asia/Shanghai，两处都做最稳妥。

3.5 用MyBatis-Plus做个轻量封装

持久层我用MyBatis-Plus而不是纯MyBatis，主要看中它的ServiceImpl内置了绝大多数单表CURD方法，宠物档案这种简单实体基本不需要手写SQL。复杂查询比如"按用户聚合所有宠物和下次健康日期"，我写自定义Mapper XML，保持控制力。

java复制@Mapper
public interface PetMapper extends BaseMapper<Pet> {

    List<PetVO> selectPetListWithNextHealthDate(@Param("userId") Long userId);
}

这里有一个值得注意的设计：PetVO不是直接返回实体，而是返回到前端所需的聚合视图对象。宠物列表页不需要健康记录详情，只需要"下一次疫苗日期是什么时候"用于列表展示，用VO把实体和响应解耦，后面加字段、改返回结构时不会影响数据库实体。

4. Vue前端：环境准备、动态路由与前后端联调

4.1 Vue环境配置的前两步

很多人卡在Vue环境搭建上，其实就三步：装Node.js、包管理器选npm或pnpm、创建项目。我这次用的Vue 3 + Vite，相比Vue 2的webpack，启动速度肉眼可见地快。

bash复制# 检查node版本，建议18以上
node -v

# 我用pnpm创建项目，你也可以用npm create vue@latest
pnpm create vue@latest pet-care-web

cd pet-care-web
pnpm install
pnpm dev

创建完项目后我会第一时间做三件事：装路由、装Pinia、装Axios。

bash复制pnpm add vue-router pinia axios element-plus

Element Plus的按需引入我踩过坑，unplugin-auto-import插件配置版本对不上时，组件样式会莫名丢失。如果你不是对打包体积极度敏感，直接用全量引入省心得多，反正这个系统的页面量级全量引入也就多几百KB。

4.2 路由设计：嵌套路由和动态菜单

宠物关爱系统前端的路由结构我用了嵌套路由，侧边栏菜单只做两级：一级是入口，二级是具体页面。

js复制// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/login',
    component: () => import('@/views/LoginView.vue')
  },
  {
    path: '/',
    component: () => import('@/layout/MainLayout.vue'),
    redirect: '/dashboard',
    children: [
      { path: 'dashboard', name: 'Dashboard', component: () => import('@/views/DashboardView.vue') },
      { path: 'pets', name: 'PetList', component: () => import('@/views/pet/PetListView.vue') },
      { path: 'pets/:id', name: 'PetDetail', component: () => import('@/views/pet/PetDetailView.vue') },
      { path: 'reminders', name: 'ReminderList', component: () => import('@/views/ReminderListView.vue') }
    ]
  }
]

动态路由我的做法是：登录成功后从后端拿到用户菜单权限，用router.addRoute动态注册。宠物关爱系统当前角色只有普通用户，动态路由价值没有完全体现，但只要将来扩展管理员、兽医角色，路由的权限控制就能马上用上。不建议一开始就把所有路由全部写死注册，后面改权限模型时会被动。

路由守卫必须写，不然未登录用户可以直接输URL访问系统页面：

js复制router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.path === '/login') {
    next()
  } else if (!token) {
    next('/login')
  } else {
    next()
  }
})

4.3 Axios封装：拦截器统一处理Token和错误码

前后端联调阶段最大的痛点是跨域和Token丢失。我的做法是前端开发环境用Vite的proxy代理，把/api请求转发到后端，这样浏览器看到的请求是同源的，根本不会触发CORS；生产环境则是Nginx做反向代理，同样转发/api。

js复制// vite.config.js
export default defineConfig({
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})

Axios封装的核心逻辑：

js复制// src/utils/request.js
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'

const request = axios.create({
  baseURL: '/api',
  timeout: 15000
})

request.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

request.interceptors.response.use(
  response => response.data,
  error => {
    if (error.response && error.response.status === 401) {
      localStorage.removeItem('token')
      router.push('/login')
    }
    ElMessage.error(error.response?.data?.message || '请求失败')
    return Promise.reject(error)
  }
)

4.4 宠物详情页的组件拆解

宠物详情页是整个前端最复杂的页面，我的做法是拆成三个Tab组件：档案信息、健康记录、影像库。健康记录里用时间线组件展示疫苗、驱虫、体检的历史时间线，一目了然。

vue复制<template>
  <div class="pet-detail">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="档案信息" name="profile">
        <PetProfile :pet="pet" @update="loadPet" />
      </el-tab-pane>
      <el-tab-pane label="健康记录" name="health">
        <HealthRecordList :pet-id="pet.id" />
      </el-tab-pane>
      <el-tab-pane label="影像库" name="media">
        <MediaGallery :pet-id="pet.id" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

组件拆分的原则是"一个组件只干一件事"。PetProfile只管档案展示和编辑，HealthRecordList只管健康记录表格和新增弹窗，MediaGallery只管上传和预览。如果这三个塞进一个Vue文件，写起来一时爽，后面维护就是灾难。

5. 影像库：接入MinIO对象存储与m3u8视频播放

5.1 为什么选MinIO而不是本地磁盘

宠物照片和视频是消耗存储的大头，一个养狗家庭一年拍几百个视频很正常，动辄几十GB。放在应用服务器本地磁盘有三个问题：一是磁盘扩容困难，二是应用重新部署时文件容易丢，三是多实例部署时文件不在同一台机器上会404。数据库更不合适，BLOB存照片还能忍，存视频会把数据库拖垮。

对象存储是正确答案。为什么不用阿里云OSS？因为这是一套开源、本地化部署友好的系统，MinIO完全兼容S3协议，本地用Docker就能起一个，资源开销小，和SpringBoot集成也很成熟。要点是它的私密性和预签名URL机制特别适合"只有宠物主人自己能看自己宠物视频"的场景。

5.2 MinIO的快速启动与SpringBoot集成

MinIO本地启动很简单：

bash复制docker run -d \
  --name minio \
  -p 9000:9000 \
  -p 9001:9001 \
  -e MINIO_ROOT_USER=minioadmin \
  -e MINIO_ROOT_PASSWORD=minioadmin \
  -v /data/minio:/data \
  minio/minio:latest server /data --console-address ":9001"

9000是API端口，9001是Web控制台。SpringBoot里我写了一个配置类初始化MinioClient：

java复制@Configuration
public class MinioConfig {

    @Value("${minio.endpoint}")
    private String endpoint;

    @Value("${minio.access-key}")
    private String accessKey;

    @Value("${minio.secret-key}")
    private String secretKey;

    @Bean
    public MinioClient minioClient() {
        return MinioClient.builder()
                .endpoint(endpoint)
                .credentials(accessKey, secretKey)
                .build();
    }
}

上传接口的核心逻辑：生成bucket/对象名（按宠物ID分目录），调用MinIO SDK上传，返回对象标识。注意上传时最好让前端先把文件传给我们后端，再由后端转发MinIO。虽然效率略低，但好处是鉴权逻辑统一，不需要暴露MinIO的密钥给浏览器，小规模系统这样最稳。

java复制public String uploadFile(MultipartFile file, Long petId) {
    String objectName = "pet-" + petId + "/" + UUID.randomUUID()
            + "_" + file.getOriginalFilename();
    try {
        boolean bucketExists = minioClient.bucketExists(
                BucketExistsArgs.builder().bucket(bucketPrefix).build());
        if (!bucketExists) {
            minioClient.makeBucket(
                    MakeBucketArgs.builder().bucket(bucketPrefix).build());
        }
        minioClient.putObject(
                PutObjectArgs.builder()
                        .bucket(bucketPrefix)
                        .object(objectName)
                        .contentType(file.getContentType())
                        .stream(file.getInputStream(), file.getSize(), -1)
                        .build());
        return objectName;
    } catch (Exception e) {
        throw new RuntimeException("上传失败", e);
    }
}

获取访问链接有两种方式：桶设为公开读，直接用endpoint/bucket/object访问；桶保持私密，用预签名URL并设置有效期。我用的后者，生成URL时设置10分钟过期，影像库里的图片和视频链接都是动态获取的：

java复制public String getPresignedUrl(String objectName) throws Exception {
    return minioClient.getPresignedObjectUrl(
            GetPresignedObjectUrlArgs.builder()
                    .method(Method.GET)
                    .bucket(bucketPrefix)
                    .object(objectName)
                    .expiry(10 * 60)
                    .build());
}

这个设计有个额外好处：视频防盗链。即使用户把链接发出去，10分钟后也失效了，不需要额外开发复杂的鉴权逻辑。

5.3 Vue端上传组件与视频播放

前端上传用了Element Plus的el-upload，选择文件后直接POST到后端的/api/files/upload接口，带上宠物ID参数，返回的对象名存入媒体表。上传时显示进度条，大视频文件的体验会好很多。

vue复制<el-upload
  :action="uploadUrl"
  :headers="uploadHeaders"
  :data="{ petId: petId }"
  :on-success="handleUploadSuccess"
>
  <el-button type="primary">上传视频</el-button>
</el-upload>

视频播放这块，热搜里反复出现"vue播放m3u8"，核心原因是很多宠物摄像头、监控设备录制的视频输出的是HLS流，也就是一堆.ts分片加一个.m3u8索引文件。hls.js是最常用的免插件播放方案。

vue复制<template>
  <video ref="videoEl" controls style="width: 100%"></video>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import Hls from 'hls.js'

const props = defineProps({
  src: { type: String, required: true }
})
const videoEl = ref(null)

onMounted(() => {
  if (Hls.isSupported() && props.src.includes('.m3u8')) {
    const hls = new Hls()
    hls.loadSource(props.src)
    hls.attachMedia(videoEl.value)
  } else {
    videoEl.value.src = props.src
  }
})
</script>

如果你有原始MP4想转成m3u8，用FFmpeg一行命令：

bash复制ffmpeg -i input.mp4 -c:v libx264 -c:a aac -f hls -hls_time 4 -hls_list_size 0 output.m3u8

然后将生成的.m3u8和.ts文件一起上传到MinIO就行。亲测在4G网络下首屏几秒就能播放，比直接把一个200MB的MP4丢到浏览器里流畅太多。

6. 上线部署：Docker Compose编排与生产环境的排错记录

6.1 后端镜像构建：多阶段构建控制体积

后端Dockerfile我用的是多阶段构建，先Maven打包再取JAR，避免把Maven依赖都塞进最终镜像：

dockerfile复制FROM maven:3.8.7-eclipse-temurin-17 AS builder
WORKDIR /app
COPY pom.xml .
RUN mvn dependency:go-offline
COPY src ./src
RUN mvn clean package -DskipTests

FROM eclipse-temurin:17-jre
WORKDIR /app
COPY --from=builder /app/target/pet-care-0.0.1-SNAPSHOT.jar app.jar
EXPOSE 8080
ENTRYPOINT ["java", "-jar", "/app/app.jar"]

构建命令和启动：

bash复制mvn clean package -DskipTests
docker build -t pet-care-backend:1.0 .
docker run -d -p 8080:8080 --env-file .env pet-care-backend:1.0

我强烈建议数据库连接信息、MinIO密钥通过环境变量注入，而不是写在JAR包内的application.yml里。application.yml里改成${DB_HOST:localhost}这种占位符写法，本地开发不配置环境变量就默认localhost，Docker部署时通过--env-file或者compose的environment注入。

6.2 前端Nginx镜像：history模式必须配置fallback

前端构建产物是纯静态文件，用Nginx托管最合适。但Vue Router如果用createWebHistory，刷新/pets/1这个地址时会直接404，因为Nginx找不到这个文件。解决办法是配置try_files：

nginx复制server {
    listen 80;
    server_name _;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://backend:8080/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

try_files $uri $uri/ /index.html就是把所有前端路径都交给Vue的Router去处理。/api开头的请求反向代理到后端服务，这样浏览器请求的都是同一个Origin，生产环境也不存在跨域问题。

6.3 一键编排：MySQL、MinIO、前后端集体上阵

我用Docker Compose管理整个应用编排，docker-compose.yml里有五个服务：

yaml复制services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: 123456
      MYSQL_DATABASE: pet_care
      TZ: Asia/Shanghai
    volumes:
      - ./data/mysql:/var/lib/mysql
    ports:
      - "3306:3306"

  minio:
    image: minio/minio:latest
    command: server /data --console-address ":9001"
    environment:
      MINIO_ROOT_USER: minioadmin
      MINIO_ROOT_PASSWORD: minioadmin
    volumes:
      - ./data/minio:/data
    ports:
      - "9000:9000"
      - "9001:9001"

  backend:
    build: ./backend
    environment:
      DB_HOST: mysql
      MINIO_ENDPOINT: http://minio:9000
      TZ: Asia/Shanghai
    depends_on:
      - mysql
      - minio
    ports:
      - "8080:8080"

  frontend:
    build: ./frontend
    ports:
      - "80:80"
    depends_on:
      - backend

启动命令就一行：docker compose up -d --build。全部起来后，访问http://服务器IP就是前端页面，http://服务器IP:8080/api/...是后端接口，http://服务器IP:9001是MinIO控制台。

6.4 部署之后真实遇到的四个问题

排错过程往往比开发更考验人，我把这次上线踩过的坑按排查顺序列出来。

问题一：前端调后端接口报跨域。 虽然Nginx做了代理，但浏览器依然报CORS。排查后发现自己犯了个低级错误——前端请求的baseURL写成了http://localhost:8080/api，而不是根路径/api。因为前端页面部署在服务器80端口，浏览器地址栏是http://服务器IP，如果请求localhost:8080就跨域了。把baseURL改成/api，走Nginx代理，问题立刻消失。

问题二：MinIO里上传的图片在前端打不开。 排查过程中先看控制台报错，发现是403权限拒绝。原因有两个叠加：一个是桶是私密的，直接用endpoint/bucket/object拼URL访问当然404；另一个是我生成预签名URL时用的endpoint是http://localhost:9000，浏览器是用户电脑，根本访问不到服务器的localhost。修复方式是配置里区分两个地址，后端生成URL时用http://服务器公网IP:9000，服务端启动检查时用http://minio:9000。

问题三：定时提醒任务始终没有执行。 检查日志发现任务确实跑了，但生成的提醒日期是UTC时间，比北京时间晚了八小时。原因就是前面说的容器时区问题。在docker-compose.yml里给backend加TZ: Asia/Shanghai环境变量，同时在Java启动类里设置默认时区，双保险解决。

问题四：m3u8视频加载出来只有声音没有画面。 排查发现是FFmpeg转码时视频编码不是H.264，部分浏览器不兼容。重新拉流转码时加上-c:v libx264并确保输出了hls_time参数，才稳定好。这个问题在开发环境不明显，因为本地Chrome自带的解码器兼容性强，但部署到手机浏览器、Safari上就暴露了。

6.5 运维阶段的缓存与性能小优化

项目上线稳定后，我做了几个性价比极高的优化。

一是静态资源加Nginx缓存，图片视频走MinIO，前端JS/CSS哈希命名后配置Cache-Control: max-age=31536000，刷新页面不再反复拉取大文件。

二是给健康记录表加了(pet_id, record_date)联合索引。开发时数据量小看不出来，测试库导了两年模拟数据后，详情页时间线查询从200多毫秒降到了十几毫秒。

三是提醒中心的"标记已读"接口做了防重复处理。前端连续点击时，后端用status条件更新，UPDATE reminder SET status = 1 WHERE id = ? AND status = 0，影响行数为0就说明已经处理过，防止重复下发通知。

写在最后的一些大实话

整套系统从零到上线，前后用了一个多月，大部分时间花在联调和排错上，真正写业务代码的时间反而没想象中多。我个人最大的体会是：像宠物关爱系统这种规模的项目，技术栈不需要新、杂、贵，SpringBoot+Vue这套组合能把精力集中在"宠物健康数据怎么记录、提醒怎么补位、影像怎么保管"这些真正影响用户感受的事情上。

如果你准备动手做，我的建议是：先把五张表设计到位，再写后端的最小可用版本，前端先跑通一个"宠物列表到详情"的完整链路，然后一点一点加功能。每次加功能都问一句"这是用户真有需求，还是我自己觉得炫"，能砍就砍。等系统上线真有朋友开始用了，你会发现在真实使用里暴露的问题，比你在开发环境里自嗨一天发现的问题有价值得多。