Spring Boot智能家居管理系统全栈实战指南

简介本资源是一套完整的基于SpringBoot的智能家居系统毕业设计项目面向计算机相关专业本科生及Java全栈初学者解决课程设计、毕设选题与Web管理系统开发实践需求。项目采用B/S架构后端以JavaSpringBootMyBatisPlus构建核心业务逻辑前端使用VueElementUI实现响应式管理界面配套MySQL数据库与Ajax异步交互覆盖用户信息、图片及视频素材等模块的增删改查功能。压缩包共368个文件含77个Java后端类、46个Vue组件、161个SVG图标资源、18个JPG/PNG素材图及1个MP4演示视频辅以bat脚本、YML配置与文档说明整体大小为15.22MB结构清晰便于分层学习与二次开发。目前已有239人学习下载提供从需求分析、技术选型、数据库设计到前后端联调的完整实现路径附带必读文档与可直接运行的工程结构适合快速掌握企业级SpringBoot项目落地全流程。1. 基于 Spring Boot 的智能家居管理系统不是 Demo是能跑通设备联动、用户权限分级、素材上传回显的毕设级全栈项目你手头这份「智能家居系统-基于 Spring Boot 的管理系统」代码不是网上常见的空壳后台模板也不是只带登录页的 Vue 静态页面。它是一套真实可部署、带完整业务闭环的毕业设计级系统——从用户注册登录、设备状态上报模拟、图片/视频素材上传与缩略图生成到管理员对设备分组、权限角色配置、操作日志审计全部走通。我去年帮三个学生调试过类似结构发现 80% 的毕设项目卡在「前端调用后端接口返回 401 却查不出 JWT token 解析失败原因」或「MySQL 表字段类型和 MyBatisPlus 实体类不一致导致 insert 报错」这种细节上。而这个项目把 Spring Security JWT 的拦截链、MyBatisPlus 的自动填充、Vue 中 Axios 请求拦截器统一处理错误码都写实了连1-install.bat里预置的 MySQL 初始化脚本都带建库、建表、插初始管理员数据三步。适合 Java 初学者练手 Spring Boot 全栈开发流程也适合想快速搭建物联网管理后台原型的工程师复用其权限模块和文件上传组件。2. 项目结构与核心模块拆解从 bat 脚本到前后端分离的落地逻辑2.1 三个 bat 脚本的真实作用不只是“一键运行”而是环境初始化流水线项目根目录下1-install.bat、2-run.bat、3-build.bat不是摆设它们构成了一条轻量级部署流水线:: 1-install.bat 关键片段已去敏感信息 echo off echo 正在初始化数据库... mysql -u root -p123456 -e CREATE DATABASE IF NOT EXISTS smart_home DEFAULT CHARACTER SET utf8mb4; mysql -u root -p123456 smart_home database/init.sql echo 数据库初始化完成 echo 正在安装 Maven 依赖... cd backend mvn clean install -Dmaven.test.skiptrue提示init.sql文件藏在backend/src/main/resources/sql/目录下不是根目录。很多同学双击1-install.bat报错“找不到 init.sql”就是因为没把工作目录切到backend子目录再执行。实际操作时建议右键编辑该 bat 文件把cd backend这行提前到mysql命令之前。2-run.bat并非直接java -jar而是先检查application-prod.yml是否存在不存在则复制application-dev.yml并替换占位符:: 2-run.bat 片段 if not exist backend/target/smart-home-0.0.1-SNAPSHOT.jar ( echo 请先执行 3-build.bat 构建项目 pause exit /b ) set SPRING_PROFILES_ACTIVEprod java -Dfile.encodingUTF-8 -jar backend/target/smart-home-0.0.1-SNAPSHOT.jar3-build.bat本质是 Maven 打包命令封装但关键在于它强制指定了 JDK 版本兼容性:: 3-build.bat 片段 cd backend mvn clean package -Dmaven.compiler.source8 -Dmaven.compiler.target8 -Dmaven.test.skiptrue注意这里-Dmaven.compiler.source8是硬性要求。如果你本地装的是 JDK 17直接运行会报Unsupported class file major version 61。必须在 IDEA 的 Project Structure → Project Settings → Project 中将 Project SDK 和 Language level 都设为 8否则编译通过但运行时报错。2.2 前端静态资源解析index.html 为何能加载 chunk-vendors.css项目前端是 Vue CLI 3.x 构建的标准 SPA但未使用npm run serve开发模式而是直接输出静态文件部署。index.html中的关键引用如下!-- index.html 片段 -- link href./css/app.377831ff.css relstylesheet link href./css/chunk-vendors.1f0a25b2.css relstylesheet script src./js/app.377831ff.js/script script src./js/chunk-vendors.1f0a25b2.js/script这些带哈希值的文件名来自 Vue CLI 的vue.config.js配置// vue.config.js module.exports { outputDir: ../backend/src/main/resources/static, assetsDir: css, // 注意所有 CSS 输出到 /static/css/ configureWebpack: { optimization: { splitChunks: { chunks: all, cacheGroups: { vendor: { name: chunk-vendors, test: /[\\/]node_modules[\\/]/, priority: 10, chunks: initial } } } } } }逻辑说明outputDir指向 Spring Boot 的static目录意味着前端构建产物直接被后端当作静态资源托管assetsDir: css决定了 CSS 文件统一放在/static/css/下所以index.html中的./css/xxx.css路径才能正确解析。若你修改了assetsDir为assets但没同步改index.html的 link 路径就会出现白屏且控制台报 404。2.3 后端核心模块对应关系一张表看懂 Controller → Service → Mapper 如何串联业务前端功能页后端 Controller 类关键 Service 方法对应 Mapper XML 文件数据库表名业务关键点用户信息管理UserController.javaUserServiceImpl.listUsers()UserMapper.xmlsys_user使用 MyBatisPlus 的 Page 分页SQL 中含Select(SELECT * FROM sys_user WHERE deleted 0)图片素材上传MediaController.javaMediaServiceImpl.uploadImage()MediaMapper.xmlmedia_resource上传后调用 Thumbnailator 生成 200x200 缩略图路径存入thumbnail_url字段设备状态监控DeviceController.javaDeviceServiceImpl.getDeviceStatus()DeviceMapper.xmldevice_info返回 JSON 中status字段为枚举值ONLINE/OFFLINE/FAULT前端用 ElementUI 的 Tag 组件渲染不同颜色角色权限分配RoleController.javaRoleServiceImpl.assignPermissions()RolePermissionMapper.xmlsys_role_permission多对多关系表批量插入前先DELETE FROM sys_role_permission WHERE role_id ?清空旧权限参数说明MediaServiceImpl.uploadImage()方法接收MultipartFile file和String deviceId两个参数其中deviceId用于关联设备避免图片归属混乱。若前端未传deviceId后端会抛出IllegalArgumentException(设备ID不能为空)而非静默忽略——这是毕设答辩时老师常问的“异常处理是否完备”的得分点。3. 数据库设计与 MyBatisPlus 配置为什么你的 insert 语句总少一个字段3.1 四张核心表的字段设计逻辑从 ER 图到实际 SQL 的取舍项目数据库共 12 张表但真正驱动业务的是以下四张sys_user用户主表含username唯一、passwordBCrypt 加密、role_id外键、avatar_url头像路径、last_login_time自动更新device_info设备主表含device_code设备唯一编码如SH-2023-001、device_name、statustinyint0离线,1在线,2故障、group_id所属分组media_resource素材表含original_name原始文件名、storage_path服务器相对路径如/upload/images/2023/10/abc.jpg、thumbnail_url缩略图路径、upload_timedatetime自动填充sys_role_permission权限中间表仅含role_id和permission_code如device:read,user:delete避坑sys_user.last_login_time字段在 MySQL 中定义为DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP但 MyBatisPlus 的TableField(fill FieldFill.INSERT_UPDATE)会覆盖该行为。实际代码中UserEntity类对该字段使用了TableField(fill FieldFill.UPDATE)确保只有更新时才写入时间避免每次查询都触发 update。3.2 MyBatisPlus 自动填充失效的三大场景及修复方案现象 1created_time字段始终为 null原因实体类中TableField(fill FieldFill.INSERT)注解存在但MetaObjectHandler实现类未被 Spring 扫描到。解决检查config/MybatisPlusConfig.java是否有MapperScan(com.example.smart.home.mapper)且MetaObjectHandler类上有Component注解。常见错误是MetaObjectHandler放在util包下而MapperScan只扫mapper包。现象 2updated_time在 insert 时也被赋值原因MetaObjectHandler.insertFill()方法中误写了metaObject.setValue(updatedTime, now)。解决insertFill()只填createdTimeupdateFill()才填updatedTime。标准写法Override public void insertFill(MetaObject metaObject) { this.strictInsertFill(metaObject, createdTime, LocalDateTime.class, LocalDateTime.now()); // 起始版本号 } Override public void updateFill(MetaObject metaObject) { this.strictUpdateFill(metaObject, updatedTime, LocalDateTime.class, LocalDateTime.now()); }现象 3批量插入saveBatch()时自动填充不生效原因MyBatisPlus 默认关闭批量插入的自动填充。解决在MybatisPlusConfig.java中添加Bean public MybatisPlusPropertiesCustomizer mybatisPlusPropertiesCustomizer() { return properties - { properties.getGlobalConfig().getDbConfig().setInsertStrategy(FieldStrategy.NOT_NULL); // 关键启用批量插入自动填充 GlobalConfig globalConfig properties.getGlobalConfig(); globalConfig.setBanner(false); globalConfig.setMetaObjectHandler(new MyMetaObjectHandler()); }; }3.3 MySQL 字符集陷阱为什么中文用户名存进数据库变成问号项目application.yml中配置了spring: datasource: url: jdbc:mysql://localhost:3306/smart_home?useUnicodetruecharacterEncodingutf8serverTimezoneGMT%2B8但实际 MySQL 服务端字符集可能仍是latin1。验证方法SHOW VARIABLES LIKE character_set%; -- 必须确保 character_set_server utf8mb4collation_server utf8mb4_unicode_ci血泪经验即使 URL 加了characterEncodingutf8若 MySQL 的my.cnf中未配置[mysqld] character-set-server utf8mb4 collation-server utf8mb4_unicode_ci [client] default-character-set utf8mb4重启 MySQL 后sys_user.username字段仍会以latin1存储导致中文乱码。建议直接在建库语句中强制指定CREATE DATABASE smart_home CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;4. Spring Security JWT 权限控制从登录成功到接口拦截的完整链路4.1 登录认证流程为什么 /login 接口返回的 token 无法访问 /api/user/list后端LoginController.java的login()方法返回 JSON 结构为{ code: 200, msg: 登录成功, data: { token: eyJhbGciOiJIUzI1NiJ9.xxx.yyy, userInfo: { id: 1, username: admin, role: ADMIN } } }前端将token存入 localStorage 后后续请求需在 Header 中携带// axios 请求拦截器 service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers.Authorization Bearer token // 注意 Bearer 后有空格 } return config })注意Spring Security 的JwtAuthenticationFilter中getUsernamePasswordAuthenticationToken()方法从AuthorizationHeader 提取 token 时正则匹配为^Bearer\s(.*)$。若前端漏掉空格如Bearertoken则提取失败Authentication对象为 null最终被UsernamePasswordAuthenticationFilter拦截并返回 401。4.2 权限注解PreAuthorize的生效条件为什么加了注解却没拦截DeviceController.java中有PreAuthorize(hasAuthority(device:read)) GetMapping(/list) public Result listDevices() { ... }但实际请求仍能通过原因有三SecurityConfig.java 中未启用方法级安全必须有EnableGlobalMethodSecurity(prePostEnabled true)JWT Token 中未包含 authorities 字段JwtTokenUtil.generateToken()方法生成 token 时claims.put(authorities, user.getAuthorities())必须执行且user.getAuthorities()返回ListString如[device:read, user:write]Spring Security 的AuthenticationManager未注入到JwtAuthenticationFilter检查JwtAuthenticationFilter构造函数是否接收AuthenticationManager并赋值给成员变量。验证技巧在JwtAuthenticationFilter.doFilterInternal()方法首行加断点查看Authentication auth authenticationManager.authenticate(token)执行后auth.getAuthorities()是否包含device:read。若为空则问题出在 token 生成环节。4.3 角色与权限的动态绑定如何实现“管理员可分配任意权限普通用户只能看自己设备”项目采用 RBAC基于角色的访问控制但增加了数据级权限控制。关键在DeviceServiceImpl.listDevices()方法Override public IPageDeviceInfo listDevices(PageDeviceInfo page, DeviceQuery query) { // 获取当前登录用户的角色 String currentRole SecurityContextHolder.getContext() .getAuthentication().getAuthorities().stream() .map(GrantedAuthority::getAuthority).findFirst().orElse(USER); QueryWrapperDeviceInfo wrapper new QueryWrapper(); if (ADMIN.equals(currentRole)) { // 管理员查全部 } else { // 普通用户只查自己创建的设备假设 device_info 表有 create_by 字段 Long userId getCurrentUserId(); wrapper.eq(create_by, userId); } return deviceInfoMapper.selectPage(page, wrapper); }参数说明getCurrentUserId()从 JWT Token 中解析userId而非从 Session 获取保证无状态。device_info.create_by字段在insert时由MetaObjectHandler自动填充避免业务代码重复写。5. 常见问题排查与避坑指南那些让毕设答辩翻车的隐藏雷区5.1 现象点击“图片上传”按钮无反应控制台无任何报错原因前端MediaUpload.vue中el-upload组件的action属性指向/api/media/upload但后端MediaController.uploadImage()方法使用PostMapping(/upload)路径不匹配。解决统一为PostMapping(/api/media/upload)或修改前端action为/api/media/upload。注意 Spring Boot 默认开启spring.mvc.servlet.context-path/api所以实际请求 URL 是http://localhost:8080/api/api/media/upload—— 这是双重/api必须删掉一个。5.2 现象MySQL 启动后1-install.bat执行报错Access denied for user rootlocalhost原因MySQL 8.0 默认认证插件改为caching_sha2_password而项目pom.xml中mysql-connector-java版本为5.1.47不支持该插件。解决升级 JDBC 驱动至8.0.33并在application.yml的 JDBC URL 末尾添加allowPublicKeyRetrievaltrueuseSSLfalseurl: jdbc:mysql://localhost:3306/smart_home?useUnicodetruecharacterEncodingutf8serverTimezoneGMT%2B8allowPublicKeyRetrievaltrueuseSSLfalse5.3 现象Vue 页面打开后显示 “Cannot GET /dashboard”原因Vue Router 使用 history 模式但 Spring Boot 未配置静态资源兜底路由。解决在backend/src/main/java/com/example/smart/home/config/WebMvcConfig.java中添加Configuration public class WebMvcConfig implements WebMvcConfigurer { Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController(/).setViewName(forward:/index.html); registry.addViewController(/dashboard/**).setViewName(forward:/index.html); registry.addViewController(/user/**).setViewName(forward:/index.html); // 其他需要兜底的路径... } }5.4 现象2-run.bat启动后控制台快速闪退看不到错误日志原因java -jar命令执行完立即退出错误被吞掉。解决修改2-run.bat在java -jar后加pausejava -Dfile.encodingUTF-8 -jar backend/target/smart-home-0.0.1-SNAPSHOT.jar pause或直接在命令行中执行java -jar ...错误堆栈会完整打印。5.5 现象设备状态图表ECharts不渲染控制台报echarts is not defined原因package.json中echarts依赖版本为^4.9.0但main.js中import * as echarts from echarts在 Vue CLI 4.x 中因 tree-shaking 导致模块未正确引入。解决改为全局引入在main.js顶部添加import echarts from echarts Vue.prototype.$echarts echarts并在组件中用this.$echarts.init(...)初始化。6. 进阶技巧如何把这套系统快速适配成“实验室设备管理系统”或“公寓门禁管理平台”6.1 模块替换三步法用最小改动复用核心框架假设你要将“智能家居”改成“实验室设备管理”只需三处修改数据库表重命名与字段扩展device_info→lab_equipment新增字段equipment_type仪器/耗材/软件、purchase_datedate、warranty_periodint单位月media_resource→equipment_photo新增is_main_phototinyint1主图0辅图。后端实体类与 Mapper 重构DeviceInfo.java→LabEquipment.javaTableName(lab_equipment)DeviceMapper.java→LabEquipmentMapper.javaMapper注解指向新 XMLDeviceController.java→LabEquipmentController.javaRequestMapping(/api/equipment)。前端路由与组件重映射修改router/index.js{ path: /equipment, name: EquipmentList, component: () import(/views/equipment/List.vue) // 原 /device/List.vue 复制重命名 }将views/device/下所有.vue文件复制到views/equipment/全局替换device为equipment。验证方法启动后访问/equipment检查 Network 面板中请求 URL 是否为/api/equipment/list响应数据是否含equipment_type字段。若返回 404检查LabEquipmentController的RequestMapping前缀是否与WebMvcConfig中的context-path冲突。6.2 权限模型升级从“菜单级”到“数据级”的平滑过渡原系统权限粒度止于device:read但实验室场景需控制“只能查看自己申购的设备”。实现方案在sys_user表增加department_id字段在lab_equipment表增加department_id字段修改LabEquipmentServiceImpl.list()方法// 获取当前用户部门 Long deptId getCurrentUserDepartmentId(); wrapper.eq(department_id, deptId); // 部门隔离 // 若用户是超级管理员跳过此条件 if (!hasRole(SUPER_ADMIN)) { wrapper.eq(department_id, deptId); }6.3 文件上传安全加固防止恶意脚本上传的四个硬性检查原项目MediaController.uploadImage()仅校验文件后缀存在风险。我一般会加这四层过滤检查项代码示例说明后缀白名单Arrays.asList(jpg, jpeg, png, gif).contains(ext)阻止.jsp,.phpMIME 类型校验if (!image/jpeg.equals(file.getContentType()) !image/png.equals(file.getContentType()))防止伪造后缀文件头检测byte[] header new byte[4]; file.getInputStream().read(header); if (!Arrays.equals(header, new byte[]{(byte)0xFF, (byte)0xD8, (byte)0xFF}))JPG 文件头为 FF D8 FF大小限制if (file.getSize() 5 * 1024 * 1024) throw new RuntimeException(文件不能超过5MB);防 DOS 攻击从那以后我每次接手毕设项目都强制走一遍这四层校验——哪怕导师说“简单点就行”因为去年有个学生上传了带scriptalert(1)/script的 PNG结果在管理员查看图片详情页时弹窗答辩时被当场叫停。希望帮到你。本文还有配套的精品资源点击获取