SpringBoot+Vue家政平台毕设实战：从工程化思维到生产级实现

🚀 30+款热门AI模型一站整合，DeepSeek/GLM/Claude 随心用，限时 5 折。 👉 点击领海量免费额度

你有没有过这样的经历：毕业设计选题时，面对“家政服务平台”这类看似普通的题目，感觉无从下手？想用上时下流行的SpringBoot和Vue做前后端分离，却不知道如何把零散的技术点串联成一个真正能跑起来、有逻辑、能答辩的项目。网上找的源码要么是古董级的SSH，要么是只给前端或后端的半成品，接口对不上，环境配不通，最后时间耗尽，只能交一个漏洞百出的“演示系统”。

这恰恰是大多数计算机专业学生做毕设时的真实困境：技术栈都知道，但缺乏一个从零到一的、完整的、可落地的工程化实践。今天，我们不谈空洞的概念，就以一个基于SpringBoot + Vue的前后端分离家政服务平台为例，拆解如何把一个毕业设计题目，做成一个具备生产级思考的“作品”，而不仅仅是一个为了应付检查的“作业”。关键在于，我们要超越功能列表的堆砌，去理解一个现代Web应用从技术选型、环境搭建、核心业务实现到部署上线的完整闭环，以及每个环节中那些容易被忽略、却决定成败的细节。

1. 重新定义“毕业设计”：从功能实现到工程化思维

很多人认为毕业设计就是把CRUD（增删改查）做出来，能登录、能管理订单就行。但如果你只做到这一步，你的项目就和五年前、甚至十年前的毕设没有本质区别。SpringBoot和Vue带来的最大价值，是工程化协作与开发体验的质变。你的设计重点，应该从“实现功能”转向“如何优雅、高效、可维护地实现功能”。

1.1 为什么是SpringBoot + Vue？不止于“流行”

选择这个技术栈，不能仅仅因为它是热搜词。你需要向答辩老师（也是向未来的面试官）讲清楚背后的逻辑：

• SpringBoot：它解决了传统Spring项目繁琐的XML配置和依赖管理问题。通过“约定大于配置”和自动装配，让你能快速搭建一个稳健的后端服务。对于毕设而言，这意味着你可以把精力集中在业务逻辑（如家政服务的预约、派单、结算）上，而不是纠结于Tomcat版本、DataSource配置这些底层细节。
• Vue.js：作为渐进式前端框架，它的核心优势是数据驱动视图和组件化。在家政平台中，一个服务项目列表、一个订单表单、一个日历预约组件，都可以封装成独立的Vue组件。这不仅能让你高效开发，更能体现你对前端模块化、复用性的理解。
• 前后端分离：这是现代Web开发的标准范式。后端（SpringBoot）专注于提供清晰、规范的RESTful API，处理业务逻辑和数据持久化；前端（Vue）负责渲染界面、处理用户交互。这种分离使得前后端可以并行开发（对于团队项目尤为重要），且后端API可以服务于Web、小程序、App等多种客户端。你的项目结构（两个独立的工程：一个backend，一个frontend）本身就是这一架构的体现。

1.2 你的项目“骨架”：超越默认的目录结构

当你用IDEA的Spring Initializr或Vue CLI创建项目后，得到的只是一个空壳。一个有深度的毕设，需要你规划一个清晰的、可扩展的目录结构。这能直接反映你的项目组织能力。

后端 (springboot-home-service) 建议结构：

src/main/java/com/yourdomain/homeservice/ ├── config/ # 配置类（如跨域配置、Swagger配置、安全配置） ├── controller/ # 控制器层，接收请求，调用Service，返回JSON │ ├── api/ # 对外API接口（如 /api/v1/order） │ └── common/ # 通用控制器（如文件上传） ├── service/ # 业务逻辑层接口 │ └── impl/ # 业务逻辑层实现 ├── mapper/ # MyBatis-Plus的Mapper接口（或DAO层） ├── entity/ # 实体类，与数据库表对应（如User, ServiceItem, Order） ├── dto/ # 数据传输对象（用于前后端交互，如OrderDTO） ├── vo/ # 视图对象（用于返回给前端的特定视图，如OrderDetailVO） ├── common/ # 通用工具包（如统一响应结果、常量、异常枚举） │ ├── Result.java │ ├── BaseException.java │ └── Constants.java └── HomeserviceApplication.java # 启动类

关键点：区分entity,dto,vo。entity是纯粹的数据库映射；dto是接口入参，用于接收前端数据（可能包含多个entity的字段或验证注解）；vo是接口出参，用于组装返回给前端的数据（可能聚合多个entity的信息）。这体现了分层设计和职责分离的思想。

