基于STM32的串口服務(wù)器web功能實現(xiàn)

1、基于STM32的串口服務(wù)器web功能實現(xiàn)編制： 陳志磊 校對： 審核： 日期： 2014-12-30 版本：V1.0更改次數(shù)更改時間更改內(nèi)容版本12014-12-30初版V1.0說明：本文主要說明通過web訪問來配置串口服務(wù)器參數(shù)的功能，前提要求LWIP和uCOSII都已移植成功。實現(xiàn)B/S結(jié)構(gòu)，須將串口服務(wù)器配置為web server。一 Web Server 文件以及相關(guān)技術(shù)簡介1.相關(guān)文件說明ST公司的官網(wǎng)上提供了通過LWIP完成web server配置的例程，打開我們的工程文件夾“LwIP1.4.1移植STM32 V1.8”，在LWIP-APP/ web_server_demo文件夾下

2、的文件如圖所示：各個文件的說明見下表：文件說明makefsdata該文件夾中包含有原始網(wǎng)頁文件和將原始的網(wǎng)頁文件轉(zhuǎn)換為網(wǎng)頁數(shù)組的工具mskefsdata.exefs.c用來管理生成的網(wǎng)頁數(shù)組fs.hfsdata.c生成的網(wǎng)頁數(shù)組fsdata.hhttpd.c完成了將串口服務(wù)器配置成web server。httpd.hhttpd_cgi_ssi.cCGI和SSI源文件，通過網(wǎng)頁配置串口服務(wù)器參數(shù)主要是通過這個文件來完成2.網(wǎng)頁制作及網(wǎng)頁數(shù)組數(shù)據(jù)轉(zhuǎn)換（1）網(wǎng)頁制作使用dreamweaver進行網(wǎng)頁制作,交互方式主要是通過表單來完成，注意對于使用了需要使用SSI技術(shù)來嵌入數(shù)據(jù)的，需要將網(wǎng)頁后綴設(shè)為s

3、html、shtm、stm等。ST的例程默認使用首頁索引在httpd.c中g(shù)_psDefaultFilenames數(shù)組里表示，該數(shù)組如下：const default_filename g_psDefaultFilenames = "/index.shtml", false , "/index.ssi", true , "/index.shtm", true , "/index.html", false , "/index.htm", false ;該數(shù)據(jù)表示支持首頁索引為index.shtml、

4、index.html、index.htm的網(wǎng)頁文件輸入。在網(wǎng)頁設(shè)計時，需考慮以下兩個方面：a.表單的操作設(shè)計，表單提交的方法為post，表單的處理設(shè)為對應(yīng)的CGI。b.SSI標簽的嵌入。在需要嵌入信息的位置插入SSI標簽。關(guān)于CGI和SSI稍后將會簡要說明。（2）網(wǎng)頁數(shù)組數(shù)據(jù)轉(zhuǎn)換在 makefsdata 文件夾下的 fs 文件為網(wǎng)頁源文件，如下圖：由于網(wǎng)頁源文件不能直接放到 STM32 里面，所以要做一個轉(zhuǎn)換，這里通過 makefsdata.exe 這個工具將原始網(wǎng)頁文件轉(zhuǎn)換成.c 格式的網(wǎng)頁數(shù)組，這樣就可以添加到工程中了，makefsdata 是用來將編輯好的網(wǎng)頁文件轉(zhuǎn)換成二進制數(shù)的一個工具

5、。接下來我們講解一下這個工具的使用方法下面我們講解 makefsdata 工具的使用。（1）新建一個名為 fs 的文件夾， 將編輯好的網(wǎng)頁源文件放到 fs 文件夾下，里面包含了編輯好的 html 和.shtml 等網(wǎng)頁文件,其中 image 文件夾里面是我們使用到的圖片。（2）將 fs 文件夾和 makefsdada.exe 工具放到同一文件夾下,此處為 makefsdata 文件夾，打開makefsdata 文件夾,如下圖所示。圖中的 echotool.exe 和 Tftpd32-3.51-setup.exe 為其他工具，這里沒有使用到，cmd.reg 稍后我們會講到。（3）在 makefs

6、data 文件夾上點擊鼠標右鍵,然后點擊”在此位置打開 CMD”選項，打開后結(jié)果如圖所示。此時會打開一個 CMD 命令窗口。如果點擊右鍵沒有”在此位置打開 CMD”選型的話，請使用makefsdata文件夾下的 cmd.reg 文件導(dǎo)入注冊表注冊,雙擊打開 cmd.reg，然后一路確定下去就可以了。（4）在打開的 CMD 命令窗口中輸入： makefsdata i 命令，按回車鍵。就會生成fsdata.c文件，將該文件拷貝到web_server_demo文件下，然后以頭文件的方式包含到工程中即可。3.CGI技術(shù)簡介公共網(wǎng)關(guān)接口 CGI(Common Gateway Interface) 是 W

