步驟1：關(guān)于這個(gè)項(xiàng)目

這是一個(gè)使用ESP8266（NodeMCU）wifi模塊開發(fā)的物聯(lián)網(wǎng)項(xiàng)目。該項(xiàng)目的動(dòng)機(jī)是在模塊上創(chuàng)建一個(gè)可以通過網(wǎng)絡(luò)托管多個(gè)客戶端的Web服務(wù)器。在這里，需要了解html和javaScript的基本知識(shí)才能理解我的項(xiàng)目。我將在這里討論關(guān)于ESP8266和javaScript的一些高級(jí)主題是：

1。上傳ESP8266的SPIFFS上的文件，以便在我們的arduino代碼中更有效地使用這些文件。

2。使用javaScript進(jìn)行Web存儲(chǔ)

SPIFFS

到目前為止，我們始終將網(wǎng)頁的HTML包含為字符串我們的草圖中的文字。這使得我們的代碼非常難以閱讀，并且您將很快耗盡內(nèi)存。

SPIFFS是一款輕量級(jí)文件系統(tǒng)，適用于帶有閃存芯片的微控制器。 ESP8266的板載閃存芯片為您的網(wǎng)頁提供了充足的空間，特別是如果您擁有1MB，2MB或4MB版本。您可以通過以下鏈接了解如何在arduino軟件中添加用于將文件上載到SPIFFS的工具：http：//esp8266.github.io/Arduino/versions/2.0.0/d 。..。

In這個(gè)項(xiàng)目，我有2個(gè)html文件和一個(gè)javascript文件。所有這些文件都上傳到與草圖分離的SPIFFS，以便這些文件中的更改獨(dú)立于主草圖。

這兩個(gè)html文件都是由prepareFile（）檢索的，如下所示：

void prepareFile（）{

bool ok = SPIFFS.begin（）;

if （ok） { File f = SPIFFS.open（“/index.html”， “r”）;

File f1=SPIFFS.open（“/index1.html”，“r”）;

data = f.readString（）; data1=f1.readString（）;

f.close（）; f1.close（）;

} else

Serial.println（“No such file found.”）;

}

當(dāng)使用loadScript（）讀取javascript文件時(shí)，如下所示：

void loadScript（String path，String type）{

if（SPIFFS.exists（path））{

File file=SPIFFS.open（path，“r”）;

server.streamFile（file，type）;

}

}

Web應(yīng)用程序的本地存儲(chǔ)

您可以了解如何使用不同的本地存儲(chǔ)對(duì)象和方法HTML5使用以下文章中的javascript：http：//diveintohtml5.info/storage.html。我將在工作部分的項(xiàng)目中討論本地存儲(chǔ)的使用。

步驟2：需要硬件

NodeMCU ESP8266 12E Wifi模塊

無焊面包板

跳線

7 Segent Display（共陰極）

1K歐姆電阻器

微型USB電纜（用于將NodeMCU與計(jì)算機(jī)連接）

第3步：電路和連接

連接非常簡單。在上面的電路圖中，nodemcu的引腳以下列方式連接：

A - 》 D1

B - 》 D2

C - 》 D3

D - 》 D4

E - 》 D6

F - 》 D7

G - 》 D8

其中A，B，C，D，E＆F是7段顯示的片段

。忽略7段顯示的DP。不要將它與ESP的引腳D5連接

步驟4：工作

如前所述，我們有兩個(gè)html文件。其中一個(gè)是當(dāng)ESP8266服務(wù)器收到“/”時(shí)調(diào)用的根html頁面，即如果請(qǐng)求URI‘/’，服務(wù)器應(yīng)該回復(fù)HTTP狀態(tài)代碼200（確定），然后發(fā)送帶有“索引”的響應(yīng)。 html“file。

當(dāng)客戶端通過在表單上提交輸入請(qǐng)求來自根頁面時(shí)，將發(fā)送第二個(gè)html文件。一旦服務(wù)器從表單獲取輸入POSTED，它將它與固定字符串值進(jìn)行比較并發(fā)送第二個(gè)html頁面作為響應(yīng)。

if（server.arg（“nam”） == “0”） {

server.send（200， “text/html”， data1）;

sevenSeg（0）; }

由于第二頁的html不是在草圖中定義，所以這里我們引用已經(jīng)使用SPIFFS讀取html代碼的“data1”。讀取

File f1=SPIFFS.open（“/index1.html”，“r”）;

data1=f1.readString（）;

這里也調(diào)用參數(shù)為“0”的sevenSeg（） “通過打開和關(guān)閉不同的段，可以用它來顯示”0“。在這里，我做了自我解釋的功能，即onA（）將打開面包板上7段顯示的A段，同樣offA將關(guān)閉它。

因此，在這種情況下顯示“0 “，我們必須切換除G以外的所有段（DP被忽略，因?yàn)樗鼪]有連接到ESP8266的任何引腳）。所以我的函數(shù)看起來像：

if（num==0）{

onA（）; onB（）; onC（）; onD（）; onE（）; onF（）;

offG（）;

}

第5步：HTML和JAVASCRIPT代碼

索引.html有一個(gè)畫布，在關(guān)閉模式下顯示7段，并在其下方形成。這是你打開它后看到的：

如果我們想要使用沒有ESP8266的網(wǎng)頁，可以通過更改表單的action屬性中的鏈接來實(shí)現(xiàn)。目前這是行動(dòng)中的鏈接：

在這里你可以看到實(shí)際的鏈接是連接到任何wifi（或熱點(diǎn)）后分配給你的nodeMCU的同一個(gè)ip地址。調(diào)整后的表單標(biāo)記如下所示：

這里，我使用瀏覽器的web stroge來存儲(chǔ)用戶的輸入值，以便在index.html中輸入的值存儲(chǔ)在本地瀏覽器（如cookie）。該值由index1.html獲取，數(shù)字顯示在html畫布上的7段顯示中。您可以通過以下視頻了解此過程：

video_attach

第6步：關(guān)鍵注釋

如果您注意以下幾點(diǎn)，該項(xiàng)目將與您的nodemcu一起使用：

1。 root html文件的action屬性中的鏈接應(yīng)為“http：//（串行監(jiān)視器上的IP或分配給ESP的IP）/submit”。

2。使用支持html5和新標(biāo)簽和功能的最新版瀏覽器。

3。僅當(dāng)index.html，index1.html和main.js放在數(shù)據(jù)文件夾中時(shí)，SPIFFS才有效。您可以從我的github克隆代碼文件

步驟7：CODE

這是該庫的存儲(chǔ)庫鏈接我的項(xiàng)目代碼。如果您正在使用ESP8266中的SPIFFS，您可以理解為什么我將html和javascript文件放在數(shù)據(jù)文件夾中。請(qǐng)使用它。

GitHub存儲(chǔ)庫鏈接