前端 (vue-home-service-admin) 建议结构 (基于Vue CLI)：

src/ ├── api/ # 封装所有对后端API的请求（使用axios） ├── assets/ # 静态资源（图片、样式） ├── components/ # 可复用组件（如ServiceCard.vue, DatePicker.vue） ├── router/ # Vue Router路由配置 ├── store/ # Vuex状态管理（用于管理用户登录态、全局配置） ├── views/ # 页面视图组件（如Login.vue, Dashboard.vue, OrderList.vue） ├── utils/ # 工具函数（如时间格式化、请求拦截器） ├── styles/ # 全局样式 └── main.js # 入口文件

关键点：api目录的封装。不要在每个.vue文件里直接写axios.post(...)。应该集中管理所有接口，便于维护和复用。例如：

// src/api/order.js import request from '@/utils/request' // 这是封装了axios的实例 export function getOrderList(params) { return request({ url: '/api/v1/order/list', method: 'get', params }) } export function createOrder(data) { return request({ url: '/api/v1/order', method: 'post', data }) }

2. 核心业务模块设计：家政服务的逻辑闭环

一个家政平台，核心是围绕“服务”产生的流程。你需要设计清晰的数据库表，并实现与之对应的前后端逻辑。我们以“用户预约服务”这个核心流程为例。

2.1 数据库设计：表结构与关系映射

至少需要以下核心表（这里使用MySQL语法示例）：

-- 用户表（区分客户和家政人员） CREATE TABLE `sys_user` ( `id` bigint NOT NULL AUTO_INCREMENT, `username` varchar(50) UNIQUE COMMENT '用户名', `password` varchar(100) COMMENT '加密后的密码', `nick_name` varchar(50) COMMENT '昵称', `user_type` tinyint DEFAULT 0 COMMENT '用户类型：0-客户，1-家政人员，2-管理员', `phone` varchar(20) COMMENT '手机号', `avatar` varchar(255) COMMENT '头像', `status` tinyint DEFAULT 1 COMMENT '状态：0-禁用，1-正常', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) COMMENT='系统用户表'; -- 服务项目表 CREATE TABLE `service_item` ( `id` bigint NOT NULL AUTO_INCREMENT, `name` varchar(100) NOT NULL COMMENT '服务名称（如：深度保洁）', `description` text COMMENT '服务描述', `price` decimal(10,2) NOT NULL COMMENT '单价', `unit` varchar(20) COMMENT '单位（如：小时、次）', `category_id` bigint COMMENT '分类ID', `cover_image` varchar(255) COMMENT '封面图', `status` tinyint DEFAULT 1 COMMENT '状态：1-上架，0-下架', PRIMARY KEY (`id`) ) COMMENT='服务项目表'; -- 订单表（核心业务表） CREATE TABLE `service_order` ( `id` varchar(32) NOT NULL COMMENT '订单号（可雪花算法生成）', `customer_id` bigint NOT NULL COMMENT '客户ID', `service_item_id` bigint NOT NULL COMMENT '服务项目ID', `worker_id` bigint COMMENT '指派的家政人员ID', `order_time` datetime NOT NULL COMMENT '预约时间', `address` varchar(255) NOT NULL COMMENT '服务地址', `contacts` varchar(50) NOT NULL COMMENT '联系人', `phone` varchar(20) NOT NULL COMMENT '联系电话', `remark` varchar(500) COMMENT '备注', `total_amount` decimal(10,2) NOT NULL COMMENT '订单总金额', `status` tinyint DEFAULT 0 COMMENT '状态：0-待支付，1-待接单，2-已接单/服务中，3-服务完成，4-已取消，5-已评价', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`), KEY `idx_customer` (`customer_id`), KEY `idx_status` (`status`) ) COMMENT='服务订单表'; -- 订单状态流水表（用于追踪订单状态变化） CREATE TABLE `order_status_log` ( `id` bigint NOT NULL AUTO_INCREMENT, `order_id` varchar(32) NOT NULL, `from_status` tinyint COMMENT '原状态', `to_status` tinyint NOT NULL COMMENT '新状态', `operator` varchar(50) COMMENT '操作人（系统、用户、管理员）', `remark` varchar(200) COMMENT '操作备注', `create_time` datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`), KEY `idx_order` (`order_id`) ) COMMENT='订单状态日志表';

设计思考：

