1. 项目概述
作为一名有多年全栈开发经验的工程师，最近指导了几位应届毕业生完成了他们的宠物之家平台系统毕业设计。这个基于SpringBoot和Vue.js的项目让我想起了自己刚入行时的第一个商业项目，当时也是类似的宠物服务平台。下面我将从实战角度，分享这个项目的完整实现过程和技术细节。
宠物之家平台本质上是一个连接宠物主人和服务提供商的O2O平台，核心目标是解决三个行业痛点：
- 信息不对称：宠物主人难以快速找到可靠的服务
- 服务标准化：线下服务质量参差不齐
- 流程效率低：传统预约方式耗时费力
2. 技术选型与架构设计
2.1 为什么选择SpringBoot+Vue.js
后端选择SpringBoot主要基于以下考虑：
- 快速启动：内嵌Tomcat，简化配置
- 生态完善：Spring Data JPA + MyBatis双重支持
- 微服务友好：便于后期扩展为微服务架构
- 企业级特性：事务管理、安全控制开箱即用
前端选择Vue.js的核心原因：
- 渐进式框架：可按需引入功能
- 组件化开发：适合复杂单页应用
- 学习曲线平缓：对毕业生友好
- 性能优秀：Virtual DOM优化
2.2 系统架构设计
采用经典的三层架构：
code复制表现层(Vue.js) → 业务层(SpringBoot) → 数据层(MySQL)
↑ ↑
(Axios) (MyBatis/JPA)
特别设计了三个关键中间件：
- 预约冲突检测器：基于Redis的分布式锁
- 支付状态同步器：RabbitMQ消息队列
- 图片处理服务：独立部署的FFmpeg微服务
3. 核心功能实现
3.1 用户认证系统
采用JWT+Spring Security的混合方案：
java复制// JWT配置示例
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilter(new JwtAuthenticationFilter(authenticationManager()))
.addFilter(new JwtAuthorizationFilter(authenticationManager()));
}
}
前端处理JWT的典型流程：
javascript复制// axios拦截器配置
axios.interceptors.request.use(config => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
});
3.2 预约系统设计
核心难点是处理并发预约，我们的解决方案：
- 乐观锁：version字段控制
- 分布式锁：Redis实现
- 状态机模式：规范状态流转
数据库设计关键点：
sql复制CREATE TABLE `appointment` (
`id` bigint(20) NOT NULL AUTO_INCREMENT,
`user_id` bigint(20) NOT NULL,
`service_id` bigint(20) NOT NULL,
`schedule_id` bigint(20) NOT NULL,
`status` enum('PENDING','CONFIRMED','CANCELLED','COMPLETED') NOT NULL DEFAULT 'PENDING',
`version` int(11) NOT NULL DEFAULT '0',
PRIMARY KEY (`id`),
UNIQUE KEY `idx_schedule` (`schedule_id`),
KEY `idx_user` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.3 支付系统集成
采用策略模式支持多支付渠道：
java复制public interface PaymentStrategy {
PaymentResult pay(PaymentRequest request);
PaymentResult query(String orderId);
}
@Service
@RequiredArgsConstructor
public class PaymentService {
private final Map<String, PaymentStrategy> strategies;
public PaymentResult pay(String channel, PaymentRequest request) {
return strategies.get(channel).pay(request);
}
}
安全防护措施：
- 签名验证：HMAC-SHA256
- 防重放攻击：timestamp+nonce
- 金额校验：前后端双重验证
4. 性能优化实践
4.1 数据库优化
-
索引优化：
- 为所有外键添加索引
- 组合索引遵循最左前缀原则
- 使用覆盖索引减少回表
-
查询优化：
java复制// 错误示例：N+1查询
List<Pet> pets = petRepository.findAll();
pets.forEach(pet -> {
List<Appointment> appointments = appointmentRepository.findByPetId(pet.getId());
});
// 正确做法：JOIN查询
@Query("SELECT p FROM Pet p LEFT JOIN FETCH p.appointments")
List<Pet> findAllWithAppointments();
4.2 前端性能提升
- 组件懒加载：
javascript复制const PetDetail = () => import('./views/PetDetail.vue');
- 图片优化：
- WebP格式自动转换
- 懒加载+占位图
- CDN加速
- API请求优化：
- 防抖/节流
- 请求缓存
- 批量接口设计
5. 部署与监控
5.1 容器化部署
Docker Compose配置示例：
yaml复制version: '3'
services:
backend:
build: ./backend
ports:
- "8080:8080"
depends_on:
- redis
- mysql
frontend:
build: ./frontend
ports:
- "80:80"
mysql:
image: mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: root
redis:
image: redis:alpine
5.2 监控方案
- SpringBoot Actuator + Prometheus
- ELK日志系统
- 前端监控：Sentry
6. 踩坑经验分享
- 时区问题：
- 统一使用UTC时间存储
- 前端按需转换时区
- 浮点数精度：
- 金额使用DECIMAL(10,2)
- 避免前端浮点计算
- 跨域问题：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.maxAge(3600);
}
}
- 图片上传：
- 限制文件类型和大小
- 病毒扫描
- 异步处理缩略图
7. 项目扩展方向
- 小程序端：Uniapp跨平台开发
- 智能推荐：基于用户行为的推荐算法
- 物联网集成：智能宠物设备对接
- 区块链应用：宠物血统证书
这个项目从技术角度涵盖了现代Web开发的完整技术栈，特别适合作为毕业设计或全栈学习项目。在实际开发中，建议采用敏捷开发模式，先实现MVP再迭代完善。