1. 项目概述与技术选型
萌宠之家寄养平台是一个基于现代Web技术栈构建的宠物寄养服务管理系统。该系统采用前后端分离架构，前端使用Vue3.0+Element-plus实现响应式用户界面，后端采用SpringBoot3.0+MyBatis框架提供RESTful API服务，数据库选用MySQL5.7作为数据存储方案。
选择这套技术栈主要基于以下考虑：
- Vue3.0的Composition API提供了更好的代码组织和复用性，配合Element-plus组件库可以快速构建美观的管理后台界面
- SpringBoot3.0内置Tomcat服务器，简化了Java Web应用的部署流程，其自动配置特性大幅减少了样板代码
- MyBatis作为轻量级ORM框架，在SQL灵活性和对象映射之间取得了良好平衡
- MySQL5.7作为成熟的关系型数据库，提供了事务支持和良好的性能表现
提示：虽然项目要求MySQL5.7，但实际测试中MySQL8.0也能良好运行，只需注意调整连接驱动和时区配置
2. 开发环境配置指南
2.1 后端环境搭建
后端开发需要以下环境配置：
- JDK17：推荐使用Amazon Corretto 17或OpenJDK 17
- Maven 3.6.3+：用于依赖管理和项目构建
- IDE：IntelliJ IDEA（推荐）或Eclipse with Spring Tools插件
安装步骤：
- 配置JDK环境变量JAVA_HOME指向JDK安装目录
- 将Maven的bin目录添加到PATH环境变量
- 在IDE中导入项目时选择pom.xml文件，等待依赖自动下载
2.2 前端环境准备
前端开发需要：
- Node.js 20.x：建议使用nvm管理Node版本
- VS Code（推荐）或WebStorm
- Vue CLI（可选）：项目已包含完整依赖
初始化步骤：
bash复制# 进入前端目录
cd pet-care-frontend
# 安装依赖
npm install
# 启动开发服务器
npm run dev
3. 数据库设计与实现
3.1 核心表结构
系统主要包含以下数据表：
| 表名 | 说明 | 关键字段 |
|---|---|---|
| user | 用户表 | id, username, password(加密), phone, role |
| pet_type | 宠物类型 | id, name, description |
| service | 服务项目 | id, name, price, duration, type_id |
| order | 寄养订单 | id, user_id, pet_id, start_date, end_date, status |
| care_record | 照护记录 | id, order_id, carer_id, content, timestamp |
3.2 数据库初始化
项目提供了SQL初始化脚本，执行步骤：
- 使用Navicat或MySQL Workbench创建数据库pet_care
- 执行doc目录下的schema.sql创建表结构
- 执行data.sql导入初始数据（可选）
注意：MySQL5.7默认配置可能需要调整group_by和only_full_group_by模式，否则可能导致查询报错
4. 核心功能模块实现
4.1 用户认证与授权
系统采用基于JWT的认证机制：
- 用户登录成功后，后端生成包含用户角色和基本信息的JWT token
- 前端将token存储在localStorage中，并在后续请求的Authorization头中携带
- 后端通过Spring Security的过滤器链进行权限校验
关键代码片段（后端）：
java复制@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeHttpRequests()
.requestMatchers("/api/auth/**").permitAll()
.requestMatchers("/api/admin/**").hasRole("ADMIN")
.anyRequest().authenticated()
.and()
.addFilterBefore(jwtAuthenticationFilter(), UsernamePasswordAuthenticationFilter.class);
return http.build();
}
}
4.2 寄养服务预约流程
完整的寄养预约流程包含以下步骤：
- 用户浏览可用的寄养服务（前端调用/api/services接口）
- 选择服务后填写宠物信息和寄养日期（调用/api/orders创建订单）
- 系统检查日期冲突和库存可用性
- 生成待支付订单，用户完成支付后订单状态变更为"已确认"
- 商家端收到新订单通知，准备接待宠物
4.3 异常上报处理机制
当寄养期间发生异常情况时：
- 照护人员通过系统提交异常报告（包含文字描述和可选图片）
- 系统自动通知宠物主人（通过站内消息和短信提醒）
- 管理员可以查看所有异常报告并标记处理状态
- 处理完成后生成异常处理记录供用户查看
5. 项目部署方案
5.1 后端部署
推荐使用Docker容器化部署：
- 构建Docker镜像：
bash复制mvn clean package
docker build -t pet-care-backend .
- 运行容器：
bash复制docker run -d -p 8080:8080 \
-e SPRING_DATASOURCE_URL=jdbc:mysql://mysql-server:3306/pet_care \
-e SPRING_DATASOURCE_USERNAME=dbuser \
-e SPRING_DATASOURCE_PASSWORD=dbpass \
pet-care-backend
5.2 前端部署
前端项目可以部署到Nginx：
- 构建生产版本：
bash复制npm run build
- 配置Nginx：
nginx复制server {
listen 80;
server_name yourdomain.com;
location / {
root /path/to/dist;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
}
}
6. 常见问题排查
6.1 启动时报数据库连接错误
可能原因及解决方案：
- 数据库服务未启动：检查MySQL服务状态
- 连接参数错误：确认application.yml中的数据库配置
- 时区问题：在连接URL后添加?serverTimezone=Asia/Shanghai
- 驱动版本不匹配：确保使用mysql-connector-java 8.0+
6.2 前端跨域问题
开发环境下解决方案：
- 配置Vue开发服务器的代理：
javascript复制// vite.config.js
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
})
6.3 文件上传失败
检查以下几点：
- 确保服务器上传目录有写入权限
- 检查Spring Boot的multipart配置：
yaml复制spring:
servlet:
multipart:
max-file-size: 10MB
max-request-size: 10MB
- 前端FormData是否正确构建
7. 项目扩展建议
基于当前系统，可以考虑以下扩展方向：
- 移动端适配：开发基于Uniapp的跨平台移动应用，复用现有API
- 支付集成：对接支付宝/微信支付接口，实现线上支付功能
- 智能监控：接入宠物摄像头API，实现远程查看功能
- 数据分析：使用ELK栈构建寄养业务数据分析看板
- 消息推送：集成WebSocket实现实时消息通知
在实际开发中，我们遇到的一个典型性能问题是订单查询接口在数据量大时响应变慢。通过添加适当的数据库索引和引入缓存层（Redis）后，查询性能提升了约15倍。具体优化措施包括：
- 为order表的user_id和status字段添加复合索引
- 对高频访问但不常变更的数据（如宠物类型）进行缓存
- 实现分页查询避免一次性加载大量数据
这些优化经验表明，即使是中小型项目，适当的性能优化也能显著提升用户体验。