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

1、基于STM32的串口服務(wù)器web功能實(shí)現(xiàn)編制： 陳志磊 校對： 審核： 日期： 2014-12-30 版本：V1.0更改次數(shù)更改時(shí)間更改內(nèi)容版本12014-12-30初版V1.0說明：本文主要說明通過web訪問來配置串口服務(wù)器參數(shù)的功能，前提要求LWIP和uCOSII都已移植成功。實(shí)現(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、的文件如圖所示：各個(gè)文件的說明見下表：文件說明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ù)主要是通過這個(gè)文件來完成2.網(wǎng)頁制作及網(wǎng)頁數(shù)組數(shù)據(jù)轉(zhuǎn)換（1）網(wǎng)頁制作使用dreamweaver進(jìn)行網(wǎng)頁制作,交互方式主要是通過表單來完成，注意對于使用了需要使用SSI技術(shù)來嵌入數(shù)據(jù)的，需要將網(wǎng)頁后綴設(shè)為s

3、html、shtm、stm等。ST的例程默認(rèn)使用首頁索引在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.html、index.htm的網(wǎng)頁文件輸入。在網(wǎng)頁設(shè)計(jì)時(shí)，需考慮以下兩個(gè)方面：a.表單的操作設(shè)計(jì)，表單提交的

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

5、， 將編輯好的網(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 文件夾上點(diǎn)擊鼠標(biāo)右鍵,然后點(diǎn)擊”在此位置打開 CMD”選項(xiàng)，打開后結(jié)果如圖所示。此時(shí)會打開一個(gè) CMD 命令窗

6、口。如果點(diǎn)擊右鍵沒有”在此位置打開 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) 是 WWW 技術(shù)中最重要的技術(shù)之一，有著不可替代的重要地位。 CGI 是外部應(yīng)用程序與 Web 服務(wù)器之間的接口標(biāo)準(zhǔn)，是在 C

