Building an IoT/Smart Home System with SpringBoot and Vue

Introduction

Wumei Smart is an open-source software and hardware system that can be used for secondary development and learning, allowing you to quickly build your own IoT/smart home system. Hardware engineers can integrate their devices into the system; software engineers can familiarize themselves with hardware-software interaction using the devices in the project.

Project Architecture

The server uses Spring Boot, MySQL, and Redis for the database, Vue for the front end, Android for the mobile end, and ESP-IDF and Arduino for the hardware end. The hardware-software interaction is based on the MQTT protocol, using the EMQ broker. The system architecture diagram is as follows:

Hardware End

The hardware end provides access documentation and requires devices to support network functionality. The project includes hardware code and access examples for ESP-IDF and Arduino. An intelligent switch (WiFi switch) board has also been created for learning and everyday use, capable of controlling electrical devices under 2500W.

• Remote control via mobile phone and computer

• Remote pairing, clearing codes, and control

• Air temperature and humidity monitoring

• Radar sensing and alarm

• 220V and 5V power supply, resistive load 2500W, inductive load 250W

Reference Cases

Using NodeMCU development board to create an intelligent switch:

Using WiFi controller and LED board to create a colorful smart light:

Technology Stack

Backend

• Related technologies: Spring Boot, MyBatis, Spring Security, JWT, MySQL, Redis, MongoDB, MQTT, etc.

• Development tools: IDEA

Frontend

• Related technologies: ES6, Vue, Vuex, Vue-router, Vue-cli, Axios, Element-ui, etc.

• Development tools: Visual Studio Code

Android

• Related technologies: XUI, XPage, XAop, XHttp2, etc.

• Development tools: Android Studio

Hardware End

• Related technologies: ESP-IDF, Arduino, FreeRTOS, etc.

• Development tools: Visual Studio Code

System Screenshots

Source code: gitee.com/kerwincui/wumei-smart

Recommended a super simple Java graphical verification code module

Share a real-time monitoring data platform for payment screens

Recommended a refreshing real-time monitoring screen with installation tutorial

Metabase integrated into Java project for big screen monitoring

An amazing Java file online preview project

How to ensure 100% message delivery success and message idempotency

For technical people, the more you do, the further you can go

Traditional Kung Fu, just enough, no sneak attacks this time!

A fresh front-end and back-end separated management system

An open-source free license plate recognition training practical project

Share 74 stunning monitoring screens

A data visualization big screen project based on Vue3.x

Recommended a poster generator for e-commerce based on Vue

SpringBoot rapid API development framework

Smart parking management platform based on SpringBoot + Vue

Reply with “Smart Home” to get it