1. 订单状态枚举：明确的状态机是业务逻辑清晰的保障。从“待支付”到“已评价”，每个状态变迁都应有对应的触发条件（如用户支付、管理员派单、服务人员确认完成）。
2. 日志表：order_status_log表至关重要。它记录了订单的完整生命周期，便于后期排查问题、生成报表和实现“订单轨迹”功能。
3. 金额字段：使用DECIMAL(10,2)类型，避免浮点数精度问题。

2.2 后端实现：SpringBoot + MyBatis-Plus的实战

第一步：集成MyBatis-Plus在pom.xml中添加依赖，它极大地简化了单表CRUD操作。

<dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>最新版本</version> </dependency>

配置数据源和Mapper扫描。

第二步：编写实体类与Mapper

// entity/ServiceOrder.java @Data @TableName("service_order") // 指定表名 public class ServiceOrder { @TableId(type = IdType.ASSIGN_ID) // 使用雪花算法生成ID private String id; private Long customerId; private Long serviceItemId; private Long workerId; private LocalDateTime orderTime; private String address; private String contacts; private String phone; private String remark; private BigDecimal totalAmount; private Integer status; private LocalDateTime createTime; private LocalDateTime updateTime; } // mapper/ServiceOrderMapper.java @Mapper public interface ServiceOrderMapper extends BaseMapper<ServiceOrder> { // 复杂的多表查询可以在这里定义方法，并配合XML或注解 List<OrderVO> selectOrderList(@Param("query") OrderQueryDTO query); }

第三步：实现业务逻辑层与服务层

// dto/OrderQueryDTO.java (用于接收前端查询条件) @Data public class OrderQueryDTO { private String orderId; private Long customerId; private Integer status; private LocalDateTime beginTime; private LocalDateTime endTime; private Integer pageNum = 1; private Integer pageSize = 10; } // vo/OrderVO.java (返回给前端的视图对象，包含关联信息) @Data public class OrderVO { private String id; private String customerName; private String serviceItemName; private String workerName; private LocalDateTime orderTime; private String address; private BigDecimal totalAmount; private Integer status; private String statusDesc; // 状态描述，如“待接单” private List<StatusLogVO> statusLogs; // 状态流水 } // service/OrderService.java public interface OrderService { PageResult<OrderVO> getOrderList(OrderQueryDTO query); String createOrder(OrderCreateDTO dto); boolean updateOrderStatus(String orderId, Integer targetStatus, String remark); } // service/impl/OrderServiceImpl.java @Service @Slf4j public class OrderServiceImpl extends ServiceImpl<ServiceOrderMapper, ServiceOrder> implements OrderService { @Autowired private ServiceItemService itemService; @Autowired private OrderStatusLogService logService; @Override @Transactional(rollbackFor = Exception.class) // 开启事务 public String createOrder(OrderCreateDTO dto) { // 1. 参数校验（如服务项是否存在、用户是否存在） ServiceItem item = itemService.getById(dto.getServiceItemId()); if (item == null) { throw new BusinessException("服务项目不存在"); } // 2. 构建订单实体 ServiceOrder order = new ServiceOrder(); BeanUtils.copyProperties(dto, order); order.setId(IdWorker.getIdStr()); // 生成订单号 order.setTotalAmount(item.getPrice()); // 计算金额，这里简单处理 order.setStatus(0); // 初始状态：待支付 // 3. 保存订单 this.save(order); // 4. 记录状态日志 logService.recordLog(order.getId(), null, 0, "用户创建订单"); // 5. 可以在这里触发后续逻辑，如发送短信通知、调用支付接口等 return order.getId(); } }

关键点：

• 事务管理：@Transactional确保创建订单和记录日志要么都成功，要么都失败。
• 异常处理：定义全局异常处理器（@ControllerAdvice），将不同的异常（如BusinessException业务异常）转换为统一的JSON格式返回给前端。
• 统一响应：所有Controller返回Result<T>格式，包含code,msg,data。

2.3 前端实现：Vue组件与API调用

在Vue中，一个订单列表页可能包含以下部分：

1. 搜索表单组件 (SearchForm.vue)：包含订单号、状态等筛选条件。
2. 订单表格组件 (OrderTable.vue)：使用Element UI的el-table展示数据，并处理分页。
3. 页面主组件 (OrderList.vue)：组合搜索和表格，并调用API。

