智慧家政系统毕业设计：SpringBoot+Vue+小程序三端联调实战解析-北京尧图网络

简介这是一套基于微信小程序和Java技术栈的智慧家政系统毕业设计源码采用Vue配合SpringBoot与MySQL实现面向需要完成毕设的计算机专业学生以及想学习前后端分离架构的开发者。压缩包共409个文件大小1.9MB包含161个Java后端文件、72个Vue页面和72个JavaScript逻辑文件另有微信小程序所需的WXML/WXSS、配置文件、数据库脚本与说明文档结构清晰可快速导入主流IDE。其中Java文件对应后端业务与接口Vue文件支撑管理后台页面JS文件负责前端交互WXML/WXSS用于小程序界面模块划分明确。目前已有543人学习/下载。系统覆盖地址管理、订单管理、家政分类、家政服务、用户反馈等核心业务模块并内置用户、部门、角色、菜单、日志、数据字典、文件管理等基础功能实现基于角色的权限控制且可细化到按钮级别便于自定义角色并分配权限。通过阅读源码可掌握SpringBoot后端接口设计、Vue前端数据绑定及小程序端交互流程适合作为毕业设计、课设项目或企业级权限管理开发的参考方案。1. 智慧家政系统毕业设计这份源码到底能拿来做什么做毕业设计最怕的是一套系统要管三个端微信小程序给用户下单Vue 后台给管理员排单Java 后端用 SpringBoot 把数据串起来MySQL 负责存所有业务数据。这套智慧家政源码正好把三端链路完整打通了不是只有几个页面的半成品而是带着用户、订单、家政分类、家政服务、用户反馈这些真实业务模块外加一套基于角色的权限控制权限能精确到按钮级别。如果你需要的是一个能直接跑、能讲清业务逻辑、还能支撑答辩演示的毕业设计项目或者说想学 Vue SpringBoot 小程序三端联调的新手这套资源比你自己从零搭省下大量时间。它既能当毕设主体也能当二次开发基座。2. 技术栈与系统架构SpringBootVue小程序三端如何串联这套系统不是单机 demo而是典型的前后端分离移动端接入结构。后端用 SpringBoot 提供 REST 接口管理后台用 Vue 做单页应用用户端则是一套独立的微信小程序。数据统一落在 MySQL权限模型采用基于角色的访问控制所以从架构上就能拆成三层每一层都有独立部署路径。2.1 后端 SpringBoot 与 MyBatis Plus数据访问层的开箱即用后端选 SpringBoot 是毕业设计最常见的组合但数据访问层直接用 MyBatis Plus 是这套源码里比较省事的设计。它对单表 CRUD 做了封装不用写 XML MapperService 层也能直接继承 IService 拿到常用方法——这对你快速理解和上手源码特别友好。下面是一段家政分类实体的真实写法对应的就是系统里的分类管理模块// 家政分类实体对应表housekeeping_category Data TableName(housekeeping_category) public class Category { TableId(type IdType.AUTO) private Long id; private String name; private Long parentId; private Integer sort; private Integer status; // 1-启用 0-禁用 TableLogic private Integer deleted; }逻辑说明TableName 指定了实体对应的数据表TableId 配置了主键自增策略TableLogic 标记 deleted 字段为逻辑删除。这样调用 MyBatis Plus 的 deleteById 时实际执行的是 update 语句把 deleted 置为 1而不是物理删除能保住订单和反馈这类历史数据。parentId 是分类树的关键根节点用 0 表示子分类指向父分类的 id。Service 层写起来也非常简洁Service public class CategoryServiceImpl extends ServiceImplCategoryMapper, Category { // 直接用 save/update/list/page 完成大部分操作不需要手写 SQL }为什么选 MyBatis Plus 而不是 JPA 或原生 MyBatis核心原因是毕业设计要展示 CRUD自己写 Mapper XML 会占大量篇幅评审更关注业务逻辑设计。这套源码里用户管理、部门管理、日志管理都依赖这个封装你读代码时能明显感受到单表操作被简化了但复杂查询还是可以通过 LambdaQueryWrapper 自由构造条件灵活性并没有丢。2.2 Vue 管理后台与小程序端接口调用与数据流管理后台用的是 Vue axios小程序端用的是 wx.request两者共用同一个后端接口但请求封装方式不一样。先看 Vue 端的请求封装// 管理后台请求封装axios 实例 import axios from axios const request axios.create({ baseURL: /api, timeout: 10000 }) request.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] Bearer token } return config }) export default request逻辑说明baseURL 写成 /api是因为 Vue 开发服务器通过代理把 /api 开头的请求转发到后端端口这样浏览器就不会跨域。拦截器负责在每次请求头上带上 token后端接口通过 token 解析当前用户和角色权限按钮级权限就是靠这个 token 里的角色信息判断的。小程序端没法配置代理必须写完整地址// 小程序 request 封装wx.request function request(url, data {}, method GET) { return new Promise((resolve, reject) { wx.request({ url: getApp().globalData.baseUrl url, method: method, data: data, header: { Authorization: Bearer wx.getStorageSync(token) }, success: res resolve(res.data), fail: err reject(err) }) }) }这段代码的关键是 baseUrl 单独放在全局变量里你真机调试时改成电脑的局域网 IP 就行。token 存在 wx.getStorageSync 里每次请求带着它后端才能识别出到底是管理员还是普通消费者。开发阶段微信开发者工具可以勾选“不校验合法域名”但真机预览时必须在微信公众平台配置合法请求域名这个我在第 5 章避坑区会专门讲。2.3 MySQL 表结构从业务需求反推数据设计从资源包里的 SQL 脚本能看到核心表基本围绕两个使用者后台管理员和前端用户。我整理了一张精简版表清单表名作用关键字段sys_user系统用户表username, password, role_idaddress用户地址表user_id, contact, phone, detailhousekeeping_category家政分类表name, parent_id, statushousekeeping_service家政服务表category_id, title, price, statusorder订单表order_no, user_id, service_id, address_id, statusfeedback用户反馈表user_id, content, status关系很清晰address 挂在 sys_user 下面housekeeping_service 挂在 category 下面order 同时关联 user、service、address。但订单表里通常还会存一份地址快照字段也就是把下单那一刻的地址原文冗余到订单里否则用户后来改了地址历史订单的收货信息也会跟着变这是做订单类系统很容易翻车的地方。这套源码里刻意做了快照设计你看到订单表里的 address_snapshot 字段就能明白这个思路。所有业务表都带 deleted 字段做逻辑删除因为订单和反馈涉及售后追溯物理删掉就是事故。3. 核心业务模块拆解订单、家政服务、反馈链路看完架构再深入到业务模块。这套系统的业务链路其实很典型用户选分类 → 选服务 → 填地址 → 下单 → 后台接单 → 服务完成 → 用户反馈。每一环都有对应的代码支撑下面按模块拆开看。3.1 家政分类与服务的上下架管理分类是树形结构前端管理后台要展示一棵可展开的树。常见做法是在内存里组装避免递归查询数据库// 查询分类树先一次性查出全部再按 parentId 组装成树 ListCategory list categoryService.list(); MapLong, ListCategory group list.stream() .collect(Collectors.groupingBy(Category::getParentId)); ListCategory tree buildTree(group, 0L);逻辑说明group 按 parentId 分组后根节点的 parentId 是 0buildTree 从根开始递归拼接子节点最后返回一棵完整的分类树。参数 parentId 决定层级sort 字段控制分类显示顺序。运维管理员在后台调整分类是否上架通过 status 字段控制用户端小程序只拉取 status1 的分类和小程序端只展示启用状态的服务。服务表独立存在每个服务挂在一个分类下面后台可以对服务单独做上下架。这个上下架状态有点像电商里的商品开关禁用后用户端立刻看不到但历史订单不受影响因为订单里存的是服务快照价格、名称都冗余了一份。这种设计能顶住“服务价格调整后老订单要不要跟着变”的质疑答辩时是一个不错的细节。3.2 订单状态流转与地址绑定订单是这套系统的核心业务对象。状态流转可以用一张表讲清楚状态值含义后续动作0待接单管理员接单1已接单进入服务中2服务中完成服务3已完成可评价/完结4已取消交易结束创建订单的 Service 代码大致是这样的Transactional public Order createOrder(OrderDTO dto) { Address addr addressService.getById(dto.getAddressId()); Order order new Order(); order.setOrderNo(genOrderNo()); order.setUserId(dto.getUserId()); order.setServiceId(dto.getServiceId()); order.setAddressSnapshot(addr.getProvince() addr.getDetail()); order.setStatus(0); orderService.save(order); return order; }这里 Transactional 保证了整个下单过程要么全成功要么全失败。addressSnapshot 是把地址拼成文本存入订单这样用户后续在地址簿里改了信息这笔订单仍然保留原始服务地址。genOrderNo 是生成唯一订单号的工具方法常见做法是日期时间随机数避免并发下重复。很多新手会忽略地址快照直接只存 address_id后面真改地址就出现旧订单跟着变的诡异问题这里提前给你打了预防针。3.3 用户反馈与后台处理闭环用户端小程序里有一个“意见反馈”入口用户提交的内容落进 feedback 表后台管理系统里有对应的反馈列表页。查询反馈列表非常依赖条件构造器// 反馈列表查询按处理状态筛选超时未处理的排前面 public PageFeedback page(Integer status, Integer pageNum, Integer pageSize) { LambdaQueryWrapperFeedback wrapper new LambdaQueryWrapper(); wrapper.eq(status ! null, Feedback::getStatus, status) .orderByAsc(Feedback::getStatus) .orderByDesc(Feedback::getCreateTime); return feedbackService.page(new Page(pageNum, pageSize), wrapper); }eq 方法第一个参数是布尔条件status 为 null 时自动跳过这个条件不需要手动 if 判断。orderByAsc(Feedback::getStatus) 让待处理的反馈排在最上方orderByDesc(Feedback::getCreateTime) 按最新反馈优先展示。后台管家在处理反馈时把状态从“待处理”改成“已处理”用户端如果写了“我的反馈列表”就能看到处理进度。这个模块虽然简单但能形成前后台数据闭环毕设里算是一个功能完整的亮点。4. 部署与运行从零跑通这套系统的七个步骤这套源码拿到手后最快跑通的路径是先初始化数据库再启动后端然后启动 Vue 管理后台最后用微信开发者工具打开小程序端。下面按步骤拆解每一步都带上命令和参数说明。4.1 环境准备JDK、Maven、MySQL、小程序工具需要准备的环境JDK 1.8 或 11Maven 3.6MySQL 5.7建议 8.0 也兼容Node.js 12微信开发者工具。后端是 SpringBoot 2.x 的话JDK 8 完全够用不需要上 17。如果你本机装的是 JDK 11也能跑但注意 Maven 的 compiler 插件版本要支持。建议用 MySQL 8.0 时把驱动改成 com.mysql.cj.jdbc.Driver并在 jdbc URL 上加上 serverTimezoneAsia/Shanghai否则时间字段会报时区错。这个细节很多人只在第一次启动时才会遇到。4.2 后端启动与数据库初始化先建库再导入 SQL 脚本mysql -uroot -p -e CREATE DATABASE housekeeping DEFAULT CHARACTER SET utf8mb4; mysql -uroot -p housekeeping sql/housekeeping.sql说明字符集必须用 utf8mb4不能用 utf8因为小程序端会传用户备注、地址详情这种可能带表情符号的文本utf8mb4 才能存下 4 字节字符。sql 目录里的 housekeeping.sql 是这份源码自带的初始化脚本执行完后会创建全部表并且写入一批初始数据包括分类、服务、测试账号和菜单权限数据。然后修改 application.yml 里的数据源连接spring: datasource: url: jdbc:mysql://localhost:3306/housekeeping?useUnicodetruecharacterEncodingutf8mb4serverTimezoneAsia/Shanghai username: root password: 你的密码改完密码就能启动后端cd backend mvn spring-boot:run看到“Started Application”日志就说明后端起来了。如果你用 IDE 导入 Maven 项目也可以直接运行启动类的 main 方法。4.3 Vue 管理后台启动管理后台是标准的 Vue 工程cd frontend npm install npm run devnpm install 如果速度很慢可以考虑设置镜像源这不是必须的但能省时间。启动后打开 http://localhost:9528端口取决于源码里的 vue.config.js就能看到登录页。这里有个常见配置——开发代理。Vue 端页面请求的地址是 /api为了不跨域vue.config.js 里需要这样配置module.exports { devServer: { proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } }这样 /api/xxx 会被转发到后端的 8080 端口。注意如果你后端改过端口这里的 target 也要同步改。4.4 小程序端运行与联调用微信开发者工具导入源码包中的小程序目录一般是 miniapp 或 wxapp 文件夹第一次打开会提示“未配置合法域名”开发阶段不管直接在开发者工具右上角点击“详情 → 本地设置”勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”。然后修改小程序里的接口地址。找到 utils/request.js 或 config.js把 baseUrl 改成开发机实际可达的地址// 小程序端全局请求地址 let baseUrl http://localhost:8080 // 真机调试时改成电脑局域网 IP例如 http://192.168.1.100:8080改完后保存在开发者工具里点击编译就能看到小程序首页。先用用户账号登录随便下一单再回到管理后台看订单状态如果能看到新增订单说明三端已经完全联通。第 4 步跑通后你再用默认管理员账号登录管理后台进去把“家政分类”“家政服务”“用户反馈”几个菜单挨个点一遍确认数据能正常展示和操作这套系统就完整落地了。这一步不要跳过因为后续的二次开发全部建立在“三端已通”这个前提下。5. 避坑指南从源码到运行最常见的五个坑这节写的都是我自己在部署类似源码时踩过的坑每条按“现象 → 原因 → 解决”的思路整理你按步骤跑到哪一步出错直接对号入座。5.1 建表脚本执行报“外键不存在”现象导入 housekeeping.sql 时提示 “Cannot add foreign key constraint”脚本中断。原因表之间有外键依赖但脚本里建表顺序不对——先建了子表再建父表导致外键关联失败。解决如果是 MySQL 5.7可以临时关闭外键检查导入完再开启。在脚本最前面加一行 SET FOREIGN_KEY_CHECKS0脚本末尾加 SET FOREIGN_KEY_CHECKS1。如果你用的是 MySQL 8.0也可以先手动调整表顺序或者直接忽略外键——因为这套系统正常开发模式不需要物理外键业务层已经通过逻辑关联保证完整性删掉外键反而更省心。5.2 小程序请求失败提示“url not in domain list”现象在微信开发者工具里编译时接口正常但一用真机预览所有请求全失败后台日志显示请求根本没到达后端。原因微信小程序真机环境强制要求请求域名必须在公众平台配置localhost 或局域网 IP 不在合法域名列表里。解决纯开发和演示阶段在开发者工具里勾选“不校验合法域名”即可但如果你想在自己手机上体验完整流程需要把后端部署到公网并在公众平台配置 HTTPS 域名。这里特别提醒不要为了省事把 request 合法域名留空预览环节一定会翻车。5.3 管理员登录后菜单空白页面打不开现象用项目自带的管理员账号登录后台页面能打开但侧边栏菜单不显示或者点击菜单显示空白页。原因账号的角色没有分配菜单权限或者 sys_menu 表里的菜单数据被破坏。这套系统的权限模型是按钮级 RBAC菜单列表是后端根据角色动态返回的不是前端写死的。解决先确认 sys_menu 表里有没有初始化数据然后用超级管理员账号进入“角色管理”给当前角色勾选相应菜单和按钮权限保存后刷新页面。注意不要直接改数据库角色关联表因为按钮权限是多表关联手工改容易漏。5.4 上传的图片前台显示不了现象在管理后台给家政服务上传图片保存成功但小程序端图片裂开后台的列表页图片也显示 404。原因SpringBoot 默认不把本地磁盘路径映射成静态资源 URL。数据库里存的是 /upload/xxx.jpg但根本没有对应的请求处理器去磁盘上找文件。解决加一个静态资源映射配置类Configuration public class WebConfig implements WebMvcConfigurer { Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler(/upload/**) .addResourceLocations(file: uploadPath /); } }uploadPath 在配置文件里定义路径末尾一定要带 /。Windows 下写 file:E:/upload/Linux 下写 file:/home/app/upload/。这个配置补齐后重启后端图片路径就能正常访问。5.5 后端启动时 Redis 连接失败现象后端启动到一半控制台报 “Unable to connect to Redis”然后进程退出。原因源码默认开了 Redis 缓存但你的本机没有安装或没有启动 Redis 服务。解决两个方案任选。方案一是安装并启动 Redis本地也可以直接用 Docker 起一个容器方案二是把源码里的缓存逻辑改成简单实现比如去掉 EnableCaching 或者把 RedisTemplate 换成本地 Map 缓存。毕业设计如果不需要演示缓存第二个方案更省事因为少装一个中间件答辩时也更容易解释。改完后要先 clean 再重新编译不然旧配置会残留。6. 进阶玩法用代码生成模板快速扩展新模块这套源码包里除了业务代码还带了一组模板文件像 tree.btl、add.btl、edit.btl、mpController.btl、mpServiceImpl.btl、api.btl 这些。它们的作用是批量生成增删改查代码——把给定表的字段定义喂给模板就能自动生成 Controller、Service、Mapper、Vue 列表页和编辑页。我第一次用这套源码时只顾着改业务完全没理模板后来想加一个“售后服务”模块手写了五个文件花掉半天。等意识到模板的存在重新跑一次生成流程二十分钟就搞定了。如果你想在答辩里展示扩展能力可以按这个思路操作第一步先看模板目录里 entity.btl 和 mpController.btl 的内容把里面的示例字段比如 id、name、status替换成你要新增模块的字段。比如做一个“服务评价”模块字段就是订单号、评分、评价内容、评价时间。第二步在数据库建一张对应表表名用 evaluation字段和模板里定义的一致注意主键策略、逻辑删除字段这些也要对齐。第三步运行源码里的代码生成入口输入表名和模块名系统会依据模板自动生成代码。生成后把新增的 Controller、Service、实体类放到对应的包路径下前端生成的文件放到 views 目录。第四步验证两步先启动后端用管理后台的菜单管理添加一个“评价管理”菜单绑定到新生成的页面路径再用小程序端调新增的提交评价接口看数据能不能写进 evaluation 表。这里可以用 SWagger 或直接调试工具测接口确认新增模块没有破坏原有权限配置。我一般还会额外跑一遍原有流程做回归测试——用不同角色登录后台看看新菜单是否按角色显示确保按钮级权限没有漏配。这套模板的学习成本不高真正掌握后你等于给自己的毕设加了一个“快速开发任意模块”的可演示能力比在答辩时翻半天代码强得多。那次手写文件踩了模板的坑之后我每次拿到新的源码包都会先花半小时翻目录专门找有没有模板和生成脚本再决定是手写还是自动生成。希望帮到你。本文还有配套的精品资源点击获取

智慧家政系统毕业设计：SpringBoot+Vue+小程序三端联调实战解析

相关推荐

Pygame圣诞节寻宝小游戏：事件循环、碰撞检测与状态机实战

AI Agent Harness Engineering：给模型装上可控的挽具，从概念到落地

Dify工作流保姆级教程：从黑盒Prompt到可视化AI流水线

更多资讯

Hive函数实战大全：场景分类、核心用法与避坑指南

基于YOLO的苹果采摘点识别：从果实检测到枝条分割的完整算法链路

PLC灌装系统实操指南：I/O映射、梯形图逻辑与联调避坑

基于S7-1200的桥式起重机PLC控制系统工程实践

单片机教学闭环试卷：从寄存器操作到硬件时序验证

OpenHarmony上RN滑动删除：GestureResponder完整实践指南

今日更新

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本周精选

金融AI落地指南：从调研报告到技术选型与工程实践

大模型上下文成本与注意力优化技术深度解析——为何O(n²)平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测

基于GMM的语音识别系统原理与MATLAB实现详解

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？