7、GI 程序和Web 服務(wù)器之間傳遞信息的規(guī)程。 CGI 規(guī)范允許 Web 服務(wù)器執(zhí)行外部程序，并將它們的輸出發(fā)送給 Web 瀏覽器， CGI 在物理上是一段程序，運(yùn)行在服務(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 Side Include，是一種類似于 ASP 的基于服務(wù)器的網(wǎng)頁制作技術(shù)。大多數(shù)的 WEB 服務(wù)器等均支持 SSI 命令

8、。 將內(nèi)容發(fā)送到瀏覽器之前，可以使用“服務(wù)器端包含(SSI）”指令將文本、圖形或應(yīng)用程序信息包含到網(wǎng)頁中。例如，可以使用 SSI 包含時(shí)間/日期戳、版權(quán)聲明或供客戶填寫并返回的表單。對于在多個(gè)文件中重復(fù)出現(xiàn)的文本或圖形，使用包含文件是一種簡便的方法。將內(nèi)容存入一個(gè)包含文件中即可，而不必將內(nèi)容輸入所有文件。通過一個(gè)非常簡單的語句即可調(diào)用包含文件，此語句指示 Web 服務(wù)器將內(nèi)容插入適當(dāng)網(wǎng)頁。而且，使用包含文件時(shí)，對內(nèi)容的所有更改只需在一個(gè)地方就能完成。因?yàn)榘?SSI 指令的文件要求特殊處理，所以必須為所有 SSI 文件賦予 SSI 文件擴(kuò)展名。默認(rèn)擴(kuò)展名是 .stm、 .shtm和 .shtm

9、l。SSI 是為 WEB 服務(wù)器提供的一套命令，這些命令只要直接嵌入到 HTML 文檔的注釋內(nèi)容之中即可。如： 就是一條 SSI 指令，其作用是將info.htm的內(nèi)容拷貝到當(dāng)前的頁面中，當(dāng)訪問者來瀏覽時(shí)，會看到其它 HTML 文檔一樣顯示 info.htm 其中的內(nèi)。在本項(xiàng)目中，將串口服務(wù)器的配置信息通過SSI嵌入的方式來顯示到網(wǎng)頁上，還有一種比較高效的交互方式，即通過ajax來實(shí)現(xiàn)異步交互，有興趣可以研究下。二 軟件設(shè)計(jì)前面介紹過，fs.c 文件管理生成的網(wǎng)頁數(shù)組文件這個(gè)文件由 ST 提供。 httpd.c 文件是本章實(shí)驗(yàn)的重點(diǎn)， 這個(gè)文件將開發(fā)板配置為 Web Server，這個(gè)文件也由

10、 ST 官方提供的， 閱讀這個(gè)文件需要有網(wǎng)頁相關(guān)的知識，這里對這個(gè)文件不做講解。當(dāng)在瀏覽器中輸入網(wǎng)址， web服務(wù)器就會返回給我們相應(yīng)的網(wǎng)頁，然后瀏覽器解析并呈現(xiàn)給我們。同樣的，當(dāng)我們通過瀏覽器訪問開發(fā)板的時(shí)候，開發(fā)板這時(shí)是作為服務(wù)器的，服務(wù)器針對不同的 URL 在 fsdata.c 文件中找出相應(yīng)的網(wǎng)頁，并且返回給瀏覽器， 在 fsdata.c 文件中查找網(wǎng)頁的過程就需要 fs.c 里面的函數(shù)。 接收瀏覽器發(fā)送的數(shù)據(jù)并且將網(wǎng)頁返回給瀏覽器的過程都是由 httpd.c 文件里面的函數(shù)來完成的。1.POST方法實(shí)現(xiàn)ST的例程中默認(rèn)使用的是GET方法，而在提交用戶名和密碼等數(shù)據(jù)時(shí)，希望安全性更高；

11、在提交串口服務(wù)器的配置信息時(shí)，信息比較多，也不希望全部添加到URL中，綜上考慮，選擇使用POST方式來提交表單。因此需要對httpd.c和httpd.h文件做一些修改。（1）修改httpd.h文件中的宏定義LWIP_HTTPD_SUPPORT_POST，使其支持POST方法。/* 設(shè)置為1支持POST Set this to 1 to support HTTP POST */#ifndef LWIP_HTTPD_SUPPORT_POST#define LWIP_HTTPD_SUPPORT_POST 1#endif（2）實(shí)現(xiàn)三個(gè)函數(shù),關(guān)于這三個(gè)函數(shù)的詳細(xì)代碼，請參考httpd.c文件。a.err

12、_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_t httpd_post_receive_data(void *connection, struct pbuf *p);c.void httpd_post_finished(void *connection, ch

13、ar *response_uri, u16_t response_uri_len);2.GCI實(shí)現(xiàn)通過表單提交的不同CGI來執(zhí)行對應(yīng)的handler函數(shù)，在 httpd_cgi_ssi.c 中我們定義了一個(gè)數(shù)組 ppcURLS，數(shù)組如下：static const tCGI ppcURLs= /cgi程序/login.cgi,Login_CGIHandler ,/文件名 文件功能 /write.cgi,WEBSET_CGIHandler ,/文件名 文件功能 /setpwd.cgi,SetPwd_CGIHandler ,/文件名 文件功能/uart.cgi,SetUart_CGIHandler,

14、/文件名 文件功能;關(guān)于以上幾個(gè)cgi說明如下表：CGIHandler函數(shù)說明/login.cgiLogin_CGIHandler登錄配置/write.cgiWEBSET_CGIHandler串口服務(wù)器參數(shù)配置/setpwd.cgiSetPwd_CGIHandler登錄密碼更改/uart.cgiSetUart_CGIHandler串口參數(shù)配置當(dāng)接收到/login.cgi時(shí)，就會執(zhí)行Login_CGIHandler函數(shù)，該函數(shù)代碼如下：/登錄的CGI控制句柄const char* Login_CGIHandler(int iIndex,int iNumParams,char *pcParam,c

15、har *pcValue) int index; index = FindCGIParameter ( name, pcParam, iNumParams ); if(index!=-1)if(strcmp(pcValueindex,lwip_login.username) != 0)/用戶名不相等return /index.shtml; index = FindCGIParameter ( password, pcParam, iNumParams ); if(index!=-1)if(strcmp(pcValueindex,lwip_login.passwd) != 0)/密碼不相等ret

16、urn /index.shtml; return /lwipset.shtml; /這里返回你要發(fā)給瀏覽器的文件名路徑從上面的代碼可以看出，通過web瀏覽器提交的表單項(xiàng)名稱依次存放在pcParam中，表單項(xiàng)內(nèi)容依次存放在pcValue中，iNumParams存放的是提交的數(shù)據(jù)個(gè)數(shù)。在Login_CGIHandler中，首先判斷是否提交了“name”和“passward”這些表單標(biāo)簽，然后判斷用戶名和密碼是否相等，如果相等，則進(jìn)入串口服務(wù)器配置界面，否則，登錄不成功。其余幾個(gè)handler函數(shù)的原理一樣，不再贅述。3.SSI實(shí)現(xiàn)這里通過SSI來實(shí)現(xiàn)配置信息的顯示，如下圖：要實(shí)現(xiàn)SSI，必須在制作

17、網(wǎng)頁時(shí)，在對應(yīng)的需要顯示的位置添加SSI標(biāo)簽，然后在程序檢測該標(biāo)簽，從而嵌入對應(yīng)的數(shù)據(jù)。SSIHandler 函數(shù)為 SSI 的句柄函數(shù)，函數(shù)代碼如下， 在這個(gè)函數(shù)中我們根據(jù)參數(shù) iIndex 調(diào)用不同的函數(shù)來完成向網(wǎng)頁中添加數(shù)據(jù)，這幾個(gè)函數(shù)比較簡單。在httpd_cgi_ssi.c文件中，SSI標(biāo)簽數(shù)據(jù)定義如下：/SSI插入標(biāo)簽static const char *ppcTAGs= /SSI的Tage, /登錄錯誤h, /IP模式i, /IP地址j, /端口k, /工作模式l, /子網(wǎng)掩碼m, /網(wǎng)關(guān)n,/目的IPo, /目的端口w, /波特率x, /數(shù)據(jù)位y, /校驗(yàn)位z, /停止位;SS

18、IHandler函數(shù)代碼如下，該函數(shù)通過判斷SSI標(biāo)簽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_dis_Handler(pcInsert,p);break;case 1:/IP獲取方式if(lwipdev.dhcp_enable) p = 動態(tài)獲取; else p = 靜

19、態(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.初始化當(dāng)完成以上步驟后，還需要完成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,ppcTAGs,NUM_CONFIG_SSI_TAGS);/CGI句柄初始