<!-- views/order/OrderList.vue --> <template> <div class="order-container"> <search-form @search="handleSearch" @reset="handleReset" /> <order-table :data="tableData" :loading="loading" @refresh="fetchData" /> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50]" :page-size="queryParams.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </template> <script> import SearchForm from './components/SearchForm.vue' import OrderTable from './components/OrderTable.vue' import { getOrderList } from '@/api/order' export default { name: 'OrderList', components: { SearchForm, OrderTable }, data() { return { queryParams: { pageNum: 1, pageSize: 10, status: undefined, orderId: '' }, tableData: [], total: 0, loading: false } }, created() { this.fetchData() }, methods: { async fetchData() { this.loading = true try { const res = await getOrderList(this.queryParams) if (res.code === 200) { this.tableData = res.data.list this.total = res.data.total } } catch (error) { console.error('获取订单列表失败:', error) } finally { this.loading = false } }, handleSearch(params) { this.queryParams = { ...this.queryParams, ...params, pageNum: 1 } this.fetchData() }, handleReset() { this.queryParams = { pageNum: 1, pageSize: 10 } this.fetchData() }, handleSizeChange(val) { this.queryParams.pageSize = val this.fetchData() }, handleCurrentChange(val) { this.queryParams.pageNum = val this.fetchData() } } } </script>

关键点：

• 组件化：将搜索和表格拆分为独立组件，使主视图逻辑清晰。
• 状态管理：简单的页面内状态用data管理即可。如果登录用户信息、全局配置需要在多个组件间共享，可以考虑引入Vuex。
• API封装：如之前所述，所有网络请求在api/order.js中封装，这里直接引入调用。

3. 那些比功能更重要的“非功能性”实现

一个能打动人的毕设，往往赢在细节。这些细节体现了你的工程素养和项目完整性。

3.1 用户认证与授权（JWT方案）

一个没有权限控制的系统是不完整的。对于毕业设计，采用JWT（JSON Web Token）是轻量且主流的选择。

1. 用户登录：后端验证用户名密码后，生成一个JWT令牌（包含用户ID、角色等信息）返回给前端。
2. 存储令牌：前端收到后，通常存储在localStorage或sessionStorage中。
3. 携带令牌：前端在后续请求的HTTP Header（如Authorization: Bearer <token>）中携带此令牌。
4. 拦截验证：后端通过一个拦截器（HandlerInterceptor或Filter）验证JWT的有效性和权限。

SpringBoot后端实现拦截器示例：

