Vue3+SpringBoot构建家政服务管理平台实践-代码聚汇网

Vue3+SpringBoot构建家政服务管理平台实践

Vue3SpringBoot家政服务平台

|难度：普通|阅读约 14 分钟

1. 项目概述

这个家政服务管理平台是一个典型的B/S架构企业级应用，采用前后端分离模式开发。前端基于Vue3组合式API开发，后端使用SpringBoot框架构建RESTful API。系统主要面向中小型家政服务公司，解决其业务管理数字化需求。

我在实际开发中发现，这类系统核心要解决三个矛盾：家政服务非标准化与服务流程规范化的矛盾、服务人员流动性大与客户粘性需求的矛盾、线下服务场景与线上管理需求的矛盾。这个平台正是通过技术手段来平衡这些矛盾。

需要模型API调用？免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。

2. 技术架构设计

2.1 前端技术选型

采用Vue3+TypeScript+Pinia的技术组合：

Vue3的组合式API更适合复杂业务逻辑组织
TypeScript提供类型检查，减少运行时错误
Pinia替代Vuex作为状态管理方案

javascript复制// 典型页面组件结构示例
<script setup lang="ts">
import { ref } from 'vue'
import { useOrderStore } from '@/stores/order'

const orderStore = useOrderStore()
const currentPage = ref(1)

const loadOrders = async () => {
  await orderStore.fetchOrders({
    page: currentPage.value,
    size: 10
  })
}
</script>

2.2 后端技术栈

SpringBoot 2.7.x + MyBatis-Plus + Redis组合：

MyBatis-Plus提供强大的单表CRUD操作
Redis用于缓存热点数据和分布式锁
采用多模块设计分离业务逻辑

java复制// 典型Controller示例
@RestController
@RequestMapping("/api/orders")
@RequiredArgsConstructor
public class OrderController {
    private final OrderService orderService;
    
    @GetMapping
    public PageResult<OrderVO> listOrders(
        @RequestParam(required = false) Integer status,
        @RequestParam(defaultValue = "1") Integer page,
        @RequestParam(defaultValue = "10") Integer size) {
        return orderService.listOrders(status, page, size);
    }
}

3. 核心功能实现

3.1 服务订单管理

订单状态机设计是关键，我们采用状态模式实现：

java复制public interface OrderState {
    void confirm(Order order);
    void cancel(Order order);
    void complete(Order order);
    void pay(Order order);
}

@Component
@RequiredArgsConstructor
public class PendingState implements OrderState {
    private final OrderMapper orderMapper;
    
    @Override
    public void confirm(Order order) {
        order.setStatus(OrderStatus.CONFIRMED);
        orderMapper.updateById(order);
    }
    // 其他方法实现...
}

3.2 服务人员调度

采用基于地理位置的服务人员匹配算法：

获取客户地址的经纬度坐标
查询半径5公里内空闲的服务人员
根据评分、接单量等维度排序
使用Redis GEO命令实现附近人员查询

java复制public List<Worker> matchWorkers(Double lng, Double lat, LocalDateTime time) {
    String key = "workers:location";
    // 查询5公里范围内的workerId
    Set<String> workerIds = redisTemplate.opsForGeo().radius(
        key, 
        new Circle(new Point(lng, lat), new Distance(5, Metrics.KILOMETERS))
    );
    // 进一步筛选和排序...
}

4. 关键问题解决方案

4.1 并发订单冲突

采用Redis分布式锁防止超卖：

java复制public boolean lockOrder(Long orderId) {
    String lockKey = "order:lock:" + orderId;
    return redisTemplate.opsForValue().setIfAbsent(
        lockKey, 
        "1", 
        Duration.ofSeconds(30)
    );
}

4.2 服务评价统计

使用定时任务预聚合评价数据：

java复制@Scheduled(cron = "0 0 2 * * ?")
public void aggregateRatings() {
    // 统计每个服务人员的平均评分
    // 更新到worker表和redis缓存
}

5. 部署实践

5.1 容器化部署

Docker Compose编排文件示例：

yaml复制version: '3'
services:
  app:
    image: housekeeping-app:${TAG}
    ports:
      - "8080:8080"
    depends_on:
      - redis
      - mysql
  redis:
    image: redis:6-alpine
    ports:
      - "6379:6379"
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
    ports:
      - "3306:3306"

5.2 性能优化

Nginx配置示例：

nginx复制server {
    listen 80;
    server_name example.com;
    
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
    
    location /api/ {
        proxy_pass http://app:8080;
        proxy_set_header Host $host;
    }
    
    gzip on;
    gzip_types text/plain application/json;
}

6. 开发经验分享

6.1 前后端协作

我们采用Swagger+Mock.js的方案：

后端定义Swagger接口文档
前端使用Mock.js模拟接口返回
通过yapi平台管理接口变更

javascript复制// 前端mock示例
Mock.mock('/api/orders', 'get', {
    'list|10': [{
        'id|+1': 1,
        'serviceType': '@pick(["保洁","保姆","月嫂"])',
        'status|1': [0,1,2,3],
        'createTime': '@datetime'
    }],
    total: 50
})

6.2 表单处理技巧

复杂表单使用Vuelidate验证：

javascript复制const rules = {
  customer: { required },
  address: { required, minLength: minLength(5) },
  serviceType: { required },
  serviceTime: { 
    required,
    between: between(new Date(), new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)) 
  }
}

const v$ = useVuelidate(rules, form)

7. 安全防护措施

7.1 XSS防护

前端使用DOMPurify净化输入：

javascript复制import DOMPurify from 'dompurify'

const clean = DOMPurify.sanitize(dirtyHtml)

后端统一处理：

java复制@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new XssInterceptor());
    }
}

7.2 数据权限控制

采用注解方式实现：

java复制@Retention(RetentionPolicy.RUNTIME)
@Target(ElementType.METHOD)
public @interface DataAuth {
    String value();
}

@Aspect
@Component
public class DataAuthAspect {
    @Around("@annotation(dataAuth)")
    public Object around(ProceedingJoinPoint joinPoint, DataAuth dataAuth) {
        // 权限校验逻辑
    }
}

8. 项目演进方向

引入Elasticsearch实现服务搜索
增加微信小程序端接入
实现智能排班算法
接入第三方支付平台
开发客户忠诚度体系

我在实际开发中发现，这类系统最需要关注的是业务流程的灵活性。家政服务往往有很多特殊情况需要处理，系统要预留足够的扩展点。比如我们通过可配置的工单状态机和自定义字段功能，很好地适应了不同家政公司的业务流程差异。