本帖最后由 lzq12 于 2017-6-26 13:01 编辑
本次主要解析STM32网络通信中WebServer应用，从网页界面的编写到浏览器与STM32之间进行通信的数据来说明SSI与CGI的原理及应用，并对GET与POST指令进行应用解析。 硬件和软件环境： 1.硬件环境：STM32F407，网卡芯片LAN8720，其他部分参考正点原子的407探索者开发板。 2.软件环境：keil5,LWIP1.4.1，主要是基于正点原子STM32F407探索者的第六十章网络通信实验程序。 一、程序流程解析 为了方便查看浏览器与STM32之间的数据通信，建议程序中使用固定IP的方式，如192.168.1.101，建议使用软件Wireshark来查看网络数据。
首先是打开Wireshark，选择本地连接
然后在地址栏输入 ip.addr == 192.168.1.101,然后按右边的箭头开始接收数据
这时在浏览器输入IP地址（如192.168.1.101）就可以看到如下数据：
这时浏览器给STM32发出GET指令数据，而STM32通过函数http_recv()接收数据，并把接收到的数据进行解析、处理，然后把指令要求的数据发给浏览器，这时浏览器上面就会显示相应的网页界面。具体在函数http_recv()里面的执行流程如下： http_recv()----->判断收到的是有效数据后，调用函数http_parse_request()----->解析是GET指令还是POST指令(输入IP后下发的是GET指令)，如果是GET指令，则直接是调用函数http_find_file()----->判断指令的内容是请求打开默认的根文件(如打开index.shtml或test.shtml)还是CGI程序指令（CGI指令主要就是在网页界面上按下按钮等下发下来的一系列相关操作指令，后面再对此解说）----->如指令为求打开默认的根文件，则打开存放在SPI FLASH芯片W25Q128或者SD卡中的SHTML文件，并获取相应的数据----->然后通过函数http_init_file()对数据进行初始化，然后退出函数http_find_file()，再退出函数http_parse_request()----->然后运行到函数http_send_data()，查找SSI的Tag，找到之后把相应的内容添加进入，然后把数据发回给浏览器----->浏览器显示对应的网页界面。 打开一个网页的程序流程大概就是这样。浏览器与STM32之间的网络通信数据，简单理解就是互相发送一串串字符串，而一帧数据字符串里面包含了某些固定的字符串(或字符，比如”GETHTTP/1.1”、”?”、”&”)，这些字符有特定的含义，而我们需要在这些字符串中找出几个特殊字符，然后根据含义进行解析处理。 二、SSI的原理及应用解析 首先来了解一下SSI的原理：将内容发送到浏览器之前，可以使用“服务器端包含 (SSI）”指令将文本、图形或应用程序信息包含到网页中。例如，可以使用 SSI 包含时间/日期戳、版权声明或供客户填写并返回的 表单。对于在多个文件中重复出现的文本或图形，使用包含文件是一种简便的方法。将内容存入一个包含文件中即可，而不必将内容输入所有文件。通过一个非常简单的语句即可调用包含文件，此语句指示 Web 服务器将内容插入适当网页。而且，使用包含文件时，对内容的所有更改只需在一个地方就能完成。 因为包含 SSI 指令的文件要求特殊处理，所以必须为所有 SSI 文件赋予 SSI 文件扩展名。默认扩展名是 .stm、.shtm 和 .shtml。 以上内容来自百度，简单的理解就是在把网页界面程序的SHTML文件发给浏览器之前，通过某几个SSI的主要函数把SHTML里面的数据进行了替换，可以说是增加了某些程序进去。而替换的规则就是查找到<!--#XXX-->，这个XXX是可以自己定义的，比如我定义LWIP_HTTPD_MAX_TAG_NAME_LEN为3，那就是这<!--#XXX-->可以放的是3个字符，比如<!--#adc-->，然后找到这个<!--#adc-->后，我把某个程序加上去，比如加上”测试ADC”。这样可能不好理解，还是直接上HTML程序，首先看一个简单的SHTML程序： <HTML> <METAcontent="text/html; charset=gb2312" http-equiv=Content-Type> <METAhttp-equiv="pragma" content="no-cache"> <SCRIPTlanguage=JavaScript><!-- functiondoLoad(){ } //--></SCRIPT> <BODYonload=doLoad();> <FORMMETHOD=POST ACTION="/test.cgi"> <TD>test<!--#adc--></TD> </FORM> </BODY> </HTML>
把这个程序复制到文本文档里面，然后另存为一个index.shtml，然后用浏览器打开就可以看到网页界面上显示:test
这个是没有经过SSI处理的，经过处理之后的SHTML程序为： <HTML> <METAcontent="text/html; charset=gb2312" http-equiv=Content-Type> <METAhttp-equiv="pragma" content="no-cache"> <SCRIPTlanguage=JavaScript><!-- functiondoLoad(){ } //--></SCRIPT> <BODYonload=doLoad();> <FORMMETHOD=POST ACTION="/test.cgi"> <TD>test<!--#adc-->测试ADC</TD> </FORM> </BODY> </HTML>
用浏览器打开就可以看到网页界面上显示:test测试ADC
这样应该就能够理解了，找到指定的<!--#xxx-->字符串后，是在后面添加程序，至于把这个<!--#xxx-->放在哪里，就看怎么去编写这个SHTML程序了。 SSI的原理其实不难理解，主要在httpdi_cgi_ss.c里面，实际使用到的有： static constchar *ppcTAGs[]= //SSI的Tag { "t", //ADC值 "w", //温度值 "h", //时间 "y", //日期 "adc",//测试ADC }; 这个数组就是存放SSI的Tag数组，在打开SHTML文件时，会通过函数get_tag_insert()把SHTML里面的Tag给找出来并且添加指定的内容，而添加的内容是通过函数SSIHandler()来判断，然后运行指定的函数去添加，而这个指定的函数，比如： void ADC_Handler(char*pcInsert) { sprintf(pcInsert,”测试ADC”); } 那么就可以直接达到在网页界面上的”test”后面添加”测试ADC”这样的效果。 但是，有个地方要注意了，如果添加的内容比较大，那么就要修改 #define LWIP_HTTPD_MAX_TAG_INSERT_LEN 的大小，这个就根据自己的需求来更改了，如果需要增加的内容比较多，改成1024甚至更大都可以。如果比实际的内容小了，那会导致网页界面无法正确显示，严重的会引起STM32硬件错误中断。 可能有些人对这个SHTML的数据（或文件）存放在哪里不是很理解，先说一下目前用的一个方法，就是做好成网页文件之后，用makefsdata.exe来生成数组，然后存放在程序里，在程序里再调用。这个方法不建议用，一是不直观，第二是修改起来太麻烦，第三是占用资源。不过有个方法和该方法类似，但方便很多，适用于HTML代码比较少，界面比较简单的网页界面。比如： voidhttp_write_testweb(char *pbuff, int *ppos) { *ppos += sprintf(pbuff + *ppos,"<HTML><META content=\"text/html; charset=gb2312\"http-equiv=Content-Type><META http-equiv=\"pragma\"content=\"no-cache\"> "); *ppos += sprintf(pbuff + *ppos,"<SCRIPT language=JavaScript><!--functiondoLoad(){}//--></SCRIPT>"); *ppos += sprintf(pbuff + *ppos,"<BODY onload=doLoad();>\r\n"); *ppos += sprintf(pbuff + *ppos,"<FORM METHOD=POST ACTION=\"/test.cgi\">"); *ppos += sprintf(pbuff + *ppos,"<TD>test<!--#adc--></TD>"); *ppos += sprintf(pbuff + *ppos,"</FORM></BODY></HTML>"); } 该函数直接把一个网页界面的HTML代码存入pbuff数组中，代码的长度是ppos，通过调用这个函数，把pbuff数组的内容通过函数get_tag_insert()添加Tag的内容后再发给浏览器，在浏览器上面就能看到如下的界面：
另一种方法就是原子哥在第六十四章综合实例用的，就是把SHTML文件存放在SPI FLASH 芯片W25Q128中，然后通过FATFS文件系统直接打开调用SHTML文件，目前定义的路径是：#define HTTP_SRC_PATH "1:SYSTEM/LWIP/WebServer"，不过在网页界面调试阶段，建议把路径改成SD卡下，那样不用每次修改SHTML文件后总是去把文件烧进W25Q128中，直接把修改好的文件放到SD卡下就可以。对于制作比较复杂的界面，建议用这种方法，很直观，而且懂得编写HTML的话，界面很快就能做出来。 三、CGI的原理及应用解析 CGI是外部应用程序（CGI程序）与 WEB服务器之间的接口标准，是在CGI程序和Web服务器之间传递信息的过程。CGI规范允许Web服务器执行外部程序，并将它们的输出发送给Web浏览器，CGI将Web的一组简单的静态超媒体文档变成一个完整的新的交互式媒体。 说白了，STM32有了CGI处理程序之后就能和网页产生互动，比如一个用户登陆界面：
输入正确的用户名和密码后，点击<登陆>按钮，这时浏览器就下发一个指令数据，该指令数据里面就包含了需要处理的用户名和密码数据(输入框里面的数据，比如用户名是admin)，STM32接收到该指令数据之后，经过解析处理，然后把处理之后的数据发回浏览器，比如验证输入的用户名和密码为错误，则在浏览器上弹出一个串口提示“用户名或密码错误！”，如果输入的用户名和密码为正确，则在浏览器上直接跳转进入另外一个网页界面。 为了比较方便理解，先看看这个登陆界面的HTML代码： <HTML><METAHTTP-EQUIV = "Pragma" CONTENT="no-cache"> <SCRIPTlanguage=JavaScript> functiondoLoad(){ } </SCRIPT> <BODYonload=doLoad();> <FORM METHOD=POSTACTION="/checklogin.cgi"> <strong>用户名</strong> <inputtype="text" size="20" name="username"> <strong>密码</strong> <inputtype="password" size="20" name="password"> <BR> <inputtype="submit" name="login" value="登陆"> </FORM> </BODY> </HTML>
这个代码中的<FORM METHOD=POST ACTION="/checklogin.cgi">表明，浏览器是下发POST指令，其中包含了checklogin.cgi处理，而这个checklogin.cgi处理是要STM32在程序里面处理。直接看点击<登陆>之后浏览器下发给STM32的数据：
从数据中可以看到”POST / checklogin.cgi”这个字符串，这个就是一个POST命令，在函数http_parse_request()中解析出来。而在后面的数据中有”username=admin&password=admin&login=%B5%C7%C2%BD”这一串数据就是要在CGI处理函数Chacklogin_CGI_Handler()中进行解析和处理，并把处理的结果发回给浏览器。 在httpdi_cgi_ss.c里面有： static consttCGI ppcURLs[]= //cgi程序 { {"/checklogin.cgi",Chacklogin_CGI_Handler}, }; //CGI 用户和密码检测设置 控制句柄 const char*Chacklogin_CGI_Handler(int iIndex, int iNumParams, char *pcParam[], char*pcValue[]) { u8 i=0; //注意根据自己的参数的多少来选择i值范围 u8 passchack=0; iIndex =FindCGIParameter("username",pcParam,iNumParams); //找到bktime的索引号 if(iIndex != -1) //找到pagingvol索引号 { for(i = 0;i < iNumParams;i++) { if(strcmp(pcParam,"username")== 0) //查找CGI参数 { if(strcmp(pcValue,"admin")== 0)//用户名正确 { passchack++; } } elseif(strcmp(pcParam,"password") == 0) //查找CGI参数 { if(strcmp(pcValue,"admin")== 0)//密码正确 { passchack++; } } } if(passchack > 1)//用户名和密码都正确了 {
return "/index.shtml"; //把保存成功的信息以及修改后的信息重新上传 } }
return "/error.shtml"; //把保存成功的信息以及修改后的信息重新上传 } 函数Chacklogin_CGI_Handler()就是验证用户名和密码是否是”admin”，正确则把index.shtml这个SHTML文件发给浏览器，浏览器则显示index.shtml的网页界面；如果用户名和密码错误则返回错误的网页界面(error.shtml的界面)。
关于CGI处理函数是在函数http_find_file()中解析到"/checklogin.cgi"后被调用，而在浏览器下发的指令中，有GET指令和POST指令的区别，这两个指令都能够带有"/checklogin.cgi"，但STM32对这两个指令的解析方法是不一样的，这一点是要注意去区分，相对来说目前的程序是直接用的GET指令来下发表单数据(就是带有<FORM METHOD=GET ACTION="/checklogin.cgi">代码的网页界面)，这个指令下发下来可以直接被解析出来并调用CGI处理函数，但它传下来的参数会直接显示在浏览器的地址输入栏里，比如“username=admin&password=admin&login=%B5%C7%C2%BD”，这样就不是特别的安全，所以不建议用次方法下发表单数据。而用POST指令下发则不会这样，相对来讲会更安全，而且如果是下发一个文件的数据，比如做网络升级时下发的bin文件，这个时候就是得用POST指令。所以接下来重点介绍POST指令的应用。 四、GET与POST指令的应用解析
GET和POST是两种最常用的HTTP请求方法。我们日常生活中“打开网页”的操作相当于“使用GET方法获取服务器资源”，而“上传附件”、“提交表格”等操作相当于“使用POST将本地资源提交给服务器”。似乎GET方法和POST方法的区别就是一个用于“索取”，一个用于“递交”。这么说也对也不对，实际使用中确实有部分程序这样使用了，但是HTTP协议设计时可不是这样考虑的，下面的表格简单对比了两者的一些差异。
| | | | | | | | | | application/x-www-form-urlencoded | application/x-www-form-urlencoded或multipart/form-data | | | | | | 浏览器只记录接收POST内容的URL但不记录POST的具体内容 | | | |
在网页界面中应用GET与POST的区别基本在与表单那里，如使用GET指令为： <FORM METHOD=GET ACTION="/checklogin.cgi"> 使用POST指令为： <FORM METHOD=POST ACTION="/checklogin.cgi"> 在STM32中，要使用POST指令需要先设置 #defineLWIP_HTTPD_SUPPORT_POST 1，然后还需要注意的是， #definePBUF_POOL_BUFSIZE 1600这个大小不能太小，因为一帧数据最大是1514，小于1514会导致接收到的数据出现错误，这个设置主要在文件上传时尤其需要注意，因为文件数据基本都是1514字节一帧数据的发给STM32。 打开#define LWIP_HTTPD_SUPPORT_POST 1后需要编写接收和解析POST指令的三个函数： err_thttpd_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) { memset(http_post_response_filename,0,sizeof(http_post_response_filename)); strcpy(response_uri,uri); return ERR_OK; }
err_thttpd_post_receive_data(void *connection, struct pbuf *p) { struct http_state *hs=(struct http_state*) connection; *(strrchr(p->payload,'&')) = 0; sprintf(http_post_response_filename +strlen(http_post_response_filename),"?%s",p->payload); return ERR_MEM;//不回复ERR_OK，为了让外面的函数能够调用http_handle_post_finished() }
voidhttpd_post_finished(void *connection, char *response_uri, u16_tresponse_uri_len) {
} static err_thttp_handle_post_finished(struct http_state *hs) { /* application error or POST finished */ /* NULL-terminate the buffer */ // http_post_response_filename[0] = 0;//数据处理已经在httpd_post_begin()和httpd_post_receive_data()函数里处理 // httpd_post_finished(hs,http_post_response_filename, LWIP_HTTPD_POST_MAX_RESPONSE_URI_LEN); return http_find_file(hs, http_post_response_filename,0); } 这三个函数的写法可以有很多种，目前我这样写只是为了方便直接使用函数http_find_file()中对CGI的判断解析方法（GET指令时的解析方法）。如果使用的是GET指令下发CGI，则在函数http_find_file()中uri[]这个数组里面可以找到” ?username=admin&password=admin&login=%B5%C7%C2%BD”，所以找到”?”这个字符就表明找到了第一个参数的地址。而使用POST指令时下发的数据中uri[]数组中是”username=admin&password=admin&login=%B5%C7%C2%BD”，没有这个”?”，所以为了方便使用函数http_find_file()，所在在函数httpd_post_receive_data()中人为的添加了”?”，并且找到倒数第一个”&”，就是只要” ?username=admin&password=admin”，当然也可以不这么写，但原理是一样的，目的就是找出” username=admin&password=admin”这些参数，然后把参数给赋值到hs中，比如把username存入hs->params[0]中，把admin存入hs->param_vals[0]，具体看函数extract_uri_parameters()。然后在接下来的处理就是在函数http_handle_post_finished()调用函数http_find_file()来找到并调用对应的CGI函数，比如调用函数Chacklogin_CGI_Handler()。 最后来看一下浏览器下发POST指令时，STM32的解析流程： http_recv()----->判断收到的是有效数据后，调用函数http_parse_request()----->解析是GET指令还是POST指令(输入IP后下发的是GET指令)，如果是POST指令，则调用函数http_post_request ()----->然后用函数httpd_post_begin()开始处理数据----->然后调用函数http_post_rxpbuf()----->再调用函数httpd_post_receive_data()处理接收到的数据 （这时是人为添加”?”）----->处理结束后是调用函数http_handle_post_finished()，这个函数中其实也就是调用函数http_find_file()来解析CGI程序指令，也就是找到并调用对应的CGI函数，比如Chacklogin_CGI_Handler()----->由于调用的CGI处理函数的返回值是一个shtml的文件路径，该文件是存放在SPIFLASH芯片W25Q128或者SD卡中的SHTML文件，获取相应的数据----->然后通过函数http_init_file()对数据进行初始化，然后退出函数http_find_file()，再退出函数http_parse_request()----->然后运行到函数http_send_data()，查找SSI的Tag，找到之后把相应的内容添加进入，然后把数据发回给浏览器----->浏览器显示CGI处理后的网页界面。
| 
/2 
|手机版|OpenEdv-开源电子网
( 粤ICP备12000418号-1 )
发表于 2017-6-26 11:43:39
楼主
就是这个附件图片都不知道哪里冒出来的，怎么都删除不了
