雜貨店牌智能家居系統實操手冊
手冊大綱
第一章 前后端分離的Web專案
1.1前端開發
- 前端開發概述
- 技術分析
- 資料準備
- 環境搭建
- 實作基本頁面搭建
- 配套教學視頻鏈接
1.2后端開發
- 后端概述
- 技術分析
- 資料準備
- 環境搭建
- 實作基本功能框架
- 配套教學視頻鏈接
第二章 安卓APP開發指南
- 需求分析
- 開發目標
- 搭建環境
- 實作簡單的界面
- 實作功能
- 配套教學視頻鏈接
第三章 基于WiFi芯片的開源硬體
- Ardiono篇（UNO、Esp8266）
- STM32篇（FreeRTOS）
- 配套教學視頻鏈接
第四章 幫你監管系統的QQ機器人
- QQ機器人的優點
- Python開發框架
- 開發環境的搭建
- 實作基礎功能
- 配套教學視頻鏈接
第五章 系統優化技術
- 日志
- 介面的封裝
- 報錯的統一管理
- 事務回滾
正文
第一章 前后端分離的Web專案
Web專案我們使用當下流行的開源框架搭建，采用前后端分離的技術來完成Web專案的搭建！
1.1前端開發
-
前端開發概述
前端開發店長水平有限，只能實作基本的功能，正因為本開發手冊，是為了讓大家能夠獨自完成簡單的智能家居系統的搭建而撰寫的，所以，也會盡量的使用基礎的開發能力，來讓大多數人都有跟上的機會！如果有大佬或者同學愿意加入本系統的開發，那是最好不過了！歡迎大家，一起研究我們自己的開源系統~
-
技術分析
首先，介紹一下前端開發的技術：
前端開發使用組件化開發的Vue框架，我們能夠站在開源的平臺，搭建屬于自己的專案，對于搭建前端的界面，我們的需求就是隨心所欲的搭建自己想要的界面，滿足我們所想要的功能，利用現成的組件開發，無異于讓我們專注于對頁面的開發實作和對頁面跳轉邏輯的設計！讓我們的時間盡可能的用于構思我們的系統，而不用在意具體的css樣式是如何實作的或者html的標簽的書寫，以上這兩者都是店長懶得學的東西，哈哈哈哈哈！但是做前端的同學也很棒，我所熟知的同學，能夠按照設計師的樣式，獨立寫出頁面的設計，讓我羞愧不已！
上面已經提到了組件化開發，我們接下來就仔細的說說，什么是組件化開發？就我們系統開發的需求來看，就是使用現成的UI控制元件：按鈕、輸入框、下拉框來實作我們自己的界面，組件大多具有：簡潔、可復用、易修改的特點，這樣開發出來的界面，簡潔大方！
我們系統選用的UI組件是：Element-UI來嵌入Vue專案！到此為止，我們需要記得的知識點有：Element-UI、Vue開發框架！接下來我們就開始我們的探索之旅啦！！！
-
資料準備
不管我們開始學習什么內容，官網都是第一位的資料庫！對于一個好的開源框架，官網的資料豐不豐富，相關生態的建設完不完善、開發者是否活躍，這些都是很關鍵的要素！我們選擇的Vue開發框架，相信只要是接觸過的前端的同學都有所耳聞，實踐證明Vue是一款非常優秀的開源框架，社區擁有眾多活躍的開發者，在各大博客網站和技術分享網站，比如：CSDN、Github、Gitee、簡書等網站擁有眾多解決方案和思路！在我們遇到問題時，可以快速的查找到相關的資料，來幫助我們解決問題，相信2021年的大家更加懂得生態的重要性，
Element-Ui組件庫，也是非常經典的解決方案，我們可以快速便捷的開發出簡潔大方、功能齊全的頁面，實作設計好的復雜邏輯！在JSP時代是想都不敢想的！
下面就是專案前端開發的資料的下載方式和相關網站：
雜貨店牌智能家居系統實操手冊：
Node.js官網
Vue-Cli官網
Element-UI官網
CSDN
簡書
百度
-
環境搭建
- 百度搜索“Node.js”，進入官網：https://nodejs.org/zh-cn/
- 下載長期支持版
- 找到下載的安裝軟體
- 雙擊–>進行安裝：
輸入“node -v”，如果回傳版本號，即安裝成功！
同時會安裝“npm”
接下來安裝“cnpm”：
npm install -g cnpm --registry=https://registry.npm.taobao.org
到這里，我們電腦上的node.js和cnpm就全部安裝完成了！
5.百度搜索“Vue-cli”，進入Vue腳手架官網：https://cli.vuejs.org/zh/
cnpm install -g @vue/cli “-g 全域安裝”
測驗一下是否安裝成功：
到這里，前端開發的環境就全部搭建完成了，開發工具可以選擇VSCode或者IDEA，店長使用的是VSCode，我們就以VSCode為例！
從官網下載VSCode：https://code.visualstudio.com/
-
實作基本頁面搭建
Windows下，在搜索框輸入“cmd”，打開命令列視窗，輸入“vue-ui”命令，
打開圖形化配置界面，這是Vue3.0以上支持的一種圖形化界面配置方式，圖形化配置方式依賴于打開的命令列視窗，關閉上面的視窗，圖形化界面也會終止，
接下來等待片刻，這樣一個Vue專案工程就創建好了······
彈出如下對話框時，請相信自己！
點擊專案的檔案夾區域，右鍵選擇在繼承終端中打開：
使用“cd …”回退到Vuetest（專案檔案夾下）：
使用指令：“npm run serve” 運行程式：
”Ctrl + 滑鼠左鍵點擊“ ------ 打開網址訪問 http://localhost:8080
到這里，我們的前端基本開發準備作業就已經做好啦！！！
-
配套教學視頻鏈接：https://space.bilibili.com/383001841
1.2后端開發
-
后端概述
后端開發我們只是需要用到一些基礎的SpringBoot開發框架的使用方法，店長更希望大家一起來完善它的功能使它更加強大，前端通過axios方法呼叫后端的介面，后端實作介面，完成對資料的增刪改查，在后端的開發中，秉持著SpringBoot的理念，盡可能簡化對增刪改查的Sql陳述句的書寫，我們使用包裝好的 JpaRepository類，進行對資料庫的操作，
-
技術分析
首先我們，介紹一下在專案后端開發程序中，我們需要用到的技術條件，在專案中，我們使用SpringBoot框架對專案進行工程化開發，我們選擇匯入框架封裝好的資料庫操作類JPA，完成對 MySql 資料庫的增刪改查：
import org.springframework.data.jpa.repository.JpaRepository;
創建物體類來和表，進行系結！
-
資料準備
-
環境搭建
-
實作基本功能框架
-
配套教學視頻鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/292128.html
標籤：其他
上一篇：物聯網開發總結