1. 项目概述这个家政服务系统是我去年为一个本地家政公司开发的线上服务平台主要解决传统家政服务预约难、价格不透明、服务评价缺失等痛点。系统采用前后端分离架构前端使用Vue.js框架后端采用Spring Boot数据库选用MySQL。整个开发周期约3个月从需求分析到最终上线部署都是我一个人完成的。系统上线后客户反馈预约效率提升了60%服务纠纷率下降了45%。最让我自豪的是这个项目后来成为了我申请高级前端工程师时的代表作。下面我就把这个项目的完整开发过程分享给大家包括技术选型思考、核心功能实现和那些只有实际做过才知道的坑。2. 技术选型与架构设计2.1 为什么选择Vue.js选择Vue作为前端框架主要基于三个考虑组件化开发模式非常适合这类业务逻辑清晰的服务型应用渐进式框架特性让项目可以从小规模开始逐步扩展丰富的UI库生态特别是Element UI能大幅提升开发效率实际开发中我使用了Vue 2.x版本当时3.0刚发布不久配合Vue Router和Vuex状态管理。这里有个经验家政服务系统虽然业务不复杂但状态管理很关键。比如用户从服务列表页进入详情页时筛选条件需要保持这就是Vuex的用武之地。2.2 后端技术栈选择后端选择Spring Boot主要考虑快速构建RESTful API完善的ORM支持MyBatis成熟的权限控制方案Spring Security数据库选用MySQL 5.7主要看中其事务支持完善对中等规模数据量的良好性能运维成本低提示家政类系统要特别注意数据安全性用户个人信息和服务记录都是敏感数据。我在数据库层面做了字段加密这个后面会详细说明。3. 核心功能实现3.1 服务预约模块这是系统的核心功能技术实现要点包括服务时间冲突检测// 检查服务人员时间是否冲突 checkTimeConflict(staffId, startTime, endTime) { return this.$axios.post(/api/check-time, { staffId, startTime, endTime }).then(response { return response.data.hasConflict }) }动态价格计算基础服务费时段加成夜间/节假日服务项目叠加优惠会员折扣这个模块我踩过最大的坑是时区问题。客户要求按当地时间显示但数据库存储UTC时间。解决方案是在后端统一做时区转换// Spring Boot 时区配置 Bean public Jackson2ObjectMapperBuilderCustomizer jacksonObjectMapperCustomization() { return builder - builder.timeZone(TimeZone.getTimeZone(Asia/Shanghai)); }3.2 服务评价系统实现要点双向评价客户评服务人员服务人员也可评客户敏感词过滤评价与订单强绑定这里用到了Vue的自定义指令来实现星级评分组件Vue.directive(star-rating, { bind(el, binding) { const rating binding.value el.innerHTML ★.repeat(rating) ☆.repeat(5 - rating) } })4. 数据库设计关键点4.1 主要表结构表名关键字段说明usersid, username, password(加密), phone, role用户基础表servicesid, name, base_price, duration服务项目表ordersid, user_id, staff_id, service_id, status订单主表order_detailsorder_id, start_time, end_time, actual_price订单详情reviewsorder_id, from_user, to_user, content, rating评价表4.2 性能优化措施为常用查询字段添加索引ALTER TABLE orders ADD INDEX idx_user_status (user_id, status);大文本字段单独存储服务详情描述评价内容客服聊天记录定期归档历史订单半年以上5. 开发环境配置5.1 前端环境# 项目创建 vue create housekeeping-system cd housekeeping-system vue add element npm install axios vuex vue-router --save5.2 后端环境建议使用Docker快速搭建FROM openjdk:8-jdk-alpine VOLUME /tmp ADD target/housekeeping.jar app.jar ENTRYPOINT [java,-Djava.security.egdfile:/dev/./urandom,-jar,/app.jar]5.3 数据库配置MySQL关键配置项[mysqld] character-set-serverutf8mb4 collation-serverutf8mb4_unicode_ci default-time-zone8:006. 部署实战经验6.1 前端部署使用Nginx配置要点server { listen 80; server_name yourdomain.com; location / { root /var/www/housekeeping; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; } }6.2 后端部署Spring Boot应用建议配置server: port: 8080 servlet: context-path: /api spring: datasource: url: jdbc:mysql://mysql:3306/housekeeping?useSSLfalse username: root password: yourpassword7. 常见问题排查7.1 跨域问题开发环境解决方案// vue.config.js module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }生产环境解决方案Nginx反向代理配置CORS头部7.2 支付回调失败典型问题网络问题导致回调超时签名验证失败订单状态不一致解决方案RestController RequestMapping(/payment) public class PaymentController { PostMapping(/callback) public String callback(RequestBody String body) { // 1. 记录原始回调内容 log.info(Payment callback: {}, body); // 2. 异步处理 paymentService.processCallbackAsync(body); // 3. 立即返回成功响应 return success; } }8. 系统安全措施接口防刷短信验证码限流关键操作二次验证数据加密密码使用BCrypt加密敏感字段AES加密日志审计关键操作留痕定期日志分析9. 项目总结与扩展建议这个项目让我深刻体会到家政服务系统的核心不是技术复杂度而是业务细节的打磨。比如服务时间的灵活性处理突发情况的通知机制服务人员的调度算法后续可以考虑的扩展方向引入LBS实现就近派单增加服务人员实时定位开发微信小程序版本整个项目的源码和论文文档我已经整理好了如果需要参考可以联系我获取。特别提醒数据库配置文件和敏感信息记得在分享前删除安全永远是第一位的。
