步驟1：關于這個項目

這是一個使用ESP8266（NodeMCU）wifi模塊開發的物聯網項目。該項目的動機是在模塊上創建一個可以通過網絡托管多個客戶端的Web服務器。在這里，需要了解html和javaScript的基本知識才能理解我的項目。我將在這里討論關于ESP8266和javaScript的一些高級主題是：

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

2。使用javaScript進行Web存儲

SPIFFS

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

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

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

這兩個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.”）;

}

當使用loadScript（）讀取javascript文件時，如下所示：

void loadScript（String path，String type）{

if（SPIFFS.exists（path））{

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

server.streamFile（file，type）;

}

}

Web應用程序的本地存儲

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

步驟2：需要硬件

NodeMCU ESP8266 12E Wifi模塊

無焊面包板

跳線

7 Segent Display（共陰極）

1K歐姆電阻器

微型USB電纜（用于將NodeMCU與計算機連接）

第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：工作

如前所述，我們有兩個html文件。其中一個是當ESP8266服務器收到“/”時調用的根html頁面，即如果請求URI‘/’，服務器應該回復HTTP狀態代碼200（確定），然后發送帶有“索引”的響應。 html“file。

當客戶端通過在表單上提交輸入請求來自根頁面時，將發送第二個html文件。一旦服務器從表單獲取輸入POSTED，它將它與固定字符串值進行比較并發送第二個html頁面作為響應。

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

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

sevenSeg（0）; }

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

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

data1=f1.readString（）;

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

因此，在這種情況下顯示“0 “，我們必須切換除G以外的所有段（DP被忽略，因為它沒有連接到ESP8266的任何引腳）。所以我的函數看起來像：

if（num==0）{

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

offG（）;

}

第5步：HTML和JAVASCRIPT代碼

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

如果我們想要使用沒有ESP8266的網頁，可以通過更改表單的action屬性中的鏈接來實現。目前這是行動中的鏈接：

在這里你可以看到實際的鏈接是連接到任何wifi（或熱點）后分配給你的nodeMCU的同一個ip地址。調整后的表單標記如下所示：

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

video_attach

第6步：關鍵注釋

如果您注意以下幾點，該項目將與您的nodemcu一起使用：

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

2。使用支持html5和新標簽和功能的最新版瀏覽器。

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

步驟7：CODE

這是該庫的存儲庫鏈接我的項目代碼。如果您正在使用ESP8266中的SPIFFS，您可以理解為什么我將html和javascript文件放在數據文件夾中。請使用它。

GitHub存儲庫鏈接