SSM+Vue家政服务管理小程序毕业设计全流程实战解析

发布时间:2026/10/8 17:23:46
SSM+Vue家政服务管理小程序毕业设计全流程实战解析 简介家政服务管理小程序毕业设计资料包基于微信小程序SSMVueMySQL实现前后端分离面向计算机相关专业毕业生或需快速搭建完整项目的人群。资源包含小程序前端、Vue管理端、Java后台与数据库脚本附带毕业论文和演示视频管理员可管理家政公司、家政阿姨、预约、服务项目及评价留言用户可在线预约并支付家政阿姨可审核预约和查看评价适合课题研究、功能参考或答辩准备。压缩包共1123个文件约38.52MB涵盖png/svg图片、vue/js前端代码、java后台源码、wxml/wxss小程序页面、sql数据库脚本及mp4演示录像等从界面到部署形成完整链路。目前已有228人学习下载。除源码和数据库外还提供毕业论文、视频演示和启动脚本便于梳理家政预约、支付、评价等核心流程也可作为二次开发或毕设文档撰写的直接基础。1. 家政服务管理小程序把这个SSMVue毕业设计跑通要多久做毕业设计选题的时候管理类系统是大多数人的选择但「家政服务管理小程序」这个题的含金量在于它同时覆盖了微信小程序、SSMSpringSpringMVCMyBatis、Vue和MySQL四样东西前后端分离的结构也是现在企业里最常见的开发模式。这套源码自带完整的用户端小程序、管理员Vue后台和SSM接口层还附了数据库脚本、毕业论文和视频演示适合需要快速搭建一个能演示、能答辩、能写进简历的毕业设计的人。下面我从架构开始把它拆到能直接落地的程度。2. 系统架构与三端职责小程序、SSM、Vue后台各管什么2.1 前后端分离的拓扑结构与请求链路这套系统的拓扑很清晰三个前端入口指向同一个SSM后端。用户和家政阿姨用的是微信小程序管理员用的是Vue搭建的Web后台后端统一由SSM框架暴露REST接口数据落在MySQL里。相当于两套前端共用一套接口小程序端和Vue后台的项目代码彼此独立部署时分开跑互不干扰。请求链路的典型路径是小程序或Vue发HTTP请求到SpringMVC的ControllerController调Service处理业务Service通过MyBatis的Mapper接口访问MySQL结果再逐层返回。前端拿到的永远是JSON前后端分离的好处就在这里改小程序端界面不用动Java代码后端加接口也不影响前端页面的结构两拨人可以并行开发。// pages/login/login.js 里的一段核心请求 const app getApp() wx.request({ url: app.globalData.baseUrl /user/login, // 后端统一前缀 接口路径 method: POST, data: { username: this.data.username, password: this.data.password }, success: (res) { if (res.data.code 200) { wx.setStorageSync(token, res.data.data.token) // 登录态存本地 wx.switchTab({ url: /pages/index/index }) } else { wx.showToast({ title: res.data.msg, icon: none }) } } })这里url把域名前缀抽到了globalData里好处是换服务器或者从线上切到本地调试时只改全局配置里的一个baseUrl就能把整条请求链路切过去。method: POST对应后端RequestMapping里声明的请求方式SSM接口对请求方式有校验post写成了get必报405这个坑后面避坑章节专门说。后端对应的Controller片段也是项目里出现频率最高的写法RestController RequestMapping(/user) public class UserController { Autowired private UserService userService; PostMapping(/login) public Result login(RequestBody User user) { User loginUser userService.login(user.getUsername(), user.getPassword()); if (loginUser ! null) { return Result.success(loginUser); } return Result.error(用户名或密码错误); } }注意类上标注的是RestController而不是Controller区别在于前者默认把返回值序列化成JSON不需要每个方法再写ResponseBody。项目里统一封装了Result类返回结构是{code, msg, data}前端拿到这个结构做判断比直接返回实体类规范得多。RequestBody表示接收的是请求体里的JSON对象对应前端data里传的参数。2.2 角色权限普通用户、家政阿姨、管理员系统按业务角色分成三类各自的权限范围在表设计阶段就已经定死。我在做这类管理系统的习惯是先画权限矩阵再写代码不然做到后面接口越加越乱你都不知道哪个接口该给谁用。角色使用端核心权限典型操作普通用户微信小程序注册登录、浏览服务项目、预约阿姨、支付、评价下单、付款、发表评价家政阿姨微信小程序审核预约、查看公司信息、查看用户评价接单/拒单、查看评价管理员Vue后台用户/阿姨/公司/服务项目/预约/评价/留言全量管理增删改查、审核下架权限控制在代码层面主要靠后端拦截器做。SSM里没有Spring Security那么重直接写一个HandlerInterceptor在preHandle里校验请求头里的token区分管理员接口和普通接口public class AuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { String token request.getHeader(token); if (token null || !TokenUtil.verify(token)) { response.setStatus(401); return false; } return true; } }这个拦截器在spring-mvc.xml里注册exclude-mappings放行登录、注册、服务项目列表这类不需要登录就能访问的接口。这里要注意的是放行路径要写全好多同学把/user/login漏在拦截范围外结果登录接口也要带token前端直接被自己家的后端挡死属于典型的低级但高频的坑。项目里管理员接口通常还要多一层管理员身份校验常见做法是在token里存一个role字段拦截器里再判断一次。2.3 MySQL核心表结构与字段设计数据库是这个系统的地基。打开资源里的database目录初始化脚本是.sql文件里面最主要的表有这些表名用途关键字段user用户表id, username, password, phone, avataraunt家政阿姨表id, name, company_id, service_type, statuscompany家政公司表id, name, address, phone, ratingservice_item服务项目表id, name, price, duration, descriptionappointment预约表id, user_id, aunt_id, service_id, status, pay_status, create_timecomment评价表id, appointment_id, user_id, content, ratingmessage留言表id, user_id, content, reply, create_time重点说appointment预约表它是整个系统的核心几乎所有业务都围绕它的状态字段展开CREATE TABLE appointment ( id int(11) NOT NULL AUTO_INCREMENT, order_no varchar(32) DEFAULT NULL COMMENT 预约单号, user_id int(11) NOT NULL COMMENT 下单用户ID, aunt_id int(11) NOT NULL COMMENT 家政阿姨ID, service_id int(11) NOT NULL COMMENT 服务项目ID, appoint_time datetime DEFAULT NULL COMMENT 预约服务时间, status tinyint(4) DEFAULT 0 COMMENT 0待审核 1已确认 2已完成 3已取消, pay_status tinyint(4) DEFAULT 0 COMMENT 0未支付 1已支付, price decimal(10,2) DEFAULT NULL COMMENT 下单时快照价格, create_time datetime DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;两个设计细节值得注意。第一个是price字段做了快照意思是家政公司之后怎么调价订单里保存的是下单那一刻的价格这是正规订单系统的通行做法。第二个是status和pay_status分开存预约审核和支付是两个独立维度一个单子完全可以出现「已支付但待审核」的中间状态合并成一个字段会导致状态组合爆炸后期SQL统计会很难写。user_id、aunt_id、service_id都建了外键索引MyBatis里做联表查询时走索引数据量大了也不会卡。3. 环境搭建与项目启动从源码到跑起来的完整路径3.1 微信开发者工具导入小程序前端小程序端是用户直接接触的部分资源目录里通常叫miniprogram或者wechat。用微信开发者工具导入时选「导入项目」目录选到小程序工程所在位置AppID可以先用测试号测试号不校验域名本地开发比正式AppID省事。导入之后第一件事是改接口地址。小程序工程里通常有一个app.js或者config.js里面写着baseUrl。开发时把baseUrl指到本地后端地址比如http://localhost:8080演示时再换到局域网IP手机真机调试时把电脑IP填进去就行。有个关键设置必须提前弄明白微信开发者工具默认会校验合法域名本地调试时这个校验是最大的拦路虎。解决办法是在开发者工具右上角「详情」→「本地设置」里勾选「不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书」否则你连http://localhost:8080都请求不通。这是所有微信小程序联调的第一步忘了这一步后面全白做。3.2 SSM后端在IDEA里的配置与启动SSM后端是Java工程IDEA打开时选pom.xml导入Maven依赖。这个项目用的是传统SSM框架没有Spring Boot那么省事需要手动配置数据源、MyBatis映射和SpringMVC配置文件集中在src/main/resources下。数据库连接串是第一个要改的地方打开jdbc.propertiesjdbc.drivercom.mysql.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/housekeeping?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai jdbc.usernameroot jdbc.password123456三个参数必须解释清楚。useUnicodetruecharacterEncodingutf8控制中文字符集传输不加这条数据库里存的中文大概率变成问号。serverTimezoneAsia/Shanghai是MySQL 8.x 版本之后必须带的不带会报时区异常。password改成你自己MySQL的密码。如果MySQL装的是5.7serverTimezone不加也能跑但加上没坏处建议统一保留。配置完数据源还需要在IDEA里配置Tomcat运行。这类SSM项目的运行方式是打war包丢到Tomcat的webapps目录或者直接在IDEA里配Tomcat运行。先执行一次mvn clean package看能不能整体编译通过再用IDEA的Tomcat配置去跑。这个顺序的好处是如果打包都过不了就是代码层面的问题别急着折腾运行环境。3.3 Vue管理后台的依赖安装与运行Vue后台是管理员操作的部分是整个项目里最像企业级应用的一块。打开目录先看package.jsonscripts节点里定义了开发、构建命令。资源里自带的1-install.bat、2-run.bat、3-build.bat三个批处理文件就是把命令包了一层Windows下双击就能跑。1-install.bat的本质是npm install2-run.bat是npm run serve3-build.bat是npm run build。三个脚本的意图非常清楚装依赖、跑开发环境、打生产包。但新手第一次跑经常会卡在npm install网络不行就各种报错。我建议先把npm源切到国内镜像npm config set registry https://registry.npmmirror.com然后删除可能存在的node_modules和package-lock.json重新npm install。如果你打开工程发现.bak文件比如main.css.bak、update-password.vue.bak这些是开发者改代码前的备份正常情况下Vue CLI不会把它们当组件编译不需要动但如果遇到莫名其妙的编译报错第一步先把所有.bak文件挪出src目录再试。Vue后台还需要解决跨域问题。开发环境下Vue跑在localhost:8081SSM后端跑在localhost:8080端口不一样浏览器会拦截跨域请求。常见做法是在vue.config.js里配置代理module.exports { devServer: { port: 8081, proxy: { /api: { target: http://localhost:8080, changeOrigin: true, pathRewrite: { ^/api: } } } } }这个配置的意思是前端发到/api前缀的请求全部转发到http://localhost:8080同时把路径里的/api去掉。比如前端请求/api/user/list代理转发后变成http://localhost:8080/user/list后端接口不用写/api前缀。我见过很多同学配置了代理但请求路径写死成http://localhost:8080/user/list等于绕过了代理照样跨域报错属于配了等于没配。4. 关键业务链路拆解预约、审核、支付、评价怎么闭环4.1 预约单的状态机设计与接口字段家政服务的主链路是用户下单预约、阿姨审核、用户支付、服务完成、用户评价五个环节串成一条完整闭环。预约单的状态流转是系统最核心的逻辑status四个值串起整条生命周期status值含义触发动作0待审核用户提交预约1已确认阿姨审核通过2已完成服务完成或管理员手动置为完成3已取消用户取消或阿姨拒单pay_status单独跟踪支付状态用户提交预约时status0, pay_status0阿姨审核通过后status变成1服务完成后status变成2用户评价后评价表里写入appointment_id关联记录。创建预约的后端接口长这样PostMapping(/appointment/add) public Result addAppointment(RequestBody Appointment appointment, HttpServletRequest request) { Integer userId TokenUtil.getUserId(request.getHeader(token)); appointment.setUserId(userId); appointment.setOrderNo(JD System.currentTimeMillis()); appointment.setStatus(0); appointment.setPayStatus(0); appointmentService.addAppointment(appointment); return Result.success(null); }订单号用JD System.currentTimeMillis()生成简单粗暴但毕设够用。真实项目里同一毫秒会撞单这个项目场景下完全够。TokenUtil.getUserId从token里解析出当前登录用户比前端传user_id进来更安全——前端传的user_id可以被抓包篡改从token解析则天然可信。4.2 阿姨审核与用户评价的回填逻辑阿姨端审核预约本质是把预约单的status从0改成1或者3。操作看似简单但有一个容易忽略的业务点审核通过之后阿姨的可接单时间要扣减否则同一个时间段会出现两个预约单被同一位阿姨接下。这套源码里没有做那么细的时间冲突校验答辩被老师问「怎么避免阿姨同一时间被重复预约」时回答思路是「目前依赖人工判断扩展方案是加时间维度约束」。评价模块就更直接了用户对已完成状态的预约单发表评价写入comment表同时把评分回写到aunt表的rating字段PostMapping(/comment/add) public Result addComment(RequestBody Comment comment, HttpServletRequest request) { Integer userId TokenUtil.getUserId(request.getHeader(token)); comment.setUserId(userId); commentService.addComment(comment); // 重新计算该阿姨的综合评分 auntService.updateRating(comment.getAuntId()); return Result.success(null); }更新阿姨综合评分的SQL是重点一定要用SQL聚合而不是在Java里循环UPDATE aunt SET rating ( SELECT AVG(rating) FROM comment WHERE aunt_id #{auntId} ) WHERE id #{auntId}子查询统计该阿姨所有评价的平均分一条语句完成回填比在Java里先select全部评价再stream求平均值高效得多也避免并发更新出现脏数据。4.3 支付模块模拟支付与真实微信支付的取舍支付是项目里最有「含金量」也最容易翻车的模块。真实微信支付需要商户号、API密钥、证书个人开发者基本申请不下来所以毕设里几乎都做「模拟支付」——用户点支付后弹个确认框确定就把pay_status改成1。模拟支付的接口长这样PostMapping(/appointment/pay) public Result pay(RequestBody MapString, Integer params) { Integer appointmentId params.get(appointmentId); Appointment appointment appointmentService.findById(appointmentId); if (appointment null) { return Result.error(预约单不存在); } appointment.setPayStatus(1); // 模拟支付成功 appointmentService.update(appointment); return Result.success(支付成功); }这个接口没有对接微信支付SDK纯粹把支付状态置为已支付。演示的时候点几下就能走完流程。如果你的论文里写了「对接微信支付」评委追问「接真实支付回调怎么处理」思路要清楚真实支付是用户拉起微信支付微信服务器异步通知你的回调接口回调里校验签名后更新订单状态。模拟支付跳过了这部分论文里要写明是「模拟实现」不要冒充真支付评委一翻代码就知道。5. 避坑与排错SSM小程序联调最常见的翻车现场5.1 小程序请求后端被拦域名校验与本地调试现象小程序里点登录请求发不出去控制台报http://localhost:8080不在合法域名列表里。原因微信开发者工具默认开启域名校验生产环境要求所有请求域名必须备案并配置在小程序后台的request合法域名里localhost这种本地地址默认不在白名单。解决开发阶段在开发者工具「详情」→「本地设置」→勾选「不校验合法域名」。演示时如果你不想开这个选项可以把后端部署到公网服务器用HTTPS域名访问但毕设场景没必要本地勾上就行。我自己的习惯是本地调试永远勾上打包上线前再确认域名配置。5.2 MySQL中文乱码和时区双坑现象前台页面显示的中文全是问号或者后端日志报The server time zone value错误。原因数据库表或连接串里没指定utf8字符集MySQL 8.x 之后时区参数也没配。两个是独立问题但经常一起出现。解决建库时指定CREATE DATABASE dbname DEFAULT CHARACTER SET utf8mb4;连接串加上characterEncodingutf8serverTimezoneAsia/Shanghai。改了之后老数据还是乱码就重新执行一次初始化SQL脚本。另外导入SQL文件时注意编码切到UTF-8Navicat里经常因为文件编码不一致导入中文乱码导完再改库编码是很糟心的不如导入前就确认。5.3 Vue后台里的.bak文件到底要不要动现象npm run serve启动时报错报错信息指向.vue.bak或.css.bak模块解析失败。原因.bak文件是开发者改代码前的备份历史包袱。Vue CLI 正常只识别.vue、.js后缀的文件但如果报错明确指向.bak说明工具把它当成了源码或者有地方引用了它。解决把所有.bak文件挪出src目录放到项目根目录的backup文件夹里不要随手删除。接手这种带.bak的项目第一件事就是看这些文件里藏了什么如果你把IndexHeader.vue.bak改名为IndexHeader.vue覆盖原文件等于把历史版本还原回来有时候反而能救回被改坏的页面。这种玄学报错最烦人不知道原因的时候先从备份文件找线索。5.4 跨域配置忽略了预检请求现象Vue后台npm run serve起来后请求后端接口Network面板里先看到一个OPTIONS请求返回403真正的POST请求根本没发出去。原因前端发的是带自定义Header比如token的请求浏览器会先发一个OPTIONS预检请求探测后端允不允许。后端的CORS过滤器只处理了GET/POST没处理OPTIONS预检失败真实请求被拦下。解决CORS过滤器里放行所有请求方式设置允许的请求头为*允许的方法包含OPTIONS。很多人CORS配置只写了GET,POST一加DELETE接口就翻车正确写法是开发阶段直接允许所有方法不用纠结。6. 演示与答辩让毕设在评委面前一次通过6.1 数据初始化脚本的手动校正数据库脚本导入后第一件事不是急着跑系统而是花10分钟检查种子数据。资源里的SQL文件通常包含管理员账号、测试用户、阿姨、服务项目这些初始化数据。我先找管理员账号的密码很多毕设项目SQL里存的是MD5加密后的密码你不知道明文就登录不了后台。推荐做法是在库里改成一个自己知道的明文对应的MD5值比如123456对应e10adc3949ba59abbe56e057f20f883e演示时才不会被拦在登录页外面。6.2 按角色走完整演示路径答辩演示不要想到哪点哪固定顺序走完整个闭环先用管理员账号登录Vue后台创建家政公司、添加阿姨、发布服务项目切到小程序端用户注册登录浏览服务项目选择阿姨提交预约再用阿姨账号登录看到待审核预约单点审核通过回到用户端确认状态模拟支付服务完成后发表评价最后回到后台刷新评价列表出现新数据。这一条路径覆盖所有业务模块每一步都能截屏做进PPT。6.3 稍微准备一下扩展方向被问「还能怎么改进」时两个稳妥答案一是预约时间冲突检测目前系统没有做阿姨时间段的排重可以引入时间片机制二是状态变更的微信订阅消息推送微信小程序原生支持但需要用户授权一次性订阅的触发条件要提前设计。这两句话能让评委知道你不只停留在会用框架的层面。从那以后我每次拿到毕设源码都强制自己先走一遍初始化脚本、确认种子账号密码再碰业务代码。看起来浪费时间其实是在给自己买后悔药——演示现场登录不进去比什么都尴尬。希望这次拆解能帮你省掉这些没必要踩的坑。本文还有配套的精品资源点击获取

关于本文作者

来自尧图内容编辑团队

尧图内容编辑团队 内容团队

尧图内容编辑团队

本文由尧图网络内容编辑团队执笔。团队由资深项目经理、前端工程师与设计师组成,所有内容均来自亲手交付的真实项目,先讲清问题、再给出可落地的解法。尧图深耕北京网站建设十年,服务过京华建材集团、智造科技等各行业客户,把一线经验沉淀为可复用的行业观察。

  • 十年建站经验,覆盖建材、制造、服务、文创等
  • 项目经理把关选题与事实准确性
  • 工程师与设计师联合撰写专业细节
  • 统一编辑规范,保证文风与排版一致
  • 每月复盘转化数据,迭代选题方向

延伸阅读

相关资讯与近期热门内容

深度阅读推荐

建站决策前值得细读的三篇

网站改版的5个关键决策
2024-08-12

网站改版的5个关键决策

什么时候该改版、改到什么程度、如何避免流量掉光,京华建材集团改版复盘给出答案。

获取专属建站方案

看完文章,把您的行业与预算告诉我们,免费获取一份量身定制的官网建设方案与报价。

立即免费咨询