這兩年MCU卷得厲害連一個(gè)溫控器都恨不得帶網(wǎng)頁配置界面。我在不少項(xiàng)目里把LWIP自帶的HTTPD當(dāng)作輕量級Web服務(wù)器用網(wǎng)頁資源則通過makefsdata.exe打包成C數(shù)組直接燒進(jìn)Flash。這條路走通之后產(chǎn)品調(diào)試時(shí)手機(jī)連上設(shè)備、瀏覽器一開就能改參數(shù)確實(shí)方便——但第一次走這條路的人十個(gè)有八個(gè)會(huì)卡在“HTML怎么變成C文件”這個(gè)環(huán)節(jié)。makefsdata.exe看著只是一個(gè)工具實(shí)際上它生成的東西能不能用取決于你對LWIP HTTPD的工作原理、文件組織、編碼細(xì)節(jié)了解多少。我自己也踩過不少坑從生成的文件編譯不過到網(wǎng)頁打開404再到中文全是亂碼一步步踩過來才弄明白。這篇文章就把這條鏈路逐段拆開講清楚配合makefsdata.exe使用教程幫大家少走彎路。適合正在用STM32、GD32這類MCU做LWIP聯(lián)網(wǎng)產(chǎn)品、想快速搞定網(wǎng)頁配置界面的工程師也適合剛接觸HTTPD的初學(xué)者。1. 先搞明白LWIP HTTPD為什么非要“C文件網(wǎng)頁”先說個(gè)很多人沒想通的問題為什么網(wǎng)頁不能像電腦上的Nginx那樣把HTML文件放到某個(gè)目錄里服務(wù)器自己去讀因?yàn)樵贛CU上沒有這套東西。1.1 MCU上的Web服務(wù)器不讀硬盤讀內(nèi)存LWIP是一個(gè)TCP/IP協(xié)議棧HTTPD是跑在它上面的一個(gè)小模塊。這個(gè)HTTPD非常輕量它默認(rèn)不依賴任何文件系統(tǒng)也不去讀SD卡、Flash里的某個(gè)目錄。它要的數(shù)據(jù)全部來自一個(gè)叫fsdata.c的C文件——網(wǎng)頁的每個(gè)字節(jié)都被轉(zhuǎn)成了C數(shù)組編譯后變成固件里的const數(shù)據(jù)。這樣設(shè)計(jì)的好處很明顯沒有文件系統(tǒng)就沒有路徑解析、沒有磁盤IO、沒有緩存管理整個(gè)HTTP服務(wù)器邏輯可以做到極簡。代價(jià)就是“更新一次網(wǎng)頁就得重新編譯固件”。我經(jīng)常跟人開玩笑說這相當(dāng)于把網(wǎng)頁塞進(jìn)了單片機(jī)的大腦里想改一個(gè)字都得給它重新“洗腦”。很多新手會(huì)在這時(shí)候犯一個(gè)錯(cuò)誤用各種在線工具把HTML轉(zhuǎn)成C數(shù)組然后直接往工程里塞。結(jié)果要么編譯不過要么瀏覽器打開完全不對。原因就是LWIP HTTPD期望的并不是單純的文件字節(jié)而是一個(gè)帶有HTTP響應(yīng)頭、文件長度、查找哈希的結(jié)構(gòu)體。makefsdata.exe正是干這個(gè)的。1.2 makefsdata.exe到底做了什么makefsdata.exe是LWIP官方contrib里提供的一個(gè)命令行工具它的核心邏輯其實(shí)非常簡單掃描指定目錄下的所有網(wǎng)頁文件逐字節(jié)讀取每個(gè)文件轉(zhuǎn)成十六進(jìn)制C數(shù)組為每個(gè)文件生成一個(gè)fsdata_file結(jié)構(gòu)體多個(gè)文件通過指針串成鏈表為每個(gè)文件生成對應(yīng)的HTTP響應(yīng)頭包含狀態(tài)行、Content-Type、Content-Length等輸出到fsdata.c并定義FS_ROOT指向鏈表的第一個(gè)文件。如果你懂C語言文件讀寫完全可以自己寫一個(gè)工具fopen讀文件fread進(jìn)緩沖區(qū)再逐字節(jié)printf成0xXX。很多人也這么干過但自己寫很容易漏掉HTTP頭和文件哈希這些關(guān)鍵細(xì)節(jié)。理解它本質(zhì)上就是一個(gè)“文件讀取格式化輸出”的過程之后makefsdata.exe就不再神秘了遇到問題也知道該往哪個(gè)方向排查。另外提醒一句makefsdata.exe生成的數(shù)據(jù)默認(rèn)是const的也就是說這些網(wǎng)頁數(shù)據(jù)最終會(huì)被放進(jìn)Flash而不是RAM。如果你拿到的某個(gè)轉(zhuǎn)換工具生成的是非const數(shù)組或者你為了改網(wǎng)頁方便故意把const去掉在RAM緊張的MCU上會(huì)非常酸爽——分分鐘超內(nèi)存。2. 開工前準(zhǔn)備網(wǎng)頁目錄與lwipopts.h配置很多人拿到makefsdata.exe就直接對著網(wǎng)頁文件夾一頓操作結(jié)果生成的文件各種不對。我建議先花5分鐘把網(wǎng)頁目錄理順再把LWIP的配置宏檢查一遍后面會(huì)省很多事。2.1 網(wǎng)頁文件應(yīng)該怎么組織才不容易翻車先說目錄結(jié)構(gòu)。我的經(jīng)驗(yàn)是“能平則平能少則少”。下面是我常用的一個(gè)示例C:\web\ index.html style.css app.js logo.png盡量把所有資源放在根目錄不要搞五六層子目錄。原因后面會(huì)詳細(xì)說LWIP HTTPD對路徑的處理非常原始目錄層級越多越容易出幺蛾子。文件命名規(guī)則更關(guān)鍵全部用小寫字母不要有空格不要有中文不要有特殊字符下劃線可以但沒必要首頁必須叫index.html。CSS、JS、圖片能合并就合并。很多MCU的HTTPD并發(fā)連接數(shù)非常有限一個(gè)網(wǎng)頁如果引了10個(gè)外部資源瀏覽器就得建立10次TCP連接。每次握手、斷開在MCU上都是有開銷的頁面打開慢不說還容易把連接數(shù)耗盡。所以我的建議是如果頁面不大干脆把CSS和JS都內(nèi)聯(lián)到HTML里只保留一兩個(gè)必要的外部文件。圖片是大頭。一個(gè)幾百KB的PNG放進(jìn)固件Flash直接爆掉。能用CSS畫的圖標(biāo)就不要用圖片必須用的圖盡量壓縮到幾KB以內(nèi)。記住makefsdata.exe是不壓縮的HTML多大生成的C數(shù)組就多大。2.2 關(guān)鍵配置宏先改對再折騰LWIP HTTPD的行為基本靠lwipopts.h里的宏控制。經(jīng)常有人makefsdata生成的文件沒問題但網(wǎng)頁就是打不開最后發(fā)現(xiàn)是宏沒開對。這里列一份最基礎(chǔ)的清單#define LWIP_TCP 1 #define LWIP_HTTPD 1 #define LWIP_HTTPD_CUSTOM_FILES 0 #define LWIP_HTTPD_DYNAMIC_HEADERS 0 #define LWIP_HTTPD_MAX_REQ_LENGTH 1024幾個(gè)宏的含義LWIP_HTTPD總開關(guān)不開這個(gè)HTTPD根本不工作LWIP_HTTPD_CUSTOM_FILES如果為0HTTPD使用fsdata.c里的靜態(tài)文件如果為1你需要自己實(shí)現(xiàn)文件讀取接口比如接到LittleFS上。我們這篇文章走默認(rèn)的0LWIP_HTTPD_DYNAMIC_HEADERS如果為0HTTP響應(yīng)頭直接用makefsdata生成好的如果為1可以動(dòng)態(tài)修改響應(yīng)頭但需要額外寫httpd_custom_headers函數(shù)LWIP_HTTPD_MAX_REQ_LENGTH請求URL和GET參數(shù)的最大長度。默認(rèn)值在某些版本里只有128如果你用GET方式提交一個(gè)比較長的表單參數(shù)會(huì)被截?cái)?。我一般調(diào)到1024以上。如果你后面打算做動(dòng)態(tài)數(shù)據(jù)刷新或表單提交還要提前規(guī)劃這兩個(gè)宏#define LWIP_HTTPD_SSI 1 #define LWIP_HTTPD_CGI 1這兩個(gè)宏我放在第5章詳細(xì)講這里先記住一個(gè)原則先讓靜態(tài)頁面跑通再上SSI和CGI。一上來全開出了問題都不知道該查哪邊。3. makefsdata.exe從編譯到使用完整實(shí)操這一章是很多人點(diǎn)進(jìn)來最想看的我盡量寫得能直接“抄作業(yè)”。3.1 工具從哪來源碼編譯 vs 現(xiàn)成exemakefsdata并沒有一個(gè)官方發(fā)布的獨(dú)立安裝包它是以源碼形式放在LWIP contrib倉庫里的。路徑是lwip-contrib/apps/httpd/makefsdata/里面有一個(gè)makefsdata.c文件你需要自己把它編譯成可執(zhí)行文件。Windows下最簡單的編譯方式裝一個(gè)MinGW-w64然后gcc -o makefsdata.exe makefsdata.c如果沒有MinGW用Visual Studio的開發(fā)者命令行也可以cl makefsdata.c編譯好的makefsdata.exe只有幾十KB放哪個(gè)目錄都行。另外很多開發(fā)板的SDK里會(huì)自帶編譯好的版本比如ESP8266的NONOS SDK、某些STM32網(wǎng)絡(luò)例程包里都有搜一下就能找到。還有一個(gè)常見問題老版本的makefsdata.c在Windows下編譯會(huì)報(bào)gettimeofday未定義。這很正常畢竟這工具當(dāng)年是在Linux環(huán)境下開發(fā)的。遇到這種情況要么換成新版本我建議直接用lwip-contrib最新release要么在源碼里加一個(gè)Windows下的時(shí)間函數(shù)補(bǔ)丁但沒必要直接換新版最省事。3.2 命令行正確姿勢參數(shù)、路徑和踩坑先一句話說清楚makefsdata的用法在不同版本里略有差異拿到工具后先執(zhí)行makefsdata.exe -h看一下參數(shù)說明。常見用法是這樣的makefsdata.exe -s C:\web -f fsdata.c這條命令的意思是把C:\web目錄下的所有文件打包輸出到fsdata.c。常用參數(shù)有參數(shù)作用-s dir指定網(wǎng)頁源目錄-f file指定輸出的C文件名默認(rèn)是fsdata.c-d dir指定輸出目錄-i忽略文件名大小寫匹配-v輸出詳細(xì)日志執(zhí)行后如果一切正常屏幕上會(huì)列出掃描到的文件最后生成一個(gè)fsdata.c。這里有幾個(gè)我踩過的坑特意說一下路徑不要帶中文和空格。我一開始把網(wǎng)頁目錄放在C:\Users\張三\Desktop\網(wǎng)頁結(jié)果工具要么找不到目錄要么生成異常。后來統(tǒng)一改成C:\web這種純英文路徑問題消失。Windows路徑里有空格時(shí)記得用引號括起來但最好還是別用。在cmd里跑別在PowerShell里折騰。你要是習(xí)慣用PowerShell可能會(huì)遇到“無法加載文件因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本”之類的報(bào)錯(cuò)。那個(gè)報(bào)錯(cuò)大多是執(zhí)行策略限制腳本用的makefsdata是獨(dú)立exe雙擊或直接在cmd里跑就行。我的建議是這環(huán)節(jié)老老實(shí)實(shí)打開cmd別跟執(zhí)行策略較勁。多看一眼輸出日志。有時(shí)候你寫了3個(gè)文件makefsdata只掃到2個(gè)原因可能是其中一個(gè)文件在子目錄里但目錄為空或者文件名是中文被識別異常。跑完以后數(shù)一下文件數(shù)量對不對比你后面調(diào)試半天強(qiáng)。3.3 生成的fsdata.c該怎么讀現(xiàn)在打開生成的fsdata.c內(nèi)容大概長這樣不同LWIP版本有差異但思路一致#include lwip/apps/fs.h #include lwip/def.h static const unsigned char data_index_html[] { 0x3c, 0x21, 0x44, 0x4f, 0x43, 0x54, 0x59, 0x50, 0x45, 0x20, 0x68, 0x74, /* ... 后面是一大串十六進(jìn)制字節(jié) */ 0x00 }; static const struct fsdata_file file_index_html[] {{ file_NULL, data_index_html, data_index_html 4, sizeof(data_index_html) - 4, 1 }}; #define FS_ROOT file_index_html這個(gè)結(jié)構(gòu)體里的每個(gè)字段都不是隨便定義的第一個(gè)字段指向下一個(gè)fsdata_file的指針多個(gè)文件靠它串成鏈表第二個(gè)字段指向完整數(shù)據(jù)區(qū)的指針數(shù)據(jù)區(qū)包含HTTP響應(yīng)頭和網(wǎng)頁內(nèi)容第三個(gè)字段指向?qū)嶋H頁面內(nèi)容的起始位置第四個(gè)字段頁面內(nèi)容長度第五個(gè)字段文件名哈希新版本用它加快文件查找。在文件末尾通常還會(huì)有#define FS_ROOT file_index_html #define fs_file_count 1如果文件多了你會(huì)看到file_index_html[]后面跟著file_style_css[]、file_app_js[]每個(gè)都指向上一個(gè)文件節(jié)點(diǎn)形成一條鏈。我建議你把這個(gè)文件從頭翻一遍尤其是搜索一下自己的文件名確認(rèn)每個(gè)文件都生成進(jìn)去了。這一步只要30秒能避免后面一堆莫名其妙的404。3.4 工程集成替換文件與Keil編譯接下來把生成的fsdata.c放到LWIP源碼的src/apps/httpd/目錄下替換掉原來的fsdata.c。注意原來的fsdata.c是一個(gè)空模板里面好像沒有實(shí)際網(wǎng)頁數(shù)據(jù)但你不能放兩個(gè)fsdata.c同時(shí)在工程里否則編譯器直接報(bào)重復(fù)定義。直接把舊文件從工程里移除或者用新文件覆蓋掉它。如果你是Keil用戶工程里帶“號”的項(xiàng)只是源文件分組文件夾不是特殊編譯選項(xiàng)。把fsdata.c拖進(jìn)任意一個(gè)組里都行。我習(xí)慣單獨(dú)建一個(gè)“HTTPD_FS”分組專門放網(wǎng)頁生成的文件這樣以后更新網(wǎng)頁時(shí)容易找。編譯燒錄后瀏覽器輸入設(shè)備的IP地址如果能打開頁面恭喜你已經(jīng)走通了最關(guān)鍵的一步。如果打不開或者異常別急下一章的內(nèi)容基本就是為你準(zhǔn)備的。4. 從HTML到C文件六個(gè)高頻坑逐一拆解這一章是我最想寫的部分因?yàn)檫@些坑每一個(gè)我都踩過而且很多坑在官方文檔里根本找不到答案。4.1 編碼與BOM亂碼的頭號元兇網(wǎng)頁在自己電腦上打開一切正常燒進(jìn)板子里中文全部變成“錕斤拷”這是最常見的問題。別急著懷疑LWIP先看看你的HTML文件編碼。正確做法是HTML文件必須保存為UTF-8無BOM格式并且HTML頭部要有meta charsetutf-8如果你用Windows記事本另存為UTF-8它會(huì)偷偷加一個(gè)BOM頭文件開頭幾個(gè)不可見字節(jié)。這個(gè)BOM在瀏覽器里可能表現(xiàn)為頁面頂部多了一個(gè)小方框或者導(dǎo)致HTTP解析錯(cuò)位。我最早用記事本保存HTMLmakefsdata生成后怎么調(diào)都是亂碼后來換成VS Code右下角把編碼改成“UTF-8”另存為覆蓋問題立刻消失。還有個(gè)容易忽略的點(diǎn)makefsdata生成的HTTP響應(yīng)頭里Content-Type是否帶了charsetutf-8。新版工具默認(rèn)會(huì)帶但某些老版本可能不帶。如果響應(yīng)頭里沒有charset瀏覽器可能按系統(tǒng)默認(rèn)編碼解析中文照樣亂。這種情況下可以用makefsdata.exe -s C:\web -f fsdata.c -c text/html; charsetutf-8不過-c這個(gè)參數(shù)不是所有版本都支持建議先看-h輸出。實(shí)在不行就在HTML里把meta標(biāo)簽寫清楚瀏覽器一般會(huì)認(rèn)。4.2 文件名大小寫、子目錄與404這個(gè)坑非常隱蔽。你在Windows上做網(wǎng)頁文件名Logo.PNGHTML里寫img srclogo.png雙擊打開頁面正?！?yàn)閃indows文件系統(tǒng)不區(qū)分大小寫。但LWIP HTTPD的文件查找是精確匹配的它不認(rèn)大小寫。你請求logo.png而makefsdata生成的文件名是Logo.PNG結(jié)果就是404。所以我在第2章就強(qiáng)調(diào)所有文件名統(tǒng)一小寫。等出了事再去排查大小寫問題就是在浪費(fèi)生命。子目錄的問題更陰間。LWIP HTTPD雖然能在URI里解析目錄但如果你在子目錄里引用資源時(shí)用了../這種相對路徑往上跳十有八九會(huì)失敗。HTTPD不會(huì)像Nginx那樣把路徑規(guī)范化成絕對路徑。我的建議要么所有文件都放根目錄要么子目錄不要超過一層引用路徑直接從根開始寫比如/images/logo.png。4.3 首頁命名為什么IP一開就是404LWIP HTTPD收到一個(gè)根路徑請求/時(shí)默認(rèn)會(huì)去查找一個(gè)叫index.html的文件。有人把自己的配置頁命名為main.html訪問IP直接404然后瘋狂懷疑makefsdata沒打包成功。解決辦法很簡單把首頁命名成index.html。如果你確實(shí)想用別的名字可以用一個(gè)index.html當(dāng)跳板meta http-equivrefresh content0;urlmain.html但我不推薦這種跳轉(zhuǎn)方式多一次請求不說還容易被瀏覽器攔截。老老實(shí)實(shí)叫index.html最穩(wěn)。4.4 HTTP頭與Content-Type要么顯示要么下載前面說makefsdata會(huì)為每個(gè)文件生成HTTP響應(yīng)頭這個(gè)頭里最關(guān)鍵的字段就是Content-Type。它決定瀏覽器把內(nèi)容當(dāng)HTML解析、當(dāng)CSS渲染、當(dāng)圖片顯示還是當(dāng)成下載附件。makefsdata有一套內(nèi)置的擴(kuò)展名到Content-Type的映射表類似這樣擴(kuò)展名Content-Type.htmltext/html.csstext/css.jsapplication/javascript.pngimage/png.jpgimage/jpeg.svgimage/svgxml.icoimage/x-icon.jsonapplication/json如果你用的擴(kuò)展名不在表里比如.webp、.woff2makefsdata會(huì)按二進(jìn)制流處理返回的Content-Type可能是application/octet-stream。瀏覽器收到這種頭就可能出現(xiàn)“網(wǎng)頁文件下載了而不是打開”的詭異現(xiàn)象。解決辦法有三個(gè)盡量選用上表里的常見格式更新makefsdata源碼里的映射表重新編譯工具直接把資源內(nèi)聯(lián)到HTML里繞開這個(gè)問題。我實(shí)際項(xiàng)目里最后基本都走到第三種方案了圖片轉(zhuǎn)base64內(nèi)聯(lián)CSS和JS全塞進(jìn)HTML。一個(gè)文件搞定所有事再也不擔(dān)心Content-Type也不擔(dān)心并發(fā)連接數(shù)不夠。4.5 瀏覽器緩存改了代碼頁面不變這是最讓人抓狂的坑改完HTML重新跑makefsdata重新燒錄瀏覽器打開還是舊頁面。你以為是燒錄失敗了其實(shí)多半是瀏覽器緩存。LWIP HTTPD返回的響應(yīng)頭里默認(rèn)沒有Cache-Control相關(guān)字段一些瀏覽器會(huì)根據(jù)自己的策略緩存頁面。開發(fā)調(diào)試階段我建議開發(fā)時(shí)用無痕窗口或者打開開發(fā)者工具勾選“Disable cache”在HTML里加一個(gè)版本號注釋或者給引用的資源加查詢參數(shù)比如link relstylesheet hrefstyle.css?v3也可以在HTML的head里加meta http-equivCache-Control contentno-store至少能減少一部分緩存問題。注意即使頁面HTML本身不緩存外部CSS/JS文件也可能被緩存。所以給資源文件名加版本號是最有效的一招。4.6 固件體積與對齊別忘了這是MCUmakefsdata生成的C數(shù)組是1:1存儲(chǔ)的不壓縮。一個(gè)100KB的網(wǎng)頁固件就會(huì)增加100KB。如果你的MCU Flash本來就不寬裕這可能是壓垮駱駝的最后一根稻草?？刂品椒ㄇ懊嫣徇^一部分這里補(bǔ)充幾個(gè)細(xì)節(jié)移除HTML里的注釋和多余空白能省一點(diǎn)是一點(diǎn)CSS和JS用工具壓縮后再打包圖片盡量用png壓縮或轉(zhuǎn)成webp實(shí)在不行縮小尺寸字體文件是大戶盡量不要用自定義字體。還有一個(gè)不是體積的問題字節(jié)對齊。某些RISC-V內(nèi)核或較老的ARM編譯器對const數(shù)組的訪問要求對齊到4字節(jié)邊界。如果你發(fā)現(xiàn)HTTPD在傳輸數(shù)據(jù)時(shí)出現(xiàn)斷言失敗或內(nèi)存訪問異常檢查一下生成的數(shù)組前面是否有足夠的對齊。部分版本的makefsdata會(huì)生成類似LWIP_ALIGNED的修飾如果沒生成可以通過修改makefsdata源碼里輸出模板增加__attribute__((aligned(4)))或者在fsdata.c里手動(dòng)加。5. 進(jìn)階玩法SSI和CGI讓網(wǎng)頁真正“活”起來靜態(tài)網(wǎng)頁只能展示不能交互。想顯示溫度、IP地址、開關(guān)狀態(tài)或者讓用戶在網(wǎng)頁上配置參數(shù)就得用到LWIP HTTPD的SSI和CGI機(jī)制。5.1 SSI動(dòng)態(tài)插入設(shè)備狀態(tài).shtml模板怎么做SSIServer Side Include可以理解為“服務(wù)端動(dòng)態(tài)替換”。你在HTML里寫一個(gè)特殊標(biāo)簽HTTPD在發(fā)送文件時(shí)把標(biāo)簽替換成你提供的內(nèi)容。具體做法分三步第一步在HTML里寫占位標(biāo)簽。比如要顯示設(shè)備溫度當(dāng)前溫度!--#temp:value-- ℃注意這個(gè)文件的擴(kuò)展名必須是.shtml不是.html。LWIP HTTPD只對.shtml后綴的文件做SSI掃描。如果你把內(nèi)容放在index.html里它是不會(huì)執(zhí)行的。第二步在lwipopts.h里開啟SSI#define LWIP_HTTPD_SSI 1第三步實(shí)現(xiàn)SSI回調(diào)函數(shù)并且在lwipopts.h里注冊處理函數(shù)。不同版本的注冊方式略有差異常見寫法是u16_t my_ssi_handler(int iIndex, char *pcInsert, int iInsertLen) { if (strcmp(pcInsert, temp) 0) { int n snprintf(pcInsert, iInsertLen, %d, get_temperature()); if (n 0) return 0; if (n iInsertLen) return iInsertLen - 1; return n; } return 0; }然后在lwipopts.h里加#define LWIP_HTTPD_SSI_ENTRIES 1具體的SSI回調(diào)注冊宏不同版本有差異有的用LWIP_HTTPD_SSI_CUSTOM有的用數(shù)組注冊你以自己源碼里的注釋為準(zhǔn)。核心邏輯都一樣把標(biāo)簽名對應(yīng)的字符串塞進(jìn)pcInsert緩沖區(qū)返回長度。這里有個(gè)非常重要的細(xì)節(jié)替換后的字符串長度不能超過iInsertLen否則會(huì)截?cái)嗌踔翆?dǎo)致內(nèi)存寫越界。我見過一個(gè)同事在SSI回調(diào)里返回了一個(gè)超長的JSON字符串結(jié)果HTTPD直接崩潰。數(shù)值類數(shù)據(jù)注意用snprintf限制長度字符串類數(shù)據(jù)記得提前截?cái)唷?.2 CGI處理表單配置頁怎么提交才靠譜CGI在LWIP里并不是傳統(tǒng)意義上的CGI程序它本質(zhì)上是一個(gè)URL回調(diào)。你注冊一個(gè)URL當(dāng)HTTPD收到匹配的請求時(shí)執(zhí)行你寫好的處理函數(shù)然后重定向到另一個(gè)頁面。舉個(gè)典型例子網(wǎng)頁里要控制LED。HTML里寫一個(gè)表單form action/led methodget input typeradio namestate value1開 input typeradio namestate value0關(guān) input typesubmit value提交 /form然后在C代碼里實(shí)現(xiàn)CGI處理器static const char *my_cgi_handler(int iIndex, int iNumParams, char *pcParam[], char *pcValue[]) { int i; for (i 0; i iNumParams; i) { if (strcmp(pcParam[i], state) 0) { led_ctrl(pcValue[i][0] 1); } } return /index.html; }注冊CGI條目并配置宏static const tCGI my_cgis[] { {/led, my_cgi_handler}, }; #define LWIP_HTTPD_CGI 1 #define LWIP_HTTPD_MAX_CGI_ENTRIES 1當(dāng)用戶在瀏覽器點(diǎn)提交表單會(huì)發(fā)一個(gè)/led?state1的GET請求。HTTPD截獲這個(gè)URL把參數(shù)名和參數(shù)值傳給my_cgi_handler。處理完之后函數(shù)返回一個(gè)URL瀏覽器自動(dòng)跳轉(zhuǎn)回/index.html。注意幾個(gè)坑CGI注冊的URL和表單action要完全一致包括開頭的斜杠不匹配就進(jìn)不了回調(diào)表單請求會(huì)占用一個(gè)TCP連接處理完馬上返回不要在回調(diào)里做阻塞操作比如延時(shí)、等待Flash寫入完成否則頁面會(huì)轉(zhuǎn)圈很久GET方式提交的參數(shù)受LWIP_HTTPD_MAX_REQ_LENGTH限制參數(shù)多了會(huì)被截?cái)?。?shù)據(jù)量大可以考慮POST但LWIP的POST回調(diào)實(shí)現(xiàn)復(fù)雜得多我的建議是配置頁的數(shù)據(jù)通常很小GET加上限調(diào)大就夠用了。6. 常見問題速查與排查思路這里把這一路最常見的故障整理成一張表方便你遇到問題時(shí)直接查不用重新把文章翻一遍。6.1 高頻問題對照表癥狀可能原因解決辦法打開IP返回404首頁文件名不是index.html把首頁改成index.html重新生成fsdata.c打開IP顯示目錄列表或空白文件沒被打包進(jìn)fsdata.c搜下fsdata.c里是否有對應(yīng)的文件名中文亂碼文件不是UTF-8、缺BOM或缺meta標(biāo)簽另存為UTF-8無BOM加meta charsetutf-8CSS不生效引用路徑不對或大小寫不匹配統(tǒng)一小寫文件名檢查路徑是否和實(shí)際目錄一致JS點(diǎn)擊沒反應(yīng)JS文件名大小寫不一致或Content-Type錯(cuò)誤統(tǒng)一小寫確認(rèn)makefsdata輸出日志里包含該文件瀏覽器下載HTML而不是顯示Content-Type不是text/html檢查makefsdata的擴(kuò)展名映射或者把資源內(nèi)聯(lián)修改網(wǎng)頁燒錄后無變化瀏覽器緩存無痕窗口調(diào)試加版本號參數(shù)編譯報(bào)重復(fù)定義fsdata工程里有兩個(gè)fsdata.c移除工程里原來的fsdata.c模板訪問頁面明顯卡頓外部資源請求次數(shù)太多合并CSS/JS減少圖片數(shù)量表單提交后沒反應(yīng)CGI沒注冊成功或URL不匹配檢查WWW_CGI數(shù)組和表單action是否完全一致6.2 我的調(diào)試三板斧遇到疑難雜癥我一般按這個(gè)順序排查第一板斧先確認(rèn)文件真的在。用文本編輯器打開生成的fsdata.c搜索你請求的文件名。如果搜不到別調(diào)試HTTP了先回去跑makefsdata。這個(gè)排查30秒搞定能過濾掉八成的問題。第二板斧打開瀏覽器開發(fā)者工具的Network面板?？疵總€(gè)請求的響應(yīng)狀態(tài)碼和響應(yīng)頭。404說明文件查找失敗看請求URL和大小寫200但內(nèi)容不對看Content-Type和響應(yīng)體內(nèi)容。這一步能看出HTTP層到底發(fā)生了什么。第三板斧串口開LWIP HTTPD調(diào)試輸出。在lwipopts.h里加#define LWIP_HTTPD_DEBUG LWIP_DBG_ON重新編譯燒錄后串口會(huì)打印HTTPD接收到的請求和響應(yīng)信息。有時(shí)候?yàn)g覽器把問題藏起來了串口日志會(huì)直白地告訴你它收到了什么。如果還解決不了就抓包。別怕Wireshark過濾一下TCP端口80幾次交互就能看清問題。7. 最后分享幾個(gè)個(gè)人習(xí)慣寫到最后分享幾個(gè)我做了幾年LWIP網(wǎng)頁開發(fā)后沉淀下來的習(xí)慣算不上標(biāo)準(zhǔn)答案但對提高效率很有幫助。習(xí)慣一先本地驗(yàn)證頁面再打包進(jìn)固件。我在電腦上起一個(gè)靜態(tài)文件服務(wù)器把HTML寫完先本地跑通所有交互、樣式都沒問題了最后才跑makefsdata。別一邊調(diào)前端一邊燒錄效率太低而且MCU環(huán)境不好調(diào)試JS。習(xí)慣二盡可能做單文件頁面。把CSS、JS都內(nèi)聯(lián)進(jìn)index.html圖片轉(zhuǎn)base64或者干脆不用圖片。雖然看起來“不專業(yè)”但在MCU這種資源受限的環(huán)境里單文件方案能避免掉大量HTTP層的坑。我做過一個(gè)配置頁面包含表單、狀態(tài)展示、圖標(biāo)總共也就20KB一個(gè)HTML全搞定。習(xí)慣三保留makefsdata的生成腳本。我通常寫一個(gè)批處理文件雙擊就完成整條打包流程makefsdata.exe -s C:\web -f C:\project\src\fsdata.c下次修改HTML后雙擊一下等輸出日志顯示文件數(shù)量正確直接去編譯固件就行。習(xí)慣四小改動(dòng)可以直接改fsdata.c里的字節(jié)。如果你只是改一個(gè)詞、一個(gè)數(shù)字重新跑makefsdata要好幾步這時(shí)可以直接在生成的fsdata.c里定位對應(yīng)字符串的UTF-8字節(jié)原地修改。前提是修改前后長度必須一致否則整個(gè)數(shù)組的偏移就亂了。我自己改過好多次“版本號”和“設(shè)備名”省了不少事。但要注意這只是臨時(shí)救急正經(jīng)更新還是要重新生成。另外提醒一點(diǎn)不同版本的LWIP和makefsdata行為細(xì)節(jié)有差異網(wǎng)上很多教程用的老版本宏名、文件名都可能對不上。以你自己工程里的源碼為準(zhǔn)我的經(jīng)驗(yàn)可以作為參考但別死記參數(shù)。LWIP的HTTPD雖然不 fancy但把它調(diào)通之后再回頭看你會(huì)覺得整個(gè)系統(tǒng)的能力上了一個(gè)臺階——設(shè)備不再只是能ping通而是真的可以通過瀏覽器去管理了。