隨著物聯(lián)網(wǎng)產(chǎn)業(yè)的普及，眾多低成本的以太網(wǎng)類產(chǎn)品面市，大多數(shù)的產(chǎn)品基本使用中等資源的單片機(jī)平臺，如國產(chǎn)的沁恒的帶以太網(wǎng)類功能的單片機(jī)，此類單片機(jī)最大的特點(diǎn)是資源少，功能全，基于此類芯片開發(fā)的產(chǎn)品，產(chǎn)品使用時(shí)的配置往往采用資源占用較少的AT指令，或者私有配置協(xié)議來實(shí)現(xiàn)，本文主要介紹在此類單片機(jī)平臺上實(shí)現(xiàn)網(wǎng)頁配置的一種方法
實(shí)現(xiàn)網(wǎng)頁配置首先在flash資源上至少要有10-15k的空間，設(shè)備功能復(fù)雜度不可太高，拿NA111串口服務(wù)器舉例，串口服務(wù)器產(chǎn)品實(shí)現(xiàn)了基本的tcp/udp/http/mqtt網(wǎng)絡(luò)通訊功能，串口透傳以及注冊包心跳包等功能，參數(shù)總量較少，可以在網(wǎng)頁上實(shí)現(xiàn)所有參數(shù)的配置。
網(wǎng)頁實(shí)現(xiàn)的方法上，使用靜態(tài)網(wǎng)頁的方式，由于存儲容量有限，不可能實(shí)現(xiàn)太多的美化功能，也不能調(diào)用外部庫（考慮離線配置情況），且靜態(tài)網(wǎng)頁可以直接使用瀏覽器打開，除了ajax的請求外，界面渲染按鈕操作等均可直接在本地調(diào)試完成
網(wǎng)頁的源碼結(jié)構(gòu)上可以按照以下方式
-->index.html
-->style.css
-->a.js
-->b.js
-->dat1.json
-->dat2.json
html文件為主頁面，css文件為樣式表，a.js，b.js主要用于界面控制參數(shù)處理等，這幾種文件內(nèi)容固定，.json文件則為參數(shù)，屬于標(biāo)準(zhǔn)的json文件，內(nèi)容由設(shè)備即時(shí)生成；
在資源較少的平臺上，以上文件如果按照字符串?dāng)?shù)組存儲的話，其占用空間可能超過50k，所以在單片機(jī)上存儲時(shí)需要考慮壓縮文件形式，且http支持GZIP的壓縮格式傳輸文件，利用此方法，可以將內(nèi)容固定的部分文件通過專用的軟件將內(nèi)容進(jìn)行壓縮，生成數(shù)組，在單片機(jī)內(nèi)部進(jìn)行存儲即可，傳輸時(shí)，在http的返回頭上增加“content-type：gzip"字段，后直接將數(shù)組發(fā)出即可，瀏覽器可自動識別解壓文件
2. 服務(wù)器設(shè)計(jì)，同樣由于資源問題，設(shè)備上的服務(wù)器不可能做到移植網(wǎng)頁服務(wù)器框架，因此只能執(zhí)行設(shè)計(jì)，需要完成的工作如下
1）. HTTP協(xié)議解析庫：實(shí)現(xiàn)基本的post/get解析請求即可,文件請求類型需要支持：html/css/js/json,幾種類型，關(guān)于http報(bào)文的定義及解析可以百度參考：
2）.網(wǎng)絡(luò)收發(fā)支持，服務(wù)器主體框架：服務(wù)器樁主體框架主要實(shí)現(xiàn)數(shù)據(jù)收發(fā)部分、請求判定部分，流程如下
通過以上方式即可實(shí)現(xiàn)網(wǎng)頁操作
最終實(shí)現(xiàn)效果如下
今天的分享就到這里啦，EBYTE人每一天都致力于更好的助力物聯(lián)化、智能化、自動化的發(fā)展，提升資源利用率，更多產(chǎn)品更多資料，感興趣的小伙伴可以登錄我們的億佰特官網(wǎng)進(jìn)行了解，還有客服小姐姐在線答疑哦！