@Component public class JwtInterceptor implements HandlerInterceptor { @Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 1. 从请求头获取token String token = request.getHeader("Authorization"); if (StringUtils.isEmpty(token) || !token.startsWith("Bearer ")) { throw new UnauthorizedException("请先登录"); } token = token.substring(7); // 2. 解析并验证token Claims claims = JwtUtil.parseToken(token); if (claims == null) { throw new UnauthorizedException("令牌无效或已过期"); } // 3. 将用户信息存入请求上下文，便于后续使用 Long userId = Long.valueOf(claims.getSubject()); String role = (String) claims.get("role"); UserContext.setCurrentUser(userId, role); return true; } @Override public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception { // 请求结束后，清除上下文，防止内存泄漏 UserContext.clear(); } }

Vue前端实现请求拦截器（axios）：

// utils/request.js import axios from 'axios' import { Message } from 'element-ui' import router from '@/router' const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 10000 }) // 请求拦截器：为每个请求添加token service.interceptors.request.use( config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = 'Bearer ' + token } return config }, error => { return Promise.reject(error) } ) // 响应拦截器：统一处理错误（如401跳转登录） service.interceptors.response.use( response => { const res = response.data if (res.code !== 200) { Message.error(res.msg || '请求失败') // 如果是未授权，跳转到登录页 if (res.code === 401) { router.push('/login') } return Promise.reject(new Error(res.msg || 'Error')) } else { return res } }, error => { Message.error('网络错误或服务器异常') return Promise.reject(error) } ) export default service

3.2 API文档与调试：Swagger/knife4j

后端开发API后，必须提供文档。集成knife4j（Swagger的增强版）可以自动生成漂亮且可调试的API文档。

1. 添加依赖。
2. 添加配置类启用Swagger。
3. 在Controller和Model上使用注解（如@Api,@ApiOperation,@ApiModelProperty）。
4. 启动项目后，访问http://localhost:8080/doc.html即可查看和调试所有接口。这极大方便了前后端联调，也是你项目文档的重要组成部分。

3.3 部署与跨域问题

跨域问题：当前端项目（如运行在localhost:8081）访问后端API（localhost:8080）时，浏览器会因为同源策略而阻止。在后端通过配置CORS（跨域资源共享）解决。

// config/WebConfig.java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") // 对所有路径生效 .allowedOriginPatterns("*") // 允许所有来源（生产环境应指定具体域名） .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600); } }

项目部署：对于毕业设计演示，最简单的部署方式是：

1. 后端：使用Maven打包（mvn clean package）生成可执行的jar文件。在服务器或本地命令行用java -jar your-project.jar运行。确保服务器安装了Java运行环境（JRE）。
2. 前端：运行npm run build生成静态文件（在dist目录）。可以将dist目录下的文件直接部署到Nginx或Apache等Web服务器上。更简单的方式是，将dist目录拷贝到SpringBoot项目的src/main/resources/static目录下，然后修改路由配置，让SpringBoot同时服务于前端静态资源和后端API（适合单机演示）。

4. 从“能运行”到“能答辩”：提升项目深度的关键点

要让你的项目在答辩中脱颖而出，可以考虑实现以下一个或几个进阶功能，这能显著体现你的技术深度和思考。

4.1 实现简单的支付流程模拟

虽然集成真实的微信/支付宝支付对于毕设来说可能太重，但你可以模拟一个完整的支付状态流转。

1. 在订单表增加pay_time（支付时间）、transaction_id（模拟交易号）字段。
2. 创建一个“支付”接口。该接口接收订单号，在业务逻辑中模拟支付成功（例如，随机成功或失败），并更新订单状态为“待接单”，同时记录支付日志。
3. 前端在订单列表增加“去支付”按钮，调用此模拟接口。
4. 思考：如果支付成功后，系统宕机了怎么办？可以引入“状态补偿”机制，或者记录更详细的支付流水，用于对账。

4.2 引入消息队列进行异步处理

使用SpringBoot集成一个轻量级的消息队列（如RabbitMQ或Redis的Pub/Sub），来处理非实时核心业务。

• 场景：当订单状态变更为“服务完成”时，需要给客户发送一条服务评价提醒短信。
• 实现：状态变更后，不直接调用发短信的慢速API，而是向消息队列发送一条消息。由一个独立的“消息消费者”服务异步处理这条消息，调用短信服务。这样主订单流程不会因为短信发送失败或延迟而阻塞。
• 价值：这体现了你对系统解耦、异步处理和最终一致性的理解。

4.3 增加数据可视化报表

使用ECharts等库，在管理员后台增加一个数据看板。

• 展示内容：近30天订单量趋势图、服务品类销量占比饼图、家政人员接单排行等。
• 实现：后端提供统计查询的API，前端使用ECharts渲染图表。
• 价值：展示你处理数据、前端图表集成和提供业务洞察的能力。

4.4 编写单元测试

为关键的服务层方法编写单元测试（使用JUnit + Mockito）。例如，测试OrderService.createOrder方法在服务项不存在时是否会抛出预期异常。

@SpringBootTest class OrderServiceTest { @Autowired private OrderService orderService; @MockBean private ServiceItemService itemService; // 模拟依赖项 @Test void createOrderWithInvalidItemShouldThrowException() { // 给定：模拟itemService返回null when(itemService.getById(anyLong())).thenReturn(null); // 当：调用创建订单方法 OrderCreateDTO dto = new OrderCreateDTO(); dto.setServiceItemId(999L); // 那么：应抛出业务异常 assertThrows(BusinessException.class, () -> { orderService.createOrder(dto); }); } }

价值：这是代码质量和工程实践的重要标志，能极大提升答辩印象。

4.5 容器化部署（Docker）

如果你有余力，可以尝试将前后端项目Docker化。

1. 为后端编写Dockerfile，基于OpenJDK镜像构建。
2. 为前端编写Dockerfile，基于Nginx镜像，将构建好的静态文件复制进去。
3. 编写一个docker-compose.yml文件，一键启动MySQL、后端容器、前端容器。
4. 价值：这展示了你对现代应用部署方式的理解，是简历上的一个亮点。

最后，请记住，毕业设计的核心价值不在于你用了多少炫技的技术，而在于你能否用一个完整的项目，清晰地展示你如何分析问题、设计系统、选择技术、解决难题并最终交付一个可工作的软件。把每一个功能点都想深一层，把每一个技术选择都说出道理，你的项目就不再是一堆代码的堆砌，而是一个有血有肉、经得起推敲的技术作品。从今天起，试着用工程师的思维，而不仅仅是学生的思维，去完成你的家政服务平台吧。

🚀 30+款热门AI模型一站整合，DeepSeek/GLM/Claude 随心用，限时 5 折。 👉 点击领海量免费额度