SSM+Vue+UniApp三端联调的智能社区服务小程序实战

简介一套可运行的智能社区服务小程序毕业设计源码采用SSMMySQLVueUniapp技术栈并配套SQL文件和开发文档。系统覆盖小程序用户端与管理员后台包含用户注册登录、房屋信息查看、住户管理、家政预约、报修处理、物业缴费、留言板等模块符合社区服务数字化管理需求适合计算机专业学生用于课程设计、毕业设计或二次开发。资源包共包含1303个文件约19.75MB主要文件类型有Java后端源码、Vue组件、小程序页面文件wxml/wxss/js、JSON配置、图片素材以及SQL脚本和可执行的安装、运行、打包脚本目录结构清晰便于按模块检索。目前已有1924人学习/下载说明其具备较好的参考价值。包内附有Eclipse工程配置可快速导入开发环境结合文档能理解SSM接口、Vue管理端与小程序端的联调逻辑适合作为智能社区项目的实战蓝本。1. 智能社区服务小程序从这个 zip 能拿到什么以及它为什么值得跑一遍物业群里每天都在刷“报修什么时候来人”“水电费在哪交”“访客登记找谁”一套 wx258 智能社区服务小程序就是把这些线下跑腿的活搬到手机上。标题里的技术栈拆开看已经很明确SSM 管后端接口和业务逻辑Vue 管物业端 PC 管理后台UniApp 一套代码编译成微信小程序、H5 和 App。zip 里同时带了可运行源码、SQL 文件和文档意味着不用从零搭框架解压、导库、启动就能看到完整业务闭环。适合正在做毕设的学生、想给小区做信息化改造的小型物业公司以及想一次性练会三端联调的开发者。2. 从 zip 到三端跑通SSM 后端、Vue 管理端、UniApp 小程序端的启动顺序2.1 解压后先认目录哪个是后端、哪个是管理端、哪个是小程序端这类社区服务项目压缩包通常分三个部分Java 后端、Vue 管理后台、UniApp 移动端外加一个 SQL 目录和说明文档。命名习惯常见的是 admin、uniapp、server、sql 这类。拿到压缩包第一件事不是双击 IDEA 导入而是先看根目录的 README 或文档再用 tree 命令把结构打出来确认三端都在。unzip wx258_community.zip -d wx258_community cd wx258_community tree -L 2如果你在 output 里看到 src/main/java、src/main/resources 这种 Maven 标准布局这就是 SSM 后端根目录有 package.json 的是 Vue 管理端带 pages.json 和 manifest.json 的是 UniApp 小程序端。SQL 文件一般在 sql 或 db 目录下命名常带 community、property 之类的关键词。三步确认完后面联调才不会出现“后端起了前端说登录接口 404”这类问题。需要注意压缩包路径含中文时Windows 下建议先改名为纯英文目录再解压IDEA、Maven 和 npm 对中文路径都有过诡异报错。tree -L 2 只看两层目录够看清整体布局不会刷屏。2.2 SSM 后端起服务JDK、Maven、Tomcat、MySQL 四件套的版本匹配SSM 是典型 Java Web 项目启动依赖四样东西JDK 8、Maven、Tomcat 8.5、MySQL 5.7/8.0。这类教学项目几乎都基于 JDK 8 编写别上来装 JDK 17否则 Spring 版本和 Tomcat 版本跟你对着干。Maven 仓库建议配置国内镜像否则第一次拉依赖能把人等急。先处理数据库用 MySQL 命令行建库导数据CREATE DATABASE IF NOT EXISTS community DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE community; SOURCE D:/code/wx258_community/sql/community.sql;先建库再导数据SOURCE 路径不要带中文。导入完成后用 Navicat 或命令行看下表的数量这类社区项目一般在 10 到 20 张表之间比如 owner、house、repair、notice、fee 之类。如果表数量是 0别继续往后走一定是路径或编码问题。然后是后端配置找到 src/main/resources 下的 jdbc.properties把数据库地址、账号、密码改成你自己的jdbc.drivercom.mysql.cj.jdbc.Driver jdbc.urljdbc:mysql://localhost:3306/community?useSSLfalseserverTimezoneAsia/ShanghaicharacterEncodingutf8 jdbc.usernameroot jdbc.password123456driver 用 com.mysql.jdbc.Driver 只在 MySQL 5.x 下有效连接 MySQL 8 必须换成 com.mysql.cj.jdbc.Driverpom.xml 里的 mysql-connector-java 版本也要同步升到 8.x。serverTimezone 是 MySQL 8 的硬性要求不写直接报连接超时。改完配置后在 IDEA 里以 Tomcat 方式启动或者用 mvn clean package 打 war 包丢进 Tomcat 的 webapps 目录。2.3 Vue 管理后台npm install 之后第一件事是配接口转发Vue 端管的是物业后台网页依赖安装简单但跑起来最先撞到的是跨域。开发环境下 Vue 监听 8080后端接口跑在 9090两者不配接口转发浏览器控制台会刷一片红。我一般先执行 npm install等待过程中去看 package.json 里的 scripts确认启动命令是 serve 还是 dev。npm install npm run servenpm install 第一次特别慢是常态把 registry 指到国内镜像能省不少时间。装完依赖后看项目根目录有没有 vue.config.js这类基于 vue-cli 3/4 的项目基本都自带 devServer.proxy但里面注释掉的是老地址需要改module.exports { devServer: { port: 8080, proxy: { /api: { target: http://localhost:9090, changeOrigin: true } } } }这里的 /api 前缀必须和 SSM 后端控制器里的 RequestMapping 路径对应上。很多项目的后端不是 /api 开头而是 /community 或直接写根路径这种情况下要么改后端统一前缀要么在 proxy 里把多个前缀都配上。如果后端接口路径比较杂最省事的方式是整个根路径转发但要注意静态资源也会被转发容易和前端路由打架。改完配置后重启 npm run serve打开本地管理后台页面能看到登录页渲染出来基本就证明前后端链路通了。2.4 UniApp 小程序端HBuilderX 导入、manifest 配置和微信开发者工具联动UniApp 端是业主和物业人员用的移动端导入方式看项目是用 HBuilderX 建的还是用 CLI 建的。一般直接用 HBuilderX 导入整个 uniapp 目录点击运行到微信开发者工具即可。先看 manifest.json 里的微信小程序配置重点是 AppID 和基础库版本没有正式 AppID 可以用测试号但涉及登录和支付的能力会被限制。我习惯先在 utils/request.js 或 api 目录下找到请求封装把 baseUrl 改成局域网 IP。很多项目默认写着 http://localhost:8080这在微信开发者工具里可能能跑但真机预览时手机上访问的是它自己的 localhost必然失败const BASE_URL http://192.168.1.100:9090 export function request(url, method GET, data {}) { return new Promise((resolve, reject) { uni.request({ url: BASE_URL url, method, data, header: { Content-Type: application/x-www-form-urlencoded }, success: res { if (res.data.code 200) resolve(res.data) else uni.showToast({ title: res.data.msg || 请求失败, icon: none }) }, fail: reject }) }) }header 用 form-urlencoded 是因为这类 SSM 项目的接口大多通过 RequestParam 接收参数如果你的后端接口是 RequestBody 收 JSON这里要改成 application/json否则后端拿到的是空对象。BASE_URL 拆成两个变量更稳妥H5 端用 localhost小程序端用局域网 IP中间用 UniApp 条件编译区分。在 HBuilderX 里执行运行到微信开发者工具第一次会要求填 AppID没填或填测试号时会弹提示。编译成功后在开发者工具里打开 Network 面板看到请求状态不再是 pending 或 fail而是后端返回的 JSON这就算三端全部跑通。3. 从 SQL 文件拆解社区业务表结构决定了这个项目能做什么3.1 业主、房屋、物业三张主表外键关系是权限控制的根把 SQL 文件打开翻一遍你会看到 SSM 项目典型的表设计思路。核心三张主表是业主表、房屋表、物业员工表它们之间的关系直接决定了登录后能看到什么菜单。业主表通常叫 owner房屋表叫 house关联方式是外键 owner_id 挂在 house 表上一个业主可以名下挂多套房产这在小区场景里很常见——收物业费的时候按房屋收但联系人只有一个。CREATE TABLE house ( id INT PRIMARY KEY AUTO_INCREMENT, building VARCHAR(16) NOT NULL COMMENT 楼栋号, unit VARCHAR(16) NOT NULL COMMENT 单元号, room VARCHAR(16) NOT NULL COMMENT 房号, owner_id INT DEFAULT NULL COMMENT 绑定业主ID, area DECIMAL(8,2) DEFAULT 0.00 COMMENT 建筑面积, status TINYINT DEFAULT 1 COMMENT 1入住 0空置, KEY idx_owner (owner_id), CONSTRAINT fk_house_owner FOREIGN KEY (owner_id) REFERENCES owner(id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;物业费、报修、访客记录都围绕房屋展开所以查询时最常见的 SQL 是以 house 为起点 join owner。项目没有把 owner 和 house 做成一对一而是允许房屋空置或业主多套这种冗余设计在小区的缴费通知里非常实用。外键在这个项目里更多是约定约束实际业务代码里的查询全靠 MyBatis 手写 SQL join所以不要简单依赖 ORM 自动映射。权限控制的根就在这业主登录看的是自己名下房屋的报修和缴费物业登录看的是整个小区的工单管理员看的是后台管理菜单。对应到表上就是 owner 表有没有一个 role 字段或者单独一张 role 表做权限标识。SSM 项目里常见的做法是 user 表存 openid、手机号、role 三个关键字段role 用 int 区分 1 业主、2 物业、3 管理员。3.2 报修、缴费、公告四类业务表状态机字段比想象中更重要社区服务的核心业务是报修、缴费、公告再加一个访客登记。每张表都有几个共性字段状态 status、创建时间 create_time、以及处理人/处理时间。报修表一般叫 repair字段包括报修人、报修房屋、问题描述、图片、状态、物业回复。CREATE TABLE repair ( id INT PRIMARY KEY AUTO_INCREMENT, house_id INT NOT NULL, owner_id INT NOT NULL, content VARCHAR(500) NOT NULL COMMENT 报修内容, images VARCHAR(1000) DEFAULT NULL COMMENT 图片路径,逗号分隔, status TINYINT DEFAULT 0 COMMENT 0待处理 1处理中 2已完成 3已取消, create_time DATETIME DEFAULT CURRENT_TIMESTAMP, handle_user INT DEFAULT NULL COMMENT 处理人ID, handle_time DATETIME DEFAULT NULL, handle_note VARCHAR(500) DEFAULT NULL, KEY idx_house (house_id), KEY idx_status (status) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;状态字段是这类项目最容易被忽略但最影响联调的地方。前端小程序里显示“待处理、处理中、已完成”后端接口返回的却是 0、1、2两边一旦对不上页面就会出现空白状态。缴费表 fee 的设计更典型每套房屋每月生成一条缴费记录包含费用类型、金额、截止时间、缴费状态。公告表 notice 通常只有标题、内容、发布时间、发布人不涉及复杂状态。读 SQL 文件时要特别留意这些 status 字段的注释。如果原 SQL 里没写注释建议花十分钟用 Navicat 把字段注释补全后面写前端筛选和状态展示时会省很多事。还有个细节是表里存金额用 DECIMAL 而不是 FLOAT这算是行业共识但教学项目里偶尔会见到 FLOAT如果这是你要拿去做演示的项目记得先确认金额字段精度否则累计缴费对不上账。3.3 初始化数据里的门道管理员账号去哪了、测试房屋为什么占着车位SQL 文件里除了表结构还有一批初始化数据。要特别关注三块管理员账号、测试业主账号、初始房屋数据。管理员账号通常在 admin 表或 user 表里密码大概率是 MD5 加密存的一串 32 位字符源码里搜 login 接口就能看到加密方式。测试业主账号一般会用 demo、test、13800138000 这类约定俗成的数据文档里通常会写。INSERT INTO owner (id, name, phone, wechat_openid, role, create_time) VALUES (1, 测试业主, 13800138000, o_test_openid_0001, 1, NOW()), (2, 物业小王, 13900139000, o_test_openid_0002, 2, NOW()); INSERT INTO house (id, building, unit, room, owner_id, area, status) VALUES (1, 1栋, 1单元, 101, 1, 89.50, 1), (2, 1栋, 1单元, 102, 2, 76.20, 0);初始化数据直接决定你登录后能看到什么列表。如果业主表里没有绑定任何房屋小程序打开后“我的房屋”就是空的没法体验报修流程。如果缴费表里没有生成任何记录缴费页面就是空白。文档里通常会写测试账号但有些项目打包时把文档写得很简略这时直接在 SQL 里查 user 表就能找到默认密码再用 MD5 在线工具验证一下。另外我建议顺手检查一下这几个方向SQL 文件里有没有 sql 注入演练留下的后门语句有没有慢 sql 隐患例如全表扫描的模糊查询以及所有时间字段用的是 DATETIME 还是 TIMESTAMP。对这个项目来说DATETIME 足够TIMESTAMP 会有 2038 年问题但教学项目不必过度担心。4. 二次开发绕不开的 5 个位置登录、权限、接口地址、文件上传和支付回调4.1 小程序登录wx.login 换 openid 到 SSM 后端 session 的完整链路小程序端要识别“我是谁”靠的是微信的 openid。小程序调用 wx.login 拿到临时 code把 code 传给后端后端拿 code 去微信接口换 openid再拿 openid 去 user 表查有没有这个用户。这个链路是 UniApp 小程序开发的固定动作SSM 后端对应有一个 LoginController。RestController RequestMapping(/user) public class LoginController { Autowired private UserService userService; PostMapping(/login) public Result login(RequestParam(code) String code) { String openid userService.getOpenidByCode(code); User user userService.findByOpenid(openid); if (user null) { userService.register(openid); user userService.findByOpenid(openid); } HttpSession session request.getSession(); session.setAttribute(userId, user.getId()); session.setAttribute(role, user.getRole()); return Result.ok(user); } }这个接口做了一件事用 code 换 openid查库查不到就自动注册然后写入 session。SSM 项目跟踪登录状态靠的就是 session而不是前端传 token。这意味着部署时一台服务器可以用但横向扩展成多台就会出现 session 不同步这个边界要提前知道。code2session 的 HTTP 调用一般封装在 UserService 里用 RestTemplate 或 HttpClient 请求微信接口。本地开发时如果后端没有外网权限或微信小程序后台没配置合法域名这一步会报错。开发阶段最常见的调试方式是看后端日志里有没有打印 openid 返回结果常见报错是 appid 和 secret 配置在 application.yml 里被写死成了别人的。4.2 权限拦截器HandlerInterceptor 怎么区分业主、物业和管理员SSM 的权限控制比 Spring Security 轻量得多常见做法是写一个 HandlerInterceptor 拦截 /api/** 请求从 session 里取角色然后判断。管理员接口、业主接口、物业接口各走各的路径前缀拦截器里做映射判断。public class AuthInterceptor implements HandlerInterceptor { Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { HttpSession session request.getSession(); Integer userId (Integer) session.getAttribute(userId); Integer role (Integer) session.getAttribute(role); String uri request.getRequestURI(); if (uri.startsWith(/admin) role ! 3) { response.setStatus(401); return false; } if (uri.startsWith(/owner) !Integer.valueOf(1).equals(role)) { response.setStatus(401); return false; } return true; } }拦截器注册在 SpringMVC 的配置类或 XML 里要指定拦截路径和排除路径。登录接口本身必须排除否则前端还没登录就被 401 拦截。还有个容易踩的坑session 过期后前端收到的不是 401 而是 302 重定向因为 Tomcat 默认会把未登录请求重定向到登录页。前后端分离的项目里这种重定向会导致小程序端莫名其妙跳到登录页排查时优先看响应状态码。4.3 接口地址三环境切换UniApp 条件编译和 Vue 的 proxy 分环境配置开发环境、测试环境、生产环境三个环境对应三个不同域名或 IP这个配置是二次开发里改动最频繁的。UniApp 侧用条件编译是最省事的方案微信小程序里用 #ifdef MP-WEIXINH5 里用 #ifdef H5Vue 侧则是通过 vue.config.js 读取环境变量。// utils/config.js // #ifdef H5 const BASE_URL http://localhost:9090 // #endif // #ifdef MP-WEIXIN const BASE_URL https://api.example.com // #endif export default { BASE_URL }H5 环境下后端接口是 localhost微信开发者工具里是小程序后台配置的合法域名或局域网 IP两套地址分开维护避免每次切换都改一行代码然后忘记改回来。Vue 管理后台本身跑在浏览器里没有跨端问题只需要在 vue.config.js 里按环境变量切换 target 地址即可。还有个小技巧小程序里如果后端接口是 http 开头正式版本会直接报“不合法域名”但开发阶段可以在微信开发者工具的详情菜单里勾选“不校验合法域名”这能省不少事。等真正要上线了再去微信公众平台配置合法域名并且要求接口必须上 HTTPS。4.4 文件上传与静态资源映射公告图片、头像的落地路径社区项目里业主报修传图、头像上传、公告配图都要走后端文件上传接口。SSM 接收 MultipartFile存储路径常见有两种存到服务器本地磁盘或存到云存储。教学项目多数存本地因为不涉及额外依赖和费用。PostMapping(/upload) public Result upload(RequestParam(file) MultipartFile file, RequestParam(type) String type) { String realPath /data/community/ type /; File dir new File(realPath); if (!dir.exists()) dir.mkdirs(); String filename UUID.randomUUID().toString().replace(-, ) file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(.)); file.transferTo(new File(realPath filename)); return Result.ok(/static/ type / filename); }文件落地后最关键的一步是把目录映射成静态资源访问路径否则前端拿到 /static/xxx.jpg 会 404。SpringMVC 配置文件里加映射把磁盘路径和 URL 路径关联起来。这里有个坑Tomcat 部署的 Web 应用如果重启上传的文件还在磁盘但如果部署目录被清掉文件引用就会失效。生产环境建议单独建一个不上打包路径的目录比如 /data/community别把文件写在 webapps 里面。4.5 微信支付回调本地联调 notify_url 时最容易卡住的地方缴费功能通常会接微信支付SSM 后端要处理支付回调。微信支付成功后会异步 POST 到商户的 notify_url这个 URL 必须是外网能访问的 HTTPS 地址。本地联调时没有外网地址常见做法是用内网穿透工具把本机端口映射出去或者在后端写一个模拟回调入口手动触发。# 本地模拟微信支付回调 curl -X POST http://localhost:9090/pay/notify \ -H Content-Type: application/xml \ -d xmlreturn_codeSUCCESS/return_codeout_trade_no202401011200/out_trade_no/xml真实微信回调的报文格式是 XML下单接口返回的也是 XMLSSM 代码里解析时要注意大小写。联调重点是确认回调接口能改订单状态并返回 success 给微信服务器否则微信会连续重试。这个环节最容易翻车数据库里订单金额用的分回调里解析出来是字符串如果不转 int 比较会出现订单已支付但状态没更新。5. 避坑与常见问题5 个最容易让项目翻车的现场与解法5.1 后端启动正常但所有 Controller 接口都返回 404现象Tomcat 起来了静态页面能打开但小程序和 Vue 调接口时全部 404后端控制台没有任何报错。原因这类项目最常见的两个根源。一是 IDEA 部署时 Application context 被设成了 /community而前端接口请求的是 /二是 SpringMVC 的拦截器配置把 /api 拦截后放行逻辑写反了请求根本没进入对应 Controller。解决先看 IDEA 底部的部署配置把 Application context 改成 /或者在前端 proxy 的 target 里补上 /community 前缀。再检查 SpringMVC XML 里的 mvc:interceptors 配置确认 exclude 路径是否覆盖了登录接口和静态资源。用 curl 直接测后端接口可以快速定位例如 curl http://localhost:9090/user/login 返回的到底是 404 还是业务响应。5.2 SQL 文件导入成功但页面上中文全是问号现象数据库表能建出来数据也插进去了但 Navicat 里看中文是乱码小程序端显示的公告标题全是??。原因SQL 文件本身是 GBK 编码而 MySQL 用 utf8mb4 解析或者建库语句里没指定字符集继承了服务器默认的 latin1。这个问题在旧来源的 SQL 文件里特别常见导出时用的是什么字符集导入时就必须显式声明。解决用文本编辑器打开 SQL 文件另存为 UTF-8然后重新导入。导入前先执行 SET NAMES utf8mb4创建数据库时显式带上 DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci。如果数据已经乱在库里删库重建比手动改更快。这个经验值一套就一套免得后面每次导库都出一遍问题。5.3 微信开发者工具里正常真机预览白屏或接口失败现象所有接口在开发者工具里调试都通用手机扫码预览后页面加载出来但数据全空或者直接白屏。原因开发者工具默认不会校验合法域名但真机上每条 request 都要走域名校验。如果小程序后台没配置 request 合法域名或后端没有上 HTTPS请求直接失败。另一个原因是局域网调试时 BASE_URL 写的 localhost手机根本访问不到电脑上的服务。解决开发阶段最简单的方式是在微信开发者工具详情里勾选“不校验合法域名”但真机扫码预览不受这个开关控制。临时方案是把 BASE_URL 改成电脑的局域网 IP并保证手机和电脑在同一个 Wi-Fi正式方案是后端配置 HTTPS 域名在微信公众平台配置 request 合法域名再重新打包上传体验版。5.4 npm install 报 node-gyp、MSBUILD 或 Python 错误现象Vue 管理端执行 npm install 时报 node-gyp rebuild 失败沿带 python、Visual Studio Build Tools 之类的信息安装过程直接中断。原因项目依赖里有 node-sass 或 bcrypt 这类需要编译原生模块的包而本机 Node 版本太高或缺少编译工具链。Node 17 以上搭配 node-sass 4.x 几乎必报错因为 node-sass 用的 libsass 二进制没跟上新版本。解决最省心的方法是换 Node 14 或 16 版本再装一遍或用 npm 直接安装对应版本的 sass 替代 node-sass把 package.json 里的引用改掉。项目若还在维护建议把 node-sass 替换成 dart-sass改动量不大但一劳永逸。如果根目录有 package-lock.json删掉后重装有时候也能绕过版本锁定的坑。5.5 登录成功却跳回登录页控制台提示 getStorage 失败或 session 失效现象小程序端输入测试账号能登录跳转首页后马上又弹回登录页控制台报错 getStorageSync 读取失败或后端接口返回未登录。原因登录状态存了两份副本一份在 uni.setStorageSync 里一份在服务端 session 里。前端跳转时从本地存储读 token/用户信息读不到就判定未登录后端 session 因为 Tomcat 重启或跨域 cookie 丢失也会导致接口认为会话失效。解决先明确这个项目以哪端的状态为准。SSM 项目的登录态本质在 session前端本地存储存 uid 只是为了展示用户信息不应该拿它做唯一判断。把跳转判定改成“调接口返回 401 再去登录页”而不是“本地没读到数据就去登录页”。Tomcat 重启后 session 清空的问题开发阶段每重启一次后端小程序端就要重新过一遍登录流程这属于正常现象不用过度设计。如果希望重启后仍保持登录就得把登录态改成 token 模式等于重构鉴权体系教学阶段不建议动。6. 从能跑到能上线验证清单和最后一次打包的注意点6.1 三个维度验证项目真的通了第一个维度是业务流程闭环用业主账号走一遍报修提交登录物业账号看到待处理工单并处理再回到业主端看状态变化。第二个维度是数据一致性对比 MySQL 里的报修记录字段看前端展示的状态号、时间、图片路径是否和库里一致。第三个维度是异常路径随便改一个请求参数让后端报错看前端是弹 toast 还是白屏这个直接决定你演示时会不会尴尬。6.2 上线前的最小改动清单后端要改 jdbc.properties 里的正式数据库连接把密码从明文改成环境变量读取前端要关掉开发者工具的“不校验合法域名”并换成正式域名小程序端要替换 AppID 为正式账号重新走发布流程。最后记得用微信开发者工具上传体验版真机跑一遍核心功能再提审。我在第三遍跑这个流程时总结出的教训是不要最后一天才想起 HTTPS 证书和 ICP 备案。小程序正式环境的接口必须备案域名这个时间成本往往一到两周远比调通代码本身更长。拿到这个项目后先花半天把三端和数据库跑通再花半天只改业务参数剩下的时间留给环境配置和审核希望帮到你。本文还有配套的精品资源点击获取