1. 项目概述：同城宠物服务的数字化解决方案
这个基于SpringBoot+Vue技术栈的宠物服务系统，瞄准了现代都市人出差旅行时的宠物照料痛点。我去年帮朋友代养猫咪时深有体会——临时找靠谱的人上门喂食遛狗实在太难。传统宠物店寄养价格高且容易引发宠物应激反应，而熟人帮忙又欠人情。这个系统通过LBS定位技术匹配附近的服务提供者，实现需求发布、服务预约、在线支付的全流程数字化。
系统采用前后端分离架构，后端用SpringBoot提供RESTful API，前端Vue.js实现动态交互，MyBatis-Plus操作MySQL进行数据持久化。相比传统JSP项目，这种架构让移动端和Web端可以复用同一套接口，后期我们团队扩展微信小程序时节省了60%的开发量。
2. 技术架构解析
2.1 后端技术选型
SpringBoot 2.7.x版本作为基础框架，搭配以下核心组件：
- Spring Security + JWT实现认证授权
- Lombok简化实体类开发
- Hutool处理通用工具类
- PageHelper分页插件
- Alibaba EasyExcel处理报表导出
数据库设计特别注意了几点：
CREATE TABLE `pet_service_order` ( `id` bigint NOT NULL AUTO_INCREMENT, `user_id` bigint NOT NULL COMMENT '雇主ID', `keeper_id` bigint DEFAULT NULL COMMENT '养护人ID', `start_time` datetime NOT NULL COMMENT '服务开始时间', `end_time` datetime NOT NULL COMMENT '服务结束时间', `geo_hash` varchar(12) NOT NULL COMMENT '地理哈希值', `status` tinyint NOT NULL DEFAULT '0' COMMENT '0待接单 1已接单 2服务中 3已完成 4已取消', PRIMARY KEY (`id`), KEY `idx_geo_hash` (`geo_hash`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;通过geo_hash实现地理位置快速检索，这是同城服务的关键优化点。
2.2 前端技术栈
Vue 3组合式API开发，主要特点：
- 使用Vant UI移动端组件库
- 高德地图API实现LBS功能
- Axios封装了带JWT校验的请求拦截器
- Vuex管理全局状态（如用户登录态）
地图组件实现代码示例：
// 地图标记服务提供者 const markers = ref([]) watch(keepers, (newVal) => { markers.value = newVal.map(k => ({ position: [k.longitude, k.latitude], title: k.nickName, icon: '/assets/marker.png' })) })3. 核心业务实现
3.1 服务匹配算法
系统采用分级匹配策略：
- 初级筛选：5km半径内+服务时间可用
- 次级排序：按评分降序+接单量升序
- 最终推荐：前3名推送给用户
算法核心代码：
public List<Keeper> matchKeepers(LocalDateTime start, LocalDateTime end, String geoHash) { // 获取地理前缀（约5km范围） String prefix = geoHash.substring(0, 5); return keeperMapper.selectList(new QueryWrapper<Keeper>() .apply("LEFT(geo_hash, 5) = {0}", prefix) .notExists("SELECT 1 FROM pet_service_order WHERE keeper_id = t.id " + "AND ((start_time BETWEEN {0} AND {1}) OR (end_time BETWEEN {0} AND {1}))", start, end) .orderByDesc("score") .orderByAsc("service_count") .last("LIMIT 3")); }3.2 支付与风控设计
采用支付宝沙箱环境实现支付流程，关键点：
- 创建订单时冻结用户账户余额
- 服务完成后才实际结算
- 异常情况自动触发退款
支付状态机设计：
stateDiagram [*] --> PENDING PENDING --> PAID: 用户付款 PAID --> COMPLETED: 服务确认完成 PAID --> REFUNDING: 超时未服务 REFUNDING --> REFUNDED: 退款成功4. 部署实战指南
4.1 后端部署
推荐2C4G的云服务器配置，CentOS 7.6系统：
# 安装JDK17 yum install -y java-17-openjdk # 配置MySQL8 wget https://dev.mysql.com/get/mysql80-community-release-el7-6.noarch.rpm rpm -ivh mysql80-community-release-el7-6.noarch.rpm yum install -y mysql-server # 启动SpringBoot应用 nohup java -jar pet-service.jar --spring.profiles.active=prod > app.log 2>&1 &4.2 前端部署
Nginx配置要点：
server { listen 80; server_name yourdomain.com; location /api { proxy_pass http://127.0.0.1:8080; proxy_set_header Host $host; } location / { root /opt/pet-web; index index.html; try_files $uri $uri/ /index.html; } }5. 避坑经验分享
地理位置缓存问题： 早期直接调高德API导致QPS超限，后来改用本地缓存geo_hash，查询性能提升8倍
订单状态一致性： 遇到过支付成功但订单状态未更新的bug，最终通过分布式事务解决：
@Transactional public void handlePaySuccess(Long orderId) { orderMapper.updateStatus(orderId, PAID); paymentService.confirmPayment(orderId); }图片上传优化： 最初用Base64存数据库导致性能低下，改为阿里云OSS存储后，接口响应时间从1200ms降到200ms
这个项目最让我惊喜的是Vue3的Composition API，相比Options API在复杂业务场景下代码组织更清晰。建议在开发类似系统时，前期就要设计好状态管理方案，特别是订单状态流转这种核心业务
