简介这套基于Spring Boot与Vue的智能家居系统毕业设计源码面向计算机相关专业学生的毕业设计与课程设计场景。系统提供管理员、用户两种角色功能覆盖个人中心、基础数据管理、家具管理、任务管理和用户管理模块管理者可维护家具信息用户能发布与跟踪智能家居任务有助于理解角色权限划分及前后端数据交互。压缩包共370个文件包含Java后端源码、Vue前端页面、MySQL数据库脚本及说明文档另有svg图标、xml配置、启动批处理脚本等辅助内容整体大小17.58MB目录层次清晰方便按模块查阅。目前资源已有62人学习下载。配套说明文档详述设计思路、功能结构与部署方法环境采用JDK1.8、MySQL5.7与Maven3.3支持Eclipse或IDEA直接运行调试可作为毕业设计完整参考或课程设计实战项目。1. 智能家居系统源码一份能直接跑的springbootvuemysql毕业设计“智能家居系统”是java毕业设计里最稳的选题之一这个springbootvuemysql源码包正好覆盖了一条完整的前后端链路springboot负责设备状态维护、指令下发和场景联动接口vue负责控制面板、数据图表和登录交互mysql存用户、设备、场景和上报日志附带的说明文档和LW把答辩要讲的理论部分补齐。适合两类人一类是还没定题、想用现成项目做二次开发的毕业生另一类是刚学完java基础和springboot、想找一个带真实业务的前后端分离项目练手的开发者。下面按“架构分工—后端跑通—前端跑通—避坑—联动验证”的顺序拆开讲跟着做就能把这份zip变成本地能演示、能截图、能写进论文的完整系统整套方案不需要真实硬件设备状态用数据库字段模拟即可。2. springbootvuemysql三大件怎么分工为什么这个组合能撑起一套智能家居2.1 服务端用springboot管设备状态接口设计与mybatis查询的常见写法拿到源码第一步不是急着跑而是先看懂后端在做什么。智能家居系统的业务核心可以用一句话概括用户登录后看到家里有哪些设备点一下开关设备状态改变界面马上反映出来操作记录写进日志。这个场景落到springboot里就是三个接口查询设备列表、下发设备控制指令、查询设备历史数据最多再加一个场景模式接口回家模式、离家模式。接口之外的业务逻辑才是毕设答辩时会问的重点。常见做法是设备表里用status字段表示在线离线、用is_on字段表示开关状态所谓“控制设备”就是对这个设备执行一次update再把“谁在什么时间对哪个设备做了什么操作”写进日志表。这里不需要消息队列不需要MQTT不需要任何物联网协议把云端设备管理系统的骨架做出来就已经超过了大部分只做增删改查的毕业设计。数据访问层用mybatis还是mybatis-plus取决于源码里的pom依赖。如果是mybatis重点关注xml里resultMap的映射写法数据库字段device_name和实体类属性deviceName的映射靠map-underscore-to-camel-case自动完成如果是mybatis-plus那连xml都省了大半直接用ServiceImpl里的lambdaQuery。提示无论哪种mapper都要确认实体类里的时间字段用的是LocalDateTime还是Date。这个字段类型会影响JSON序列化格式后端返回的时间格式不对前端图表就显示成时间戳这是联调时最常见的返工点。2.2 前端用vue管控制面板实时刷新选轮询还是WebSocket前端在智能家居系统里的存在感直接决定这个项目的“演示效果”。vue负责三件事登录页、设备控制面板、数据可视化页面。技术栈通常是vue2或vue3配element-ui图表用echarts状态管理用vuex或pinia路由用vue-router。这套组合在近几年的java毕业设计里几乎成了标配原因很简单element-ui的开关、滑块、卡片组件长得就像智能家居的控制面板改改颜色和图标就能出效果。设备状态实时刷新是这类项目的关键体验。最简单的做法是axios轮询前端用setInterval每3秒拉一次设备列表把返回数据重新赋值给页面。这种方案的优点是不需要后端做特殊支持答辩时也好解释缺点是设备多了以后请求频繁而且“实时”其实有3秒延迟。想要加分的做法是用WebSocketspringboot后端在设备状态变化时主动往前端推消息前端收到后局部更新对应设备的状态字段这个改造能写进LW的创新性说明里。轮询和WebSocket之间怎么选我的建议是先把轮询跑通整个系统能演示了再评估要不要把某个页面升级成WebSocket推送。毕业设计的评分重点从来不是用了多新的技术而是你能不能讲清楚“为什么这么选”。2.3 mysql充当智能家居系统的黑匣子四张表就够撑起毕业设计的核心业务mysql在整套系统里承担的是数据持久化说白了就是那个把所有操作记录下来的黑匣子。毕业设计级别的智能家居系统不需要微服务拆分数据库四张表就够用户表、设备表、操作日志表、场景表。设备表是核心字段至少包含设备名称、设备编码、所属房间、在线状态、开关状态、创建时间日志表记录每一次控制操作包含设备id、操作类型、操作时间场景表用于保存“回家模式”这类一键联动配置。表设计有两个容易踩坑的点。第一个是字符集建库时统一用utf8mb4而不是utf8否则设备名称里带个emoji或者特殊符号就插入报错。第二个是外键约束毕业设计里不建议在日志表上做物理外键否则删除设备时会被日志表卡住演示的时候当着老师的面删设备报错场面会很尴尬。关于数据库连接池springboot 2.x默认用的是HikariCP这个不用换配置好连接地址、用户名、密码就能用。如果源码里用的是druid那多半是为了在LW里写监控页面两者在毕业设计场景下性能差异可以忽略重点是把连接配置写对让应用能正常启动。3. 复现后端的每一步从mysql建库到springboot项目启动3.1 先建库再导数据navicat导入sql文件的正确顺序后端跑通的第一步是先把数据库准备好。源码包里一般会带一个.sql文件可能是建表语句加初始数据也可能是只建表。用navicat导入时不要直接双击执行先手动新建一个数据库再把字符集选成utf8mb4然后在这个空的数据库上执行sql文件。-- 手动建库示例字符集必须和表结构定义保持一致 CREATE DATABASE IF NOT EXISTS smart_home DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE smart_home; -- 设备表是整套系统的核心房间和状态字段后面都要被接口查询 CREATE TABLE device ( id int(11) NOT NULL AUTO_INCREMENT COMMENT 主键, device_name varchar(64) NOT NULL COMMENT 设备名称比如客厅空调, device_code varchar(32) DEFAULT NULL COMMENT 设备编码前端控制指令的标识, room varchar(32) DEFAULT NULL COMMENT 所属房间客厅/卧室/厨房, status tinyint(1) DEFAULT 0 COMMENT 0-离线 1-在线, is_on tinyint(1) DEFAULT 0 COMMENT 0-关闭 1-开启, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT设备信息表;这段建表语句里有两个字段值得细看status和is_on分开存是因为“在线”和“开启”是两个概念——设备在线但可以没开设备开启但可能离线。很多源码会把这两个字段合并成一个控制逻辑在演示时就会乱。导入完成后先执行一条SELECT * FROM device;确认数据进去了再关navicat。注意如果你的mysql版本在5.7以下DEFAULT CURRENT_TIMESTAMP是正常的如果用的是mysql 8.0驱动和时区配置不匹配会在后面启动时报错这个放到避坑章节单独讲。3.2 修改application.yml三件套url、驱动、时区数据库准备好之后改配置是后端跑通的核心操作。打开源码里的application.yml或application.properties只需要改三个地方数据源地址、用户名密码、驱动类。springboot 2.x默认把驱动配成了com.mysql.jdbc.Driver这个类的名字在mysql 8.0里已经标记废弃建议统一改成com.mysql.cj.jdbc.Driver。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/smart_home?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver hikari: maximum-pool-size: 10 minimum-idle: 2 mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: trueurl里最容易被忽略的是serverTimezoneAsia/Shanghai。mysql 8.0默认时区是UTC不指定这个参数后端查出来的时间会比本地时间晚8小时前端图表上的温度曲线会整体偏移。useSSLfalse是为了避免本地连数据库时打印一堆SSL告警日志不影响功能纯属图干净。map-underscore-to-camel-case: true这一行是mybatis的命名映射开关。没有它数据库的device_name字段映射不到实体的deviceName属性查询结果全是null。这几个参数每次复现项目我都会先核对一遍业内俗称“三件套”改完基本就不会在连接层出问题。3.3 启动springboot看日志确认接口和mapper都注册成功配置改完接下来是启动后端。用IDEA打开源码等maven把依赖下载完然后找到主启动类直接运行或者用命令行的方式更干净。第一次启动通常要等maven下载依赖如果网络慢或者一直卡在下载去maven的settings.xml里把镜像源换成阿里云能快很多。# 方式一开发调试直接用maven插件启动 mvn spring-boot:run # 方式二先打包成jar再运行适合部署到服务器演示 mvn clean package -Dmaven.test.skiptrue java -jar target/smart-home-0.0.1-SNAPSHOT.jar启动成功后控制台会打印springboot特有的ASCII艺术字下面跟着一行日志Tomcat started on port(s): 8080 (http)看到这行日志说明springboot服务已经起来了。接下来验证接口是否真的连上数据库在浏览器访问http://localhost:8080/api/device/list能返回JSON数组就说明mapper、配置文件、数据库三层全部打通。如果返回错误页面或json串是空的优先看IDEA控制台有没有SQL报错多半是字段映射或表名对不上。4. 跑通vue前端依赖安装、环境配置与接口代理4.1 vue安装及环境配置先确认node版本再动手装依赖前端跑通是整个项目里最容易翻车的环节罪魁祸首大多是环境问题而不是代码问题。打开前端目录先看有没有package.json这是vue项目的依赖清单。安装依赖之前先确认node版本node -v npm -v npm config get registry依赖安装慢或失败的话把npm源切到国内镜像再重试npm config set registry https://registry.npmmirror.com npm installnpm install执行完看输出有没有node-sass相关的error。vue2项目里node-sass是历史遗留的大坑新版本node根本不支持旧版node-sass的编译。如果报错解决方案是把package.json里的sass-loader和node-sass删掉改用sassdart-sass或者直接找源码里有没有yarn.lock用yarn install有时能避开node-sass的编译问题。注意前端依赖动不动几百MB第一次npm install等个十来分钟很正常。卡住不要反复ctrlc先看是卡在下载还是卡在编译下载慢就换镜像编译报错就查node版本。4.2 跨域靠vue.config.js代理我把接口代理到后端的三行配置后端在8080端口前端开发服务器默认在8081或8082两者端口不同就存在跨域问题。跨域问题的正解不是在后端写CrossOrigin注解而是在vue.config.js里配代理——前端请求走devServer转发到后端浏览器看到的是同源请求cookie也不会丢。// vue.config.js 这是vue-cli项目开发环境的代理配置 const { defineConfig } require(vue/cli-service) module.exports defineConfig({ transpileDependencies: true, devServer: { port: 8081, // 前端开发服务器端口 proxy: { /api: { // 所有以/api开头的请求都走代理 target: http://localhost:8080, // 后端springboot服务地址 changeOrigin: true, // 重写host头让后端认为是同源请求 pathRewrite: { ^/api: } // 把/api前缀去掉再转发 } } } })pathRewrite的注释容易让人困惑^/api: 的意思是前端请求写/api/device/list代理转发给后端时变成/device/list。如果后端Controller里定义的接口路径本身带/api前缀就把pathRewrite这行删掉。配置完改完必须重启npm run serve才会生效这个很多人会踩。4.3 从登录页到设备控制页axios封装与vue路由参数的配合前端除了页面本身还有一层基础设施要打通。查看源码里的src/utils/request.js这是axios的封装一般会把baseURL设成/api加一个请求拦截器把登录后拿到的token放进header。import axios from axios const service axios.create({ baseURL: /api, // 走devServer代理生产环境改成后端真实地址 timeout: 10000, withCredentials: true // 允许携带cookie登录状态全靠这个 }) // 请求拦截器每次请求自动带上token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) export default servicewithCredentials: true这行非常关键。如果不设置后端session里存的登录态在下次请求时拿不到表现就是“登录成功后紧接着请求接口又返回401”。配合vue.config.js里的changeOrigin: true一起用才能保证session不丢。路由配置部分设备详情页一般要用到路由参数点击设备卡片跳转到对应设备页面时传设备id。// router/index.js 设备详情页路由:id是动态参数 { path: /device/:id, name: DeviceDetail, component: () import(/views/DeviceDetail.vue) }页面里用this.$route.params.id取出设备id再调getDeviceInfo(id)向后端查询详情。把axios封装、路由参数这一层理清楚前端的基础设施就齐了后面接任何页面都是这一套写法。5. 避坑把springbootvuemysql智能家居从“能装”调到“能演示”的五个常见问题5.1 mysql连接报error 2002先看服务启动状态再看socket路径现象后端启动时控制台报error 2002 (HY000): Cant connect to local MySQL server through socket /tmp/mysql.sock服务直接起不来。原因这条报错的本意是客户端连不上mysql服务端最常见的两种情况一是mysql服务根本没启动二是mysql安装时socket文件路径不是/tmp/mysql.sock。mac上用homebrew装的mysqlsocket路径多数在/tmp/mysql.socklinux上用apt装的可能在/var/run/mysqld/mysqld.sock。解决先确认服务状态mac用brew services list看mysql这一行是不是startedlinux用systemctl status mysql。服务确认启动后还报错就把application.yml里url的localhost改成127.0.0.1有时能避开socket解析问题。5.2 8080端口被占用改端口前先杀掉占用进程现象后端启动日志报Web server failed to start. Port 8080 was already in use启动失败。原因本地有别的java进程或者docker容器占了8080端口。这个报错在前后端联调时特别容易出现——之前跑过没关的springboot实例还在后台挂着。解决先查谁占用了端口mac和linux用lsof -i :8080或netstat -an | grep 8080windows用netstat -ano | findstr 8080。找到PID后kill -9杀掉。不想每次杀进程的话把application.yml里server.port改成8080以外的端口注意同时改vue代理的target地址两边保持一致。5.3 数据库时间差8小时时区参数和驱动版本一起核对现象前端页面显示设备上报时间比当前时间晚8小时日志表里的操作时间也对不上。原因mysql 8.0的驱动默认连接时区是UTC而国内时区是UTC8配再多的CURRENT_TIMESTAMP也救不了读取时的偏移。另一个叠加因素是驱动版本太老连接串里的serverTimezone参数不生效。解决改连接串加三件套useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai然后把pom.xml里的mysql-connector-java版本升级到8.0.33以上。改完重启后端和前端再查一次接口返回的时间字段确认和本地时间一致。5.4 登录后请求接口就掉线withCredentials与changeOrigin必须同时配现象前端登录页能正常登录跳转到首页后列表接口返回401或403刷新页面又回到登录页。原因vue开发服务器把请求代理给后端时如果没有设置changeOrigin: true代理转发时携带的cookie信息会被改写后端session识别不了axios封装里没开withCredentials则浏览器跨域时压根不发送cookie。两个配置缺一个登录态就断。解决vue.config.js里proxy配置加上changeOrigin: truerequest.js里axios实例加上withCredentials: true。改完重启npm run serve清掉浏览器缓存重新登录。这套参数组合调试的时候经常被人忽略确实很“玄学”但本质就是两个开关没同时打开。5.5 node-sass怎么都装不上换镜像源不如直接换dart-sass现象npm install执行到node-sass时卡住或者报Python not found、node-sass requires Node version之类的编译错误。原因node-sass是C模块每次安装都要下载二进制文件并针对当前node版本重新编译。node 14以后的版本特别是node 18以上和旧版node-sass的兼容性非常差。解决把package.json依赖里的node-sass和sass-loader删掉换成sass和对应的sass-loader版本然后删掉node_modules重新npm install。dart-sass是官方维护的版本不需要下载二进制纯JavaScript实现兼容性要好很多。如果源码里的样式代码用了sass的旧语法比如/deep/深度选择器换成dart-sass后需要改成::v-deep这是唯一的附带成本。6. 让智能家居系统真正“智能”模拟设备上报与场景联动验证6.1 用node脚本模拟温度传感器上报让图表动起来设备列表和控制面板跑通之后项目还差一个“看起来智能”的点数据可视化页面有真正的动态数据。没有真实硬件就用脚本模拟传感器上报。在项目根目录建一个mock-sensor.js定时往后端接口写入温湿度数据。// mock-sensor.js 模拟温度传感器每2秒上报一次随机温湿度 const axios require(axios) const url http://localhost:8080/api/device/data // 改成你后端真实的上报接口 setInterval(async () { const data { deviceCode: SENSOR_TEMP_01, temperature: Number((22 Math.random() * 10).toFixed(1)), humidity: Number((40 Math.random() * 30).toFixed(1)) } await axios.post(url, data) console.log(上报完成:, data) }, 2000)脚本跑起来后前端图表页每3秒轮询一次设备历史数据温度曲线就会自己跳动。演示时先把脚本开着等曲线画出两三个波峰再关掉截图放进LW里作为“系统具备数据采集能力”的证据比静态图表有说服力得多。6.2 场景联动的验证方式与WebSocket升级路线的可选操作场景联动是智能家居系统里最能体现业务理解的加分项。在页面上定义一个“回家模式”开启客厅灯、打开空调、关闭窗帘然后把这一组动作保存为场景。触发场景时后端按顺序把三条指令写入日志表并更新设备状态。验证方法很简单——触发前看一眼设备列表触发后再看一眼状态应该一次性全变。我自己的验收习惯是每个场景跑三遍第一遍看前端开关状态是否同步翻转第二遍看日志表里是否新增了三条操作记录第三遍把场景里的某个设备手动关闭再触发看后端会不会跳过已满足条件的设备这样处理逻辑才说得上是健壮的。最后提一嘴WebSocket的升级路线。轮询能演示但“实时控制响应”的体验差口气。想做这个加分项思路是springboot里用ServerEndpoint声明一个WebSocket端点前端在设备控制页建立连接后端service层在设备状态变更时主动推送。这项改造不必改动现有接口属于增量开发风险不大足够写进LW的“系统优化与展望”章节。这些年我经手过不少以“智能家居”为题的java项目最深的体会是跑通源码只是第一步能讲清楚每个模块为什么这么设计才是毕业设计的真正价值。先把这套系统从zip变成能本地运行的项目再按自己的理解给某个模块做一次小改造答辩时的底气就完全不一样了。希望帮到你。本文还有配套的精品资源点击获取
SpringBoot+Vue+MySQL智能家居系统：毕业设计前后端分离实战
简介这套基于Spring Boot与Vue的智能家居系统毕业设计源码面向计算机相关专业学生的毕业设计与课程设计场景。系统提供管理员、用户两种角色功能覆盖个人中心、基础数据管理、家具管理、任务管理和用户管理模块管理者可维护家具信息用户能发布与跟踪智能家居任务有助于理解角色权限划分及前后端数据交互。压缩包共370个文件包含Java后端源码、Vue前端页面、MySQL数据库脚本及说明文档另有svg图标、xml配置、启动批处理脚本等辅助内容整体大小17.58MB目录层次清晰方便按模块查阅。目前资源已有62人学习下载。配套说明文档详述设计思路、功能结构与部署方法环境采用JDK1.8、MySQL5.7与Maven3.3支持Eclipse或IDEA直接运行调试可作为毕业设计完整参考或课程设计实战项目。1. 智能家居系统源码一份能直接跑的springbootvuemysql毕业设计“智能家居系统”是java毕业设计里最稳的选题之一这个springbootvuemysql源码包正好覆盖了一条完整的前后端链路springboot负责设备状态维护、指令下发和场景联动接口vue负责控制面板、数据图表和登录交互mysql存用户、设备、场景和上报日志附带的说明文档和LW把答辩要讲的理论部分补齐。适合两类人一类是还没定题、想用现成项目做二次开发的毕业生另一类是刚学完java基础和springboot、想找一个带真实业务的前后端分离项目练手的开发者。下面按“架构分工—后端跑通—前端跑通—避坑—联动验证”的顺序拆开讲跟着做就能把这份zip变成本地能演示、能截图、能写进论文的完整系统整套方案不需要真实硬件设备状态用数据库字段模拟即可。2. springbootvuemysql三大件怎么分工为什么这个组合能撑起一套智能家居2.1 服务端用springboot管设备状态接口设计与mybatis查询的常见写法拿到源码第一步不是急着跑而是先看懂后端在做什么。智能家居系统的业务核心可以用一句话概括用户登录后看到家里有哪些设备点一下开关设备状态改变界面马上反映出来操作记录写进日志。这个场景落到springboot里就是三个接口查询设备列表、下发设备控制指令、查询设备历史数据最多再加一个场景模式接口回家模式、离家模式。接口之外的业务逻辑才是毕设答辩时会问的重点。常见做法是设备表里用status字段表示在线离线、用is_on字段表示开关状态所谓“控制设备”就是对这个设备执行一次update再把“谁在什么时间对哪个设备做了什么操作”写进日志表。这里不需要消息队列不需要MQTT不需要任何物联网协议把云端设备管理系统的骨架做出来就已经超过了大部分只做增删改查的毕业设计。数据访问层用mybatis还是mybatis-plus取决于源码里的pom依赖。如果是mybatis重点关注xml里resultMap的映射写法数据库字段device_name和实体类属性deviceName的映射靠map-underscore-to-camel-case自动完成如果是mybatis-plus那连xml都省了大半直接用ServiceImpl里的lambdaQuery。提示无论哪种mapper都要确认实体类里的时间字段用的是LocalDateTime还是Date。这个字段类型会影响JSON序列化格式后端返回的时间格式不对前端图表就显示成时间戳这是联调时最常见的返工点。2.2 前端用vue管控制面板实时刷新选轮询还是WebSocket前端在智能家居系统里的存在感直接决定这个项目的“演示效果”。vue负责三件事登录页、设备控制面板、数据可视化页面。技术栈通常是vue2或vue3配element-ui图表用echarts状态管理用vuex或pinia路由用vue-router。这套组合在近几年的java毕业设计里几乎成了标配原因很简单element-ui的开关、滑块、卡片组件长得就像智能家居的控制面板改改颜色和图标就能出效果。设备状态实时刷新是这类项目的关键体验。最简单的做法是axios轮询前端用setInterval每3秒拉一次设备列表把返回数据重新赋值给页面。这种方案的优点是不需要后端做特殊支持答辩时也好解释缺点是设备多了以后请求频繁而且“实时”其实有3秒延迟。想要加分的做法是用WebSocketspringboot后端在设备状态变化时主动往前端推消息前端收到后局部更新对应设备的状态字段这个改造能写进LW的创新性说明里。轮询和WebSocket之间怎么选我的建议是先把轮询跑通整个系统能演示了再评估要不要把某个页面升级成WebSocket推送。毕业设计的评分重点从来不是用了多新的技术而是你能不能讲清楚“为什么这么选”。2.3 mysql充当智能家居系统的黑匣子四张表就够撑起毕业设计的核心业务mysql在整套系统里承担的是数据持久化说白了就是那个把所有操作记录下来的黑匣子。毕业设计级别的智能家居系统不需要微服务拆分数据库四张表就够用户表、设备表、操作日志表、场景表。设备表是核心字段至少包含设备名称、设备编码、所属房间、在线状态、开关状态、创建时间日志表记录每一次控制操作包含设备id、操作类型、操作时间场景表用于保存“回家模式”这类一键联动配置。表设计有两个容易踩坑的点。第一个是字符集建库时统一用utf8mb4而不是utf8否则设备名称里带个emoji或者特殊符号就插入报错。第二个是外键约束毕业设计里不建议在日志表上做物理外键否则删除设备时会被日志表卡住演示的时候当着老师的面删设备报错场面会很尴尬。关于数据库连接池springboot 2.x默认用的是HikariCP这个不用换配置好连接地址、用户名、密码就能用。如果源码里用的是druid那多半是为了在LW里写监控页面两者在毕业设计场景下性能差异可以忽略重点是把连接配置写对让应用能正常启动。3. 复现后端的每一步从mysql建库到springboot项目启动3.1 先建库再导数据navicat导入sql文件的正确顺序后端跑通的第一步是先把数据库准备好。源码包里一般会带一个.sql文件可能是建表语句加初始数据也可能是只建表。用navicat导入时不要直接双击执行先手动新建一个数据库再把字符集选成utf8mb4然后在这个空的数据库上执行sql文件。-- 手动建库示例字符集必须和表结构定义保持一致 CREATE DATABASE IF NOT EXISTS smart_home DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE smart_home; -- 设备表是整套系统的核心房间和状态字段后面都要被接口查询 CREATE TABLE device ( id int(11) NOT NULL AUTO_INCREMENT COMMENT 主键, device_name varchar(64) NOT NULL COMMENT 设备名称比如客厅空调, device_code varchar(32) DEFAULT NULL COMMENT 设备编码前端控制指令的标识, room varchar(32) DEFAULT NULL COMMENT 所属房间客厅/卧室/厨房, status tinyint(1) DEFAULT 0 COMMENT 0-离线 1-在线, is_on tinyint(1) DEFAULT 0 COMMENT 0-关闭 1-开启, create_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 创建时间, PRIMARY KEY (id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT设备信息表;这段建表语句里有两个字段值得细看status和is_on分开存是因为“在线”和“开启”是两个概念——设备在线但可以没开设备开启但可能离线。很多源码会把这两个字段合并成一个控制逻辑在演示时就会乱。导入完成后先执行一条SELECT * FROM device;确认数据进去了再关navicat。注意如果你的mysql版本在5.7以下DEFAULT CURRENT_TIMESTAMP是正常的如果用的是mysql 8.0驱动和时区配置不匹配会在后面启动时报错这个放到避坑章节单独讲。3.2 修改application.yml三件套url、驱动、时区数据库准备好之后改配置是后端跑通的核心操作。打开源码里的application.yml或application.properties只需要改三个地方数据源地址、用户名密码、驱动类。springboot 2.x默认把驱动配成了com.mysql.jdbc.Driver这个类的名字在mysql 8.0里已经标记废弃建议统一改成com.mysql.cj.jdbc.Driver。server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/smart_home?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的数据库密码 driver-class-name: com.mysql.cj.jdbc.Driver hikari: maximum-pool-size: 10 minimum-idle: 2 mybatis: mapper-locations: classpath:mapper/*.xml configuration: map-underscore-to-camel-case: trueurl里最容易被忽略的是serverTimezoneAsia/Shanghai。mysql 8.0默认时区是UTC不指定这个参数后端查出来的时间会比本地时间晚8小时前端图表上的温度曲线会整体偏移。useSSLfalse是为了避免本地连数据库时打印一堆SSL告警日志不影响功能纯属图干净。map-underscore-to-camel-case: true这一行是mybatis的命名映射开关。没有它数据库的device_name字段映射不到实体的deviceName属性查询结果全是null。这几个参数每次复现项目我都会先核对一遍业内俗称“三件套”改完基本就不会在连接层出问题。3.3 启动springboot看日志确认接口和mapper都注册成功配置改完接下来是启动后端。用IDEA打开源码等maven把依赖下载完然后找到主启动类直接运行或者用命令行的方式更干净。第一次启动通常要等maven下载依赖如果网络慢或者一直卡在下载去maven的settings.xml里把镜像源换成阿里云能快很多。# 方式一开发调试直接用maven插件启动 mvn spring-boot:run # 方式二先打包成jar再运行适合部署到服务器演示 mvn clean package -Dmaven.test.skiptrue java -jar target/smart-home-0.0.1-SNAPSHOT.jar启动成功后控制台会打印springboot特有的ASCII艺术字下面跟着一行日志Tomcat started on port(s): 8080 (http)看到这行日志说明springboot服务已经起来了。接下来验证接口是否真的连上数据库在浏览器访问http://localhost:8080/api/device/list能返回JSON数组就说明mapper、配置文件、数据库三层全部打通。如果返回错误页面或json串是空的优先看IDEA控制台有没有SQL报错多半是字段映射或表名对不上。4. 跑通vue前端依赖安装、环境配置与接口代理4.1 vue安装及环境配置先确认node版本再动手装依赖前端跑通是整个项目里最容易翻车的环节罪魁祸首大多是环境问题而不是代码问题。打开前端目录先看有没有package.json这是vue项目的依赖清单。安装依赖之前先确认node版本node -v npm -v npm config get registry依赖安装慢或失败的话把npm源切到国内镜像再重试npm config set registry https://registry.npmmirror.com npm installnpm install执行完看输出有没有node-sass相关的error。vue2项目里node-sass是历史遗留的大坑新版本node根本不支持旧版node-sass的编译。如果报错解决方案是把package.json里的sass-loader和node-sass删掉改用sassdart-sass或者直接找源码里有没有yarn.lock用yarn install有时能避开node-sass的编译问题。注意前端依赖动不动几百MB第一次npm install等个十来分钟很正常。卡住不要反复ctrlc先看是卡在下载还是卡在编译下载慢就换镜像编译报错就查node版本。4.2 跨域靠vue.config.js代理我把接口代理到后端的三行配置后端在8080端口前端开发服务器默认在8081或8082两者端口不同就存在跨域问题。跨域问题的正解不是在后端写CrossOrigin注解而是在vue.config.js里配代理——前端请求走devServer转发到后端浏览器看到的是同源请求cookie也不会丢。// vue.config.js 这是vue-cli项目开发环境的代理配置 const { defineConfig } require(vue/cli-service) module.exports defineConfig({ transpileDependencies: true, devServer: { port: 8081, // 前端开发服务器端口 proxy: { /api: { // 所有以/api开头的请求都走代理 target: http://localhost:8080, // 后端springboot服务地址 changeOrigin: true, // 重写host头让后端认为是同源请求 pathRewrite: { ^/api: } // 把/api前缀去掉再转发 } } } })pathRewrite的注释容易让人困惑^/api: 的意思是前端请求写/api/device/list代理转发给后端时变成/device/list。如果后端Controller里定义的接口路径本身带/api前缀就把pathRewrite这行删掉。配置完改完必须重启npm run serve才会生效这个很多人会踩。4.3 从登录页到设备控制页axios封装与vue路由参数的配合前端除了页面本身还有一层基础设施要打通。查看源码里的src/utils/request.js这是axios的封装一般会把baseURL设成/api加一个请求拦截器把登录后拿到的token放进header。import axios from axios const service axios.create({ baseURL: /api, // 走devServer代理生产环境改成后端真实地址 timeout: 10000, withCredentials: true // 允许携带cookie登录状态全靠这个 }) // 请求拦截器每次请求自动带上token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { config.headers[Authorization] token } return config }) export default servicewithCredentials: true这行非常关键。如果不设置后端session里存的登录态在下次请求时拿不到表现就是“登录成功后紧接着请求接口又返回401”。配合vue.config.js里的changeOrigin: true一起用才能保证session不丢。路由配置部分设备详情页一般要用到路由参数点击设备卡片跳转到对应设备页面时传设备id。// router/index.js 设备详情页路由:id是动态参数 { path: /device/:id, name: DeviceDetail, component: () import(/views/DeviceDetail.vue) }页面里用this.$route.params.id取出设备id再调getDeviceInfo(id)向后端查询详情。把axios封装、路由参数这一层理清楚前端的基础设施就齐了后面接任何页面都是这一套写法。5. 避坑把springbootvuemysql智能家居从“能装”调到“能演示”的五个常见问题5.1 mysql连接报error 2002先看服务启动状态再看socket路径现象后端启动时控制台报error 2002 (HY000): Cant connect to local MySQL server through socket /tmp/mysql.sock服务直接起不来。原因这条报错的本意是客户端连不上mysql服务端最常见的两种情况一是mysql服务根本没启动二是mysql安装时socket文件路径不是/tmp/mysql.sock。mac上用homebrew装的mysqlsocket路径多数在/tmp/mysql.socklinux上用apt装的可能在/var/run/mysqld/mysqld.sock。解决先确认服务状态mac用brew services list看mysql这一行是不是startedlinux用systemctl status mysql。服务确认启动后还报错就把application.yml里url的localhost改成127.0.0.1有时能避开socket解析问题。5.2 8080端口被占用改端口前先杀掉占用进程现象后端启动日志报Web server failed to start. Port 8080 was already in use启动失败。原因本地有别的java进程或者docker容器占了8080端口。这个报错在前后端联调时特别容易出现——之前跑过没关的springboot实例还在后台挂着。解决先查谁占用了端口mac和linux用lsof -i :8080或netstat -an | grep 8080windows用netstat -ano | findstr 8080。找到PID后kill -9杀掉。不想每次杀进程的话把application.yml里server.port改成8080以外的端口注意同时改vue代理的target地址两边保持一致。5.3 数据库时间差8小时时区参数和驱动版本一起核对现象前端页面显示设备上报时间比当前时间晚8小时日志表里的操作时间也对不上。原因mysql 8.0的驱动默认连接时区是UTC而国内时区是UTC8配再多的CURRENT_TIMESTAMP也救不了读取时的偏移。另一个叠加因素是驱动版本太老连接串里的serverTimezone参数不生效。解决改连接串加三件套useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai然后把pom.xml里的mysql-connector-java版本升级到8.0.33以上。改完重启后端和前端再查一次接口返回的时间字段确认和本地时间一致。5.4 登录后请求接口就掉线withCredentials与changeOrigin必须同时配现象前端登录页能正常登录跳转到首页后列表接口返回401或403刷新页面又回到登录页。原因vue开发服务器把请求代理给后端时如果没有设置changeOrigin: true代理转发时携带的cookie信息会被改写后端session识别不了axios封装里没开withCredentials则浏览器跨域时压根不发送cookie。两个配置缺一个登录态就断。解决vue.config.js里proxy配置加上changeOrigin: truerequest.js里axios实例加上withCredentials: true。改完重启npm run serve清掉浏览器缓存重新登录。这套参数组合调试的时候经常被人忽略确实很“玄学”但本质就是两个开关没同时打开。5.5 node-sass怎么都装不上换镜像源不如直接换dart-sass现象npm install执行到node-sass时卡住或者报Python not found、node-sass requires Node version之类的编译错误。原因node-sass是C模块每次安装都要下载二进制文件并针对当前node版本重新编译。node 14以后的版本特别是node 18以上和旧版node-sass的兼容性非常差。解决把package.json依赖里的node-sass和sass-loader删掉换成sass和对应的sass-loader版本然后删掉node_modules重新npm install。dart-sass是官方维护的版本不需要下载二进制纯JavaScript实现兼容性要好很多。如果源码里的样式代码用了sass的旧语法比如/deep/深度选择器换成dart-sass后需要改成::v-deep这是唯一的附带成本。6. 让智能家居系统真正“智能”模拟设备上报与场景联动验证6.1 用node脚本模拟温度传感器上报让图表动起来设备列表和控制面板跑通之后项目还差一个“看起来智能”的点数据可视化页面有真正的动态数据。没有真实硬件就用脚本模拟传感器上报。在项目根目录建一个mock-sensor.js定时往后端接口写入温湿度数据。// mock-sensor.js 模拟温度传感器每2秒上报一次随机温湿度 const axios require(axios) const url http://localhost:8080/api/device/data // 改成你后端真实的上报接口 setInterval(async () { const data { deviceCode: SENSOR_TEMP_01, temperature: Number((22 Math.random() * 10).toFixed(1)), humidity: Number((40 Math.random() * 30).toFixed(1)) } await axios.post(url, data) console.log(上报完成:, data) }, 2000)脚本跑起来后前端图表页每3秒轮询一次设备历史数据温度曲线就会自己跳动。演示时先把脚本开着等曲线画出两三个波峰再关掉截图放进LW里作为“系统具备数据采集能力”的证据比静态图表有说服力得多。6.2 场景联动的验证方式与WebSocket升级路线的可选操作场景联动是智能家居系统里最能体现业务理解的加分项。在页面上定义一个“回家模式”开启客厅灯、打开空调、关闭窗帘然后把这一组动作保存为场景。触发场景时后端按顺序把三条指令写入日志表并更新设备状态。验证方法很简单——触发前看一眼设备列表触发后再看一眼状态应该一次性全变。我自己的验收习惯是每个场景跑三遍第一遍看前端开关状态是否同步翻转第二遍看日志表里是否新增了三条操作记录第三遍把场景里的某个设备手动关闭再触发看后端会不会跳过已满足条件的设备这样处理逻辑才说得上是健壮的。最后提一嘴WebSocket的升级路线。轮询能演示但“实时控制响应”的体验差口气。想做这个加分项思路是springboot里用ServerEndpoint声明一个WebSocket端点前端在设备控制页建立连接后端service层在设备状态变更时主动推送。这项改造不必改动现有接口属于增量开发风险不大足够写进LW的“系统优化与展望”章节。这些年我经手过不少以“智能家居”为题的java项目最深的体会是跑通源码只是第一步能讲清楚每个模块为什么这么设计才是毕业设计的真正价值。先把这套系统从zip变成能本地运行的项目再按自己的理解给某个模块做一次小改造答辩时的底气就完全不一样了。希望帮到你。本文还有配套的精品资源点击获取