7、WW 技術(shù)中最重要的技術(shù)之一，有著不可替代的重要地位。 CGI 是外部應(yīng)用程序與 Web 服務(wù)器之間的接口標準，是在 CGI 程序和Web 服務(wù)器之間傳遞信息的規(guī)程。 CGI 規(guī)范允許 Web 服務(wù)器執(zhí)行外部程序，并將它們的輸出發(fā)送給 Web 瀏覽器， CGI 在物理上是一段程序，運行在服務(wù)器上，提供同客戶端 HTML 頁面的接口。絕大多數(shù)的 CGI 程序被用來解釋處理來自表單的輸入信息，并在服務(wù)器產(chǎn)生相應(yīng)的處理，或?qū)⑾鄳?yīng)的信息反饋給瀏覽器， CGI 程序使網(wǎng)頁具有交互功能。比如通過web來處理提交的數(shù)據(jù)，用的就是CGI技術(shù)。CGI示意圖如下：4.SSI技術(shù)簡介服務(wù)器端嵌入： Server S

8、ide Include，是一種類似于 ASP 的基于服務(wù)器的網(wǎng)頁制作技術(shù)。大多數(shù)的 WEB 服務(wù)器等均支持 SSI 命令。 將內(nèi)容發(fā)送到瀏覽器之前，可以使用“服務(wù)器端包含(SSI）”指令將文本、圖形或應(yīng)用程序信息包含到網(wǎng)頁中。例如，可以使用 SSI 包含時間/日期戳、版權(quán)聲明或供客戶填寫并返回的表單。對于在多個文件中重復(fù)出現(xiàn)的文本或圖形，使用包含文件是一種簡便的方法。將內(nèi)容存入一個包含文件中即可，而不必將內(nèi)容輸入所有文件。通過一個非常簡單的語句即可調(diào)用包含文件，此語句指示 Web 服務(wù)器將內(nèi)容插入適當網(wǎng)頁。而且，使用包含文件時，對內(nèi)容的所有更改只需在一個地方就能完成。因為包含 SSI 指令的文

9、件要求特殊處理，所以必須為所有 SSI 文件賦予 SSI 文件擴展名。默認擴展名是 .stm、 .shtm和 .shtml。SSI 是為 WEB 服務(wù)器提供的一套命令，這些命令只要直接嵌入到 HTML 文檔的注釋內(nèi)容之中即可。如： <!-#include file="info.htm"->就是一條 SSI 指令，其作用是將"info.htm"的內(nèi)容拷貝到當前的頁面中，當訪問者來瀏覽時，會看到其它 HTML 文檔一樣顯示 info.htm 其中的內(nèi)。在本項目中，將串口服務(wù)器的配置信息通過SSI嵌入的方式來顯示到網(wǎng)頁上，還有一種比較高效的交互方式

10、，即通過ajax來實現(xiàn)異步交互，有興趣可以研究下。二 軟件設(shè)計前面介紹過，fs.c 文件管理生成的網(wǎng)頁數(shù)組文件這個文件由 ST 提供。 httpd.c 文件是本章實驗的重點， 這個文件將開發(fā)板配置為 Web Server，這個文件也由 ST 官方提供的， 閱讀這個文件需要有網(wǎng)頁相關(guān)的知識，這里對這個文件不做講解。當在瀏覽器中輸入網(wǎng)址， web服務(wù)器就會返回給我們相應(yīng)的網(wǎng)頁，然后瀏覽器解析并呈現(xiàn)給我們。同樣的，當我們通過瀏覽器訪問開發(fā)板的時候，開發(fā)板這時是作為服務(wù)器的，服務(wù)器針對不同的 URL 在 fsdata.c 文件中找出相應(yīng)的網(wǎng)頁，并且返回給瀏覽器， 在 fsdata.c 文件中查找網(wǎng)頁的

11、過程就需要 fs.c 里面的函數(shù)。 接收瀏覽器發(fā)送的數(shù)據(jù)并且將網(wǎng)頁返回給瀏覽器的過程都是由 httpd.c 文件里面的函數(shù)來完成的。1.POST方法實現(xiàn)ST的例程中默認使用的是GET方法，而在提交用戶名和密碼等數(shù)據(jù)時，希望安全性更高；在提交串口服務(wù)器的配置信息時，信息比較多，也不希望全部添加到URL中，綜上考慮，選擇使用POST方式來提交表單。因此需要對httpd.c和httpd.h文件做一些修改。（1）修改httpd.h文件中的宏定義LWIP_HTTPD_SUPPORT_POST，使其支持POST方法。/* 設(shè)置為1支持POST Set this to 1 to support HTTP P

12、OST */#ifndef LWIP_HTTPD_SUPPORT_POST#define LWIP_HTTPD_SUPPORT_POST 1#endif（2）實現(xiàn)三個函數(shù),關(guān)于這三個函數(shù)的詳細代碼，請參考httpd.c文件。a.err_t httpd_post_begin(void *connection, const char *uri, const char *http_request, u16_t http_request_len, int content_len, char *response_uri, u16_t response_uri_len, u8_t *post_auto_w

13、nd);b.err_t httpd_post_receive_data(void *connection, struct pbuf *p);c.void httpd_post_finished(void *connection, char *response_uri, u16_t response_uri_len);2.GCI實現(xiàn)通過表單提交的不同CGI來執(zhí)行對應(yīng)的handler函數(shù)，在 httpd_cgi_ssi.c 中我們定義了一個數(shù)組 ppcURLS，數(shù)組如下：static const tCGI ppcURLs= /cgi程序"/login.cgi",Login_CG

14、IHandler ,/文件名 文件功能 "/write.cgi",WEBSET_CGIHandler ,/文件名 文件功能 "/setpwd.cgi",SetPwd_CGIHandler ,/文件名 文件功能"/uart.cgi",SetUart_CGIHandler,/文件名 文件功能;關(guān)于以上幾個cgi說明如下表：CGIHandler函數(shù)說明/login.cgiLogin_CGIHandler登錄配置/write.cgiWEBSET_CGIHandler串口服務(wù)器參數(shù)配置/setpwd.cgiSetPwd_CGIHandler登錄

15、密碼更改/uart.cgiSetUart_CGIHandler串口參數(shù)配置當接收到/login.cgi時，就會執(zhí)行Login_CGIHandler函數(shù)，該函數(shù)代碼如下：/登錄的CGI控制句柄const char* Login_CGIHandler(int iIndex,int iNumParams,char *pcParam,char *pcValue) int index; index = FindCGIParameter ( "name", pcParam, iNumParams ); if(index!=-1)if(strcmp(pcValueindex,lwip_l

16、ogin.username) != 0)/用戶名不相等return "/index.shtml" index = FindCGIParameter ( "password", pcParam, iNumParams ); if(index!=-1)if(strcmp(pcValueindex,lwip_login.passwd) != 0)/密碼不相等return "/index.shtml" return "/lwipset.shtml" /這里返回你要發(fā)給瀏覽器的文件名路徑從上面的代碼可以看出，通過web瀏覽器

17、提交的表單項名稱依次存放在pcParam中，表單項內(nèi)容依次存放在pcValue中，iNumParams存放的是提交的數(shù)據(jù)個數(shù)。在Login_CGIHandler中，首先判斷是否提交了“name”和“passward”這些表單標簽，然后判斷用戶名和密碼是否相等，如果相等，則進入串口服務(wù)器配置界面，否則，登錄不成功。其余幾個handler函數(shù)的原理一樣，不再贅述。3.SSI實現(xiàn)這里通過SSI來實現(xiàn)配置信息的顯示，如下圖：要實現(xiàn)SSI，必須在制作網(wǎng)頁時，在對應(yīng)的需要顯示的位置添加SSI標簽，然后在程序檢測該標簽，從而嵌入對應(yīng)的數(shù)據(jù)。SSIHandler 函數(shù)為 SSI 的句柄函數(shù)，函數(shù)代碼如下， 在

18、這個函數(shù)中我們根據(jù)參數(shù) iIndex 調(diào)用不同的函數(shù)來完成向網(wǎng)頁中添加數(shù)據(jù)，這幾個函數(shù)比較簡單。在httpd_cgi_ssi.c文件中，SSI標簽數(shù)據(jù)定義如下：/SSI插入標簽static const char *ppcTAGs= /SSI的Tag"e", /登錄錯誤"h", /IP模式"i", /IP地址"j", /端口"k", /工作模式"l", /子網(wǎng)掩碼"m", /網(wǎng)關(guān)"n",/目的IP"o", /目的端口&

19、quot;w", /波特率"x", /數(shù)據(jù)位"y", /校驗位"z", /停止位;SSIHandler函數(shù)代碼如下，該函數(shù)通過判斷SSI標簽ppcTAGs來在不同的位置插入對應(yīng)的信息。/SSI的Handler句柄/根據(jù)不同的索引來插入對應(yīng)的數(shù)據(jù)/返回：插入數(shù)據(jù)的字符串長度static u16_t SSIHandler(int iIndex,char *pcInsert,int iInsertLen)char *p;switch(iIndex)case 0: /登錄錯誤p = "用戶名或密碼錯誤！" WEB

20、_dis_Handler(pcInsert,p);break;case 1:/IP獲取方式if(lwipdev.dhcp_enable) p = "動態(tài)獲取" else p = "靜態(tài)" WEB_dis_Handler(pcInsert,p);break;case 2:/ip地址 WEB_dis_Handler(pcInsert,pIp_addr);break;case 3:/端口 WEB_dis_Handler(pcInsert,pIp_Localport);break;case 4:/工作模式if(lwipdev.tcp_mode = TCP_SERVER_MODE)p = "TCP server" elsep = "TCP client"WEB_dis_Handler(pcInsert,p);break; 4.初始化當完成以上步驟后，還需要完成CGI和SSI的初始化，分別調(diào)用http_set_cgi_handlers()和http_set_ssi_handler()來完成，代碼如下：/SSI句柄初始化void httpd_ssi_init(void) /配置內(nèi)部溫度傳感器的SSI句柄http_set_ssi_handler(SSIHandler,ppcTA