黄哒哒1. 项目概述：智能家居系统的技术架构与核心价值
这套基于Java SpringBoot+Vue3+MyBatis的智能家居系统源码，代表了当前企业级全栈开发的典型实践方案。作为前后端分离架构的落地案例，它完美融合了后端服务的稳定性与前端交互的灵活性。系统采用MySQL作为数据存储引擎，实现了从设备控制到用户管理的完整闭环。
在实际部署场景中，这类系统通常需要处理三类核心需求：
- 设备接入层：通过MQTT/WebSocket协议与智能硬件通信
- 业务逻辑层：实现用户权限、设备联动、场景模式等核心功能
- 数据展示层：提供可视化操作界面和实时数据反馈
技术选型提示：SpringBoot 2.7.x + Vue3.2的组合是目前最稳定的版本搭配，避免直接使用SpringBoot 3.x可能带来的兼容性问题
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 核心技术栈深度解析
2.1 SpringBoot后端设计要点
后端工程采用经典的三层架构设计：
code复制com.smarthome
├── config # 安全配置/跨域处理
├── controller # 设备/用户API入口
├── service # 业务逻辑实现
│ ├── impl # 接口实现类
├── dao # MyBatis映射接口
├── entity # 数据库实体类
└── util # 通用工具包
关键配置示例（application.yml）：
yaml复制spring:
datasource:
url: jdbc:mysql://localhost:3306/smart_home?useSSL=false
username: root
password: 加密密码建议使用Jasypt
jackson:
date-format: yyyy-MM-dd HH:mm:ss
time-zone: GMT+8
mybatis:
mapper-locations: classpath:mapper/*.xml
configuration:
map-underscore-to-camel-case: true
2.2 Vue3前端工程化实践
前端项目采用Vite4构建工具，主要模块划分：
code复制src/
├── api # Axios请求封装
├── assets # 静态资源
├── components # 通用组件
│ ├── devices # 设备控制组件
│ └── charts # 数据可视化组件
├── router # 路由配置
├── store # Pinia状态管理
└── views # 页面组件
设备控制组件典型代码（DeviceCard.vue）：
vue复制<script setup>
const props = defineProps({
device: {
type: Object,
required: true
}
})
const switchStatus = ref(props.device.status)
const handleControl = async () => {
try {
await controlDevice(props.device.id, switchStatus.value)
} catch (e) {
ElMessage.error('控制指令发送失败')
switchStatus.value = !switchStatus.value
}
}
</script>
2.3 MyBatis优化技巧
- 动态SQL处理：
xml复制<select id="selectDevicesByCondition" resultType="Device">
SELECT * FROM device
<where>
<if test="roomId != null">
AND room_id = #{roomId}
</if>
<if test="type != null">
AND type = #{type}
</if>
</where>
ORDER BY create_time DESC
</select>
- 批处理操作优化：
java复制@Transactional
public void batchInsertDevices(List<Device> devices) {
deviceMapper.batchInsert(devices);
}
对应Mapper.xml配置：
xml复制<insert id="batchInsert" useGeneratedKeys="true" keyProperty="id">
INSERT INTO device (name, type, status) VALUES
<foreach collection="list" item="item" separator=",">
(#{item.name}, #{item.type}, #{item.status})
</foreach>
</insert>
3. 数据库设计与性能优化
3.1 核心表结构设计
sql复制CREATE TABLE `device` (
`id` bigint NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL COMMENT '设备名称',
`type` tinyint NOT NULL COMMENT '1-灯光 2-空调 3-窗帘',
`status` tinyint DEFAULT '0' COMMENT '0-关闭 1-开启',
`room_id` bigint DEFAULT NULL,
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_room` (`room_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
CREATE TABLE `device_log` (
`id` bigint NOT NULL AUTO_INCREMENT,
`device_id` bigint NOT NULL,
`operation` varchar(20) NOT NULL,
`operator` bigint NOT NULL COMMENT '用户ID',
`create_time` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
KEY `idx_device` (`device_id`),
KEY `idx_time` (`create_time`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3.2 查询性能优化方案
- 建立复合索引：
sql复制ALTER TABLE device_log ADD INDEX idx_device_time (device_id, create_time);
- 大数据量表采用分库分表策略：
java复制// 按月份分表逻辑示例
public String getTableName(Long deviceId) {
LocalDate now = LocalDate.now();
return "device_log_" + now.getYear() + "_" + now.getMonthValue();
}
- 使用Explain分析慢查询：
sql复制EXPLAIN SELECT * FROM device WHERE room_id = 5 AND status = 1;
4. 系统集成与部署实战
4.1 前后端联调要点
- 跨域解决方案（SpringBoot配置）：
java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.maxAge(3600);
}
}
- Axios请求拦截器示例：
javascript复制const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_API,
timeout: 10000
})
service.interceptors.request.use(config => {
const token = localStorage.getItem('token')
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
})
4.2 生产环境部署方案
- 后端打包与启动：
bash复制# 打包
mvn clean package -DskipTests
# 启动
java -jar -Xms512m -Xmx1024m smart-home.jar --spring.profiles.active=prod
- 前端Nginx配置：
nginx复制server {
listen 80;
server_name smarthome.example.com;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://127.0.0.1:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
5. 典型问题排查手册
5.1 设备状态不同步问题
现象：前端显示状态与实际设备状态不一致
排查步骤：
- 检查WebSocket连接状态
- 验证MQTT消息是否正常送达
- 查看设备日志确认指令执行情况
- 检查数据库状态字段更新是否成功
解决方案：
java复制// 设备状态同步逻辑示例
@Scheduled(fixedRate = 30000)
public void syncDeviceStatus() {
List<Device> offlineDevices = deviceMapper.selectOfflineDevices();
offlineDevices.forEach(device -> {
Boolean realStatus = iotService.getRealStatus(device.getId());
deviceMapper.updateStatus(device.getId(), realStatus);
});
}
5.2 高并发场景优化
- 使用Redis缓存设备状态：
java复制@Cacheable(value = "device", key = "#deviceId")
public Device getDeviceStatus(Long deviceId) {
return deviceMapper.selectById(deviceId);
}
- 消息队列削峰处理：
java复制@RabbitListener(queues = "device.control")
public void processControlMessage(ControlMessage message) {
deviceService.executeControl(message);
}
- 数据库连接池配置（application.yml）：
yaml复制spring:
datasource:
hikari:
maximum-pool-size: 20
minimum-idle: 5
connection-timeout: 30000
6. 扩展功能开发指南
6.1 语音控制集成
- 阿里云语音服务接入示例：
java复制public class VoiceControlService {
public String processVoiceCommand(String speech) {
// 调用阿里云语音识别API
String text = aliyunNlpClient.asr(speech);
return executeVoiceCommand(text);
}
}
- 前端语音输入组件：
vue复制<template>
<button @mousedown="startRecording" @mouseup="stopRecording">
按住说话
</button>
</template>
<script setup>
const startRecording = () => {
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
// 初始化录音处理
})
}
</script>
6.2 自动化场景实现
场景规则配置表示例：
json复制{
"sceneName": "离家模式",
"triggers": [
{
"type": "geo",
"condition": "userLocation>500m"
}
],
"actions": [
{
"deviceId": 1,
"command": "turnOff"
}
]
}
对应的规则引擎处理逻辑：
java复制public void checkSceneRules(DeviceTrigger trigger) {
List<Scene> scenes = sceneMapper.selectByTriggerType(trigger.getType());
scenes.forEach(scene -> {
if (scene.checkConditions(trigger)) {
scene.executeActions();
}
});
}
在完成核心功能开发后，建议添加设备健康监测模块，定期检查设备在线状态和响应延迟。对于智能家居系统而言，实时性的保证往往比功能丰富度更重要。我在实际部署中发现，采用WebSocket长连接配合心跳检测机制，能够将状态同步延迟控制在500ms以内，这比传统的轮询方式效率提升80%以上