企业官网建设流程全解析

温馨提示：本人主页置顶文章(点我)开头有 CSDN 平台官方提供的学长联系方式的名片！

一、 项目背景与意义

随着社会节奏加快和“互联网+”模式的深入，传统家政服务行业面临着信息不对称、预约流程繁琐、服务标准不一、管理效率低下等诸多痛点。在线家政服务预约系统应运而生，旨在通过数字化手段连接服务提供者与消费者，优化资源配置，提升用户体验，推动家政服务行业的标准化、透明化和智能化发展。

项目意义：

• 对用户：提供便捷、透明、可靠的一站式家政服务预约平台，支持在线浏览、筛选、预约、支付及评价，节省时间成本。
• 对服务人员：拓宽接单渠道，实现工作安排数字化，收入透明化，提升职业认同感。
• 对平台/管理者：实现服务流程、订单、人员、财务的集中化、信息化管理，降低运营成本，提升服务质量和市场竞争力。
• 行业价值：推动传统家政行业数字化转型，建立服务标准与信用体系，促进行业健康发展。

二、 技术栈选型

本项目采用前后端分离架构，后端提供RESTful API，前端负责用户交互展示。

2.1 后端技术栈 (SpringBoot)

• 核心框架：Spring Boot 2.7.x / 3.x
• 安全框架：Spring Security + JWT (JSON Web Token)
• 数据持久层：MyBatis-Plus (简化CRUD操作)
• 数据库：MySQL 8.0
• 缓存：Redis (用于会话管理、验证码、热点数据缓存)
• 消息队列：RabbitMQ / Kafka (可选，用于异步处理订单状态变更、通知发送等)
• API文档：Swagger2 / Knife4j
• 构建工具：Maven
• 其他：Lombok (简化代码)，Hutool (工具集)，阿里云OSS (对象存储，用于上传服务人员资质、服务案例图片等)

2.2 前端技术栈 (Vue.js)

• 核心框架：Vue 3 (Composition API)
• 构建工具：Vite
• UI组件库：Element Plus (适用于管理后台) / Vant (适用于移动端H5)
• 状态管理：Pinia
• 路由：Vue Router 4
• HTTP客户端：Axios
• 工具库：Day.js (日期处理)，Lodash-es (实用函数)

2.3 开发与部署

• 版本控制：Git
• 容器化：Docker, Docker Compose
• 持续集成/部署 (CI/CD)：Jenkins / GitLab CI
• 服务器：云服务器 (如阿里云ECS)

三、 系统核心功能模块设计

3.1 用户端 (小程序/H5)

• 首页：服务分类展示、热门/推荐服务、轮播图、搜索框。
• 服务列表/详情：按分类筛选、排序；查看服务详情、价格、服务人员信息、用户评价。
• 预约下单：选择服务项目、服务时间、服务地址、服务人员（或系统指派）、填写备注。
• 订单管理：查看订单列表（待服务、服务中、已完成、已取消）、订单详情、支付、取消订单、申请退款。
• 个人中心：个人信息管理、地址管理、我的收藏、我的评价、消息通知。

3.2 服务人员端 (APP/H5)

• 任务中心：查看指派或抢单的任务列表、接受/拒绝任务。
• 日程管理：查看个人日程安排，设置可服务时间。
• 订单执行：开始服务、上传服务过程图片、完成服务。
• 收入统计：查看历史收入、提现记录。

3.3 管理后台 (Web)

• 仪表盘：核心数据概览（订单量、营收、用户数、服务人员数）。
• 用户管理：用户信息审核、禁用/启用。
• 服务人员管理：入驻审核、资质认证、技能标签管理、评级管理。
• 服务项目管理：服务分类、服务项目（增删改查、定价、上下架）。
• 订单管理：全平台订单查询、订单详情、手动改价、退款审核、异常订单处理。
• 运营管理：优惠券/活动管理、广告位管理、评价管理、投诉处理。
• 系统设置：角色权限管理、系统参数配置、操作日志。

四、 数据库核心表设计 (示例)

-- 用户表 CREATE TABLE `sys_user` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键', `username` varchar(50) NOT NULL COMMENT '用户名/手机号', `password` varchar(255) NOT NULL COMMENT '密码', `nickname` varchar(50) DEFAULT NULL COMMENT '昵称', `avatar` varchar(500) DEFAULT NULL COMMENT '头像', `phone` varchar(20) DEFAULT NULL COMMENT '手机号', `user_type` tinyint NOT NULL DEFAULT '1' COMMENT '用户类型：1-普通用户，2-服务人员，3-管理员', `status` tinyint NOT NULL DEFAULT '1' COMMENT '状态：0-禁用，1-正常', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`), UNIQUE KEY `uk_username` (`username`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户表'; -- 服务项目表 CREATE TABLE `service_item` ( `id` bigint NOT NULL AUTO_INCREMENT, `category_id` bigint NOT NULL COMMENT '分类ID', `name` varchar(100) NOT NULL COMMENT '服务名称', `description` text COMMENT '服务描述', `price` decimal(10,2) NOT NULL COMMENT '基础价格', `unit` varchar(20) DEFAULT '次' COMMENT '计价单位', `cover_image` varchar(500) DEFAULT NULL COMMENT '封面图', `detail_images` text COMMENT '详情图(JSON数组)', `sort_order` int DEFAULT '0' COMMENT '排序', `status` tinyint DEFAULT '1' COMMENT '状态：0-下架，1-上架', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='服务项目表'; -- 订单表 (核心) CREATE TABLE `service_order` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '订单号', `order_no` varchar(32) NOT NULL COMMENT '订单编号', `user_id` bigint NOT NULL COMMENT '用户ID', `worker_id` bigint DEFAULT NULL COMMENT '服务人员ID', `service_item_id` bigint NOT NULL COMMENT '服务项目ID', `appointment_time` datetime NOT NULL COMMENT '预约服务时间', `address` varchar(500) NOT NULL COMMENT '服务地址', `contact_name` varchar(50) NOT NULL COMMENT '联系人', `contact_phone` varchar(20) NOT NULL COMMENT '联系电话', `remark` varchar(500) DEFAULT NULL COMMENT '用户备注', `total_amount` decimal(10,2) NOT NULL COMMENT '订单总金额', `pay_status` tinyint DEFAULT '0' COMMENT '支付状态：0-待支付，1-已支付，2-已退款', `order_status` tinyint DEFAULT '0' COMMENT '订单状态：0-待接单，1-已接单/待服务，2-服务中，3-已完成，4-已取消', `cancel_reason` varchar(255) DEFAULT NULL COMMENT '取消原因', `finish_time` datetime DEFAULT NULL COMMENT '实际完成时间', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`), UNIQUE KEY `uk_order_no` (`order_no`), KEY `idx_user_id` (`user_id`), KEY `idx_worker_id` (`worker_id`), KEY `idx_appointment_time` (`appointment_time`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='服务订单表';

五、 核心代码示例 (SpringBoot + MyBatis-Plus)

5.1 订单创建服务层 (Service)

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import java.math.BigDecimal; import java.time.LocalDateTime; @Service public class OrderServiceImpl extends ServiceImpl<OrderMapper, ServiceOrder> implements OrderService { @Autowired private ServiceItemService serviceItemService; @Autowired private RedisTemplate<String, Object> redisTemplate; @Override @Transactional(rollbackFor = Exception.class) public ServiceOrder createOrder(OrderCreateDTO dto, Long userId) { // 1. 校验服务项目 ServiceItem serviceItem = serviceItemService.getById(dto.getServiceItemId()); if (serviceItem == null || serviceItem.getStatus() != 1) { throw new BusinessException("服务项目不存在或已下架"); } // 2. 生成订单号 (示例：时间戳+随机数) String orderNo = "ORD" + System.currentTimeMillis() + (int)((Math.random() * 9 + 1) * 1000); // 3. 构建订单实体 ServiceOrder order = new ServiceOrder(); order.setOrderNo(orderNo); order.setUserId(userId); order.setServiceItemId(serviceItem.getId()); order.setAppointmentTime(dto.getAppointmentTime()); order.setAddress(dto.getAddress()); order.setContactName(dto.getContactName()); order.setContactPhone(dto.getContactPhone()); order.setRemark(dto.getRemark()); // 计算金额，此处简单使用服务基础价，实际可能涉及优惠券、加急费等 order.setTotalAmount(serviceItem.getPrice()); order.setPayStatus(0); // 待支付 order.setOrderStatus(0); // 待接单 // 4. 保存订单 this.save(order); // 5. (可选) 发送订单创建消息到MQ，用于通知、日志等 // rabbitTemplate.convertAndSend("order.exchange", "order.create", order.getId()); // 6. 清除用户相关的缓存（如购物车缓存） redisTemplate.delete("user:cart:" + userId); return order; } }

5.2 订单状态变更接口 (Controller)

import io.swagger.annotations.Api; import io.swagger.annotations.ApiOperation; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; @RestController @RequestMapping("/api/order") @Api(tags = "订单管理") public class OrderController { @Autowired private OrderService orderService; @PostMapping("/create") @ApiOperation("创建订单") public Result<ServiceOrder> createOrder(@RequestBody OrderCreateDTO dto, @RequestHeader("Authorization") String token) { // 从JWT Token中解析用户ID (实际项目通过拦截器处理) Long userId = JwtUtil.getUserId(token); ServiceOrder order = orderService.createOrder(dto, userId); return Result.success(order); } @PostMapping("/{orderId}/accept") @ApiOperation("服务人员接单") public Result<Void> acceptOrder(@PathVariable Long orderId, @RequestHeader("Authorization") String token) { Long workerId = JwtUtil.getUserId(token); // 假设服务人员token也能解析出ID orderService.acceptOrder(orderId, workerId); return Result.success(); } @PostMapping("/{orderId}/complete") @ApiOperation("完成订单") public Result<Void> completeOrder(@PathVariable Long orderId, @RequestHeader("Authorization") String token) { Long workerId = JwtUtil.getUserId(token); orderService.completeOrder(orderId, workerId); return Result.success(); } }

5.3 Vue 3 + Element Plus 订单列表组件 (示例)

<template> <div class="order-list"> <el-table :data="orderList" style="width: 100%"> <el-table-column prop="orderNo" label="订单号" width="180"></el-table-column> <el-table-column prop="serviceItemName" label="服务项目"></el-table-column> <el-table-column prop="appointmentTime" label="预约时间" width="180"> <template #default="scope"> {{ formatDate(scope.row.appointmentTime) }} </template> </el-table-column> <el-table-column prop="totalAmount" label="金额" width="100"> <template #default="scope"> ¥{{ scope.row.totalAmount }} </template> </el-table-column> <el-table-column prop="orderStatus" label="状态" width="120"> <template #default="scope"> <el-tag :type="getStatusTagType(scope.row.orderStatus)"> {{ getStatusText(scope.row.orderStatus) }} </el-tag> </template> </el-table-column> <el-table-column label="操作" width="200"> <template #default="scope"> <el-button size="small" @click="viewDetail(scope.row)">查看详情</el-button> <el-button v-if="scope.row.orderStatus === 0" size="small" type="primary" @click="payOrder(scope.row)" >去支付</el-button> </template> </el-table-column> </el-table> <el-pagination @current-change="handlePageChange" :current-page="queryParams.pageNum" :page-size="queryParams.pageSize" :total="total" layout="total, prev, pager, next" ></el-pagination> </div> </template> <script setup> import { ref, onMounted } from 'vue' import { getOrderList } from '@/api/order' import { formatDate } from '@/utils/date' import { ElMessage } from 'element-plus' const orderList = ref([]) const total = ref(0) const queryParams = ref({ pageNum: 1, pageSize: 10 }) const loadOrderList = async () => { try { const res = await getOrderList(queryParams.value) orderList.value = res.data.list total.value = res.data.total } catch (error) { ElMessage.error('获取订单列表失败') } } const getStatusText = (status) => { const map = { 0: '待接单', 1: '待服务', 2: '服务中', 3: '已完成', 4: '已取消' } return map[status] || '未知' } const getStatusTagType = (status) => { const map = { 0: 'warning', 1: 'info', 2: 'primary', 3: 'success', 4: 'danger' } return map[status] || '' } const viewDetail = (order) => { // 跳转到订单详情页 } const payOrder = (order) => { // 调用支付接口 } const handlePageChange = (pageNum) => { queryParams.value.pageNum = pageNum loadOrderList() } onMounted(() => { loadOrderList() }) </script>

六、 总结与展望

本文介绍了基于SpringBoot和Vue.js的在线家政服务预约系统的整体设