1. 项目概述同城宠物服务的数字化解决方案这个基于SpringBootVue技术栈的宠物服务系统瞄准了现代都市人出差旅行时的宠物照料痛点。我去年帮朋友代养猫咪时深有体会——临时找靠谱的人上门喂食遛狗实在太难。传统宠物店寄养价格高且容易引发宠物应激反应而熟人帮忙又欠人情。这个系统通过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) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;通过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 ListKeeper matchKeepers(LocalDateTime start, LocalDateTime end, String geoHash) { // 获取地理前缀约5km范围 String prefix geoHash.substring(0, 5); return keeperMapper.selectList(new QueryWrapperKeeper() .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.activeprod app.log 21 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在复杂业务场景下代码组织更清晰。建议在开发类似系统时前期就要设计好状态管理方案特别是订单状态流转这种核心业务
