# 在 MicroPython WebServer 上使用文件資料夾與樣板檔
###### tags: `MicroPython` `ESP32` `ESP8266`
在[上一篇文章](https://hackmd.io/38cuzkApQWuQ4j-rlDa2jg#ESP8266ESP32-%E9%80%9A%E7%94%A8%E7%9A%84-MicroPython-Web-Server) 中我們介紹了 ESP8266/ESP32 通用的 MicroPython WebServer 模組, 在這一篇文章中, 我們會再說明這個 ESP8266WebServer 模組得其他功能。
### 文件資料夾
如果你希望能夠直接傳回 HTML 檔給用戶端, 那麼也可以將 HTML 檔集中放置在單一資料夾中, 並設定當請求的路徑存在於此資料夾時, 就直接傳回該路徑的檔案。例如：
```python
ESP8266WebServer.setDocPath("/www2")
```
並在 www2 資料夾下放置如下的 index.html 檔：
```html
<html>
<body>
<h1>This is index.html</h1>
</body>
<html>
```
就可以在瀏覽器中用指定檔名路徑的方式傳回 HTML 檔案了：
其實如果請求的路徑符合文件資料夾路徑, 但沒有指定檔案的話, ESP8266WebServer 模組也會幫你自動搜尋該路徑下是否有 index.html 檔案：
### 樣板檔
你也可以在 HTML 檔中加入實際傳回前要替換內容的置換變數, 例如以下的 index.p.html：
```html
<html>
<body>
<h1>Status：{status}</h1>
</body>
</html>
```
其中, 以大括號括起來的就是要置換的變數, 用法如同 Python 字串的 format。含有置換變數的 HTML 檔案必須以 p.html 結尾, 並且要在 Python 程式中提供一個字典物件做為替換內容, 字典內的索引鍵就是置換變數的名稱, 該置換變數就會在送出前被置換成對應的值：
```python
ledData = {
"status":"Off",
}
ESP8266WebServer.setTplData(ledData)
```
我們只要在切換 LED 亮滅的時候同步更新 ledData 中的內容, 就可以讓 index.p.html 實際送出的內容跟著更新了：
```python
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")
```
把 index.p.html 上傳到控制板的 www2 資料夾下, 現在我們就可以這樣操作：
1. 首先請求 www2/index.p.html：
你可以看到預設的狀態是 OFF。
1. 接著我們點亮 LED：
傳回的 on 表示控制板已經接收到指令, 所以這時內建的 LED 就會亮起來。
1. 再次請求 /www2/index.p.html, 就會看到狀態現在變成 OFF 了：
ESP8266WebServer 模組也會自動找尋文件資料夾下的 index.p.html 檔案, 但是會以 index.html 檔優先。
### 結語
有了本篇介紹的功能, ESP8266WebServer 模組就可以更方便的應用在許多情境下, 這就有待各位盡情發揮了。
Sign in with Wallet
Connect another wallet