DEV Community

codemee
codemee

Posted on • Edited on

在 MicroPython WebServer 上使用文件資料夾與樣板檔

上一篇文章 中我們介紹了 ESP8266/ESP32 通用的 MicroPython WebServer 模組, 在這一篇文章中, 我們會再說明這個 ESP8266WebServer 模組得其他功能。

文件資料夾

如果你希望能夠直接傳回 HTML 檔給用戶端, 那麼也可以將 HTML 檔集中放置在單一資料夾中, 並設定當請求的路徑存在於此資料夾時, 就直接傳回該路徑的檔案。例如:

ESP8266WebServer.setDocPath("/www2")
Enter fullscreen mode Exit fullscreen mode

並在 www2 資料夾下放置如下的 index.html 檔:

<html>
    <body>
        <h1>This is index.html</h1>
    </body>
<html>
Enter fullscreen mode Exit fullscreen mode

就可以在瀏覽器中用指定檔名路徑的方式傳回 HTML 檔案了:

其實如果請求的路徑符合文件資料夾路徑, 但沒有指定檔案的話, ESP8266WebServer 模組也會幫你自動搜尋該路徑下是否有 index.html 檔案:

樣板檔

你也可以在 HTML 檔中加入實際傳回前要替換內容的置換變數, 例如以下的 index.p.html:

<html>
    <body>
        <h1>Status:{status}</h1>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

其中, 以大括號括起來的就是要置換的變數, 用法如同 Python 字串的 format。含有置換變數的 HTML 檔案必須以 p.html 結尾, 並且要在 Python 程式中提供一個字典物件做為替換內容, 字典內的索引鍵就是置換變數的名稱, 該置換變數就會在送出前被置換成對應的值:

ledData = {
    "status":"Off",
}
ESP8266WebServer.setTplData(ledData)
Enter fullscreen mode Exit fullscreen mode

我們只要在切換 LED 亮滅的時候同步更新 ledData 中的內容, 就可以讓 index.p.html 實際送出的內容跟著更新了:

def handleCmd(socket, args):
    global ledData
    if 'led' in args:
        if args['led'] == 'on':
            ledData["status"]="ON"
            pin.off()
        elif args['led'] == 'off':
            ledData["status"]="OFF"
            pin.on()
        ESP8266WebServer.ok(socket, "200", args["led"])
    else:
        ESP8266WebServer.err(socket, "400", "Bad Request")

Enter fullscreen mode Exit fullscreen mode

把 index.p.html 上傳到控制板的 www2 資料夾下, 現在我們就可以這樣操作:

  1. 首先請求 www2/index.p.html:

    你可以看到預設的狀態是 OFF。

  2. 接著我們點亮 LED:

    傳回的 on 表示控制板已經接收到指令, 所以這時內建的 LED 就會亮起來。

  3. 再次請求 /www2/index.p.html, 就會看到狀態現在變成 OFF 了:

ESP8266WebServer 模組也會自動找尋文件資料夾下的 index.p.html 檔案, 但是會以 index.html 檔優先。

結語

有了本篇介紹的功能, ESP8266WebServer 模組就可以更方便的應用在許多情境下, 這就有待各位盡情發揮了。

Top comments (0)