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

1、基于STM32的串口服務器web功能實現(xiàn)編制： 陳志磊 校對： 審核： 日期： 2014-12-30 版本：V1.0更改次數(shù)更改時間更改內(nèi)容版本12014-12-30初版V1.0說明：本文主要說明通過web訪問來配置串口服務器參數(shù)的功能，前提要求LWIP和uCOSII都已移植成功。實現(xiàn)B/S結(jié)構(gòu)，須將串口服務器配置為web server。一 Web Server 文件以及相關(guān)技術(shù)簡介1.相關(guān)文件說明ST公司的官網(wǎng)上提供了通過LWIP完成web server配置的例程，打開我們的工程文件夾“移植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完成了將串口服務器配置成web server。httpd.hhttpd_cgi_ssi.cCGI和SSI源文件，通過網(wǎng)頁配置串口服務器參數(shù)主要是通過這個文件來完成2.網(wǎng)頁制作及網(wǎng)頁數(shù)組數(shù)據(jù)轉(zhuǎn)換（1）網(wǎng)頁制作使用dreamweaver進行網(wǎng)頁制作,交互方式主要是通過表單來完成，注意對于使用了需要使用SSI技術(shù)來嵌入數(shù)據(jù)的，需要將網(wǎng)頁后綴設為shtml、shtm

3、、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、index.htm

4、l、index.htm的網(wǎng)頁文件輸入。在網(wǎng)頁設計時，需考慮以下兩個方面：a.表單的操作設計，表單提交的方法為post，表單的處理設為對應的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）在 makefsdata 文件夾上

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

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

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

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

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

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

12、ndef 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_wnd);b.err

13、_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í)行對應的handler函數(shù)，在 httpd_cgi_ssi.c 中我們定義了一個數(shù)組 ppcURLS，數(shù)組如下：static const tCGI ppcURLs= /cgi程序"/login.cgi",Login_CGIHandler

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

15、.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_login.user

16、name) != 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”這些表單標簽，然后判斷用戶名和密碼是否相等，如果相等，則進入串口服務器配置界面，否則，登錄不成功。其余幾個handler函數(shù)的原理一樣，不再贅述。3.SSI實現(xiàn)這里通過SSI來實現(xiàn)配置信息的顯示，如下圖：要實現(xiàn)SSI，必須在制作網(wǎng)頁時，在對應的需要顯示的位置添加SSI標簽，然后在程序檢測該標簽，從而嵌入對應的數(shù)據(jù)。SSIHandler 函數(shù)為 SSI 的句柄函數(shù)，函數(shù)代碼如下， 在這個函數(shù)中我們根據(jù)

18、參數(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", /目的端口"w&qu

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

20、ler(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,ppcTAG