基于STM的串口服务器web功能实现

基于STM32的串口服务器web功能实现

编制：陈志磊

校对：

审核：

日期：2014-12-30

版本：V1.0

说明：

本文主要说明通过web访问来配置串口服务器参数的功能，前提要求LWIP和uCOSII 都已移植成功。实现B/S结构，须将串口服务器配置为web server。

一．Web Server 文件以及相关技术简介

1.相关文件说明

ST公司的官网上提供了通过LWIP完成web server配置的例程，打开我们的工程文件夹“LwIP1.4.1移植STM32 V1.8”，在LWIP-APP/ web_server_demo文件夹下的文件如图所示：

各个文件的说明见下表：

2.网页制作及网页数组数据转换

（1）网页制作

使用dreamweaver进行网页制作,交互方式主要是通过表单来完成，注意对于使用了需要使用SSI技术来嵌入数据的，需要将网页后缀设为shtml、shtm、stm等。ST的例程默认使用首页索引在httpd.c中g_psDefault[]数组里表示，该数组如下：

const default_ g_psDefault[] = {

{"/index.shtml", false },

{"/index.ssi", true },

{"/index.shtm", true },

{"/index.html", false },

{"/index.htm", false }

};

该数据表示支持首页索引为index.shtml、index.html、index.htm的网页文件输入。在网

页设计时，需考虑以下两个方面：

a.表单的操作设计，表单提交的方法为post，表单的处理设为对应的CGI。

b.SSI标签的嵌入。在需要嵌入信息的位置插入SSI标签。

关于CGI和SSI稍后将会简要说明。

（2）网页数组数据转换

在makefsdata 文件夹下的fs 文件为网页源文件，如下图：

由于网页源文件不能直接放到STM32 里面，所以要做一个转换，这里通过makefsdata.exe 这个工具将原始网页文件转换成.c 格式的网页数组，这样就可以添加到工程中了，makefsdata 是用来将编辑好的网页文件转换成二进制数的一个工具。接下来我们讲解一下这个工具的使用方法下面我们讲解makefsdata 工具的使用。

（1）新建一个名为fs 的文件夹，将编辑好的网页源文件放到fs 文件夹下，里面包含了编辑好的html 和.shtml 等网页文件,其中image 文件夹里面是我们使用到的图片。

（2）将fs 文件夹和makefsdada.exe 工具放到同一文件夹下,此处为makefsdata 文件夹，打开

makefsdata 文件夹,如下图所示。图中的echotool.exe 和T 为其他工具，这里没有使用到，cmd.reg 稍后我们会讲到。

（3）在makefsdata 文件夹上点击鼠标右键,然后点击”在此位置打开CMD”选项，打开后结果如图所示。此时会打开一个CMD 命令窗口。如果点击右键没有”在此位置打开CMD”选型的话，请使用makefsdata文件夹下的cmd.reg 文件导入注册表注册,双击打开cmd.reg，然后一路确定下去就可以了。

（4）在打开的CMD 命令窗口中输入：makefsdata –i 命令，按回车键。就会生成fsdata.c 文件，将该文件拷贝到web_server_demo文件下，然后以头文件的方式包含到工程中即可。

3.CGI技术简介

公共网关接口CGI(Common Gateway Interface) 是WWW 技术中最重要的技术之一，有着不可替代的重要地位。CGI 是外部应用程序与Web 服务器之间的接口标准，是在CGI 程序和Web 服务器之间传递信息的规程。CGI 规范允许Web 服务器执行外部程序，并将它们的输出发送给Web 浏览器，CGI 在物理上是一段程序，运行在服务器上，提供同客户端HTML 页面的

接口。

绝大多数的CGI 程序被用来解释处理来自表单的输入信息，并在服务器产生相应的处理，或将相应的信息反馈给浏览器，CGI 程序使网页具有交互功能。比如通过web来处理提交的数据，用的就是CGI技术。CGI示意图如下：

4.SSI技术简介

服务器端嵌入：Server Side Include，是一种类似于ASP 的基于服务器的网页制作技术。大多数的WEB 服务器等均支持SSI 命令。将内容发送到浏览器之前，可以使用“服务器端包含(SSI）”指令将文本、图形或应用程序信息包含到网页中。例如，可以使用SSI 包含时间/日期戳、版权声明或供客户填写并返回的表单。

对于在多个文件中重复出现的文本或图形，使用包含文件是一种简便的方法。将内容存入一个包含文件中即可，而不必将内容输入所有文件。通过一个非常简单的语句即可调用包含文件，此语句指示Web 服务器将内容插入适当网页。而且，使用包含文件时，对内容的所有更改只需在一个地方就能完成。因为包含SSI 指令的文件要求特殊处理，所以必须为所有SSI 文件赋予SSI 文件扩展名。默认扩展名是.stm、.shtm和.shtml。SSI 是为WEB 服务器提供的一套命令，这些命令只要直接嵌入到HTML 文档的注释内容之中即可。如：就是一条SSI 指令，其作用是将"info.htm"的内容拷贝到当前的页面中，当访问者来浏览时，会看到其它HTML 文档一样显示info.htm 其中的内。

在本项目中，将串口服务器的配置信息通过SSI嵌入的方式来显示到网页上，还有一种比较高效的交互方式，即通过ajax来实现异步交互，有兴趣可以研究下。

二．软件设计

前面介绍过，fs.c 文件管理生成的网页数组文件这个文件由ST 提供。httpd.c 文件是本章实验的重点，这个文件将开发板配置为Web Server，这个文件也由ST 官方提供的，阅读这个文件需要有网页相关的知识，这里对这个文件不做讲解。

当在浏览器中输入网址，web服务器就会返回给我们相应的网页，然后浏览器解析并呈现给我们。同样的，当我们通过浏览器访问开发板的时候，开发板这时是作为服务器的，服务器针对不同的URL 在fsdata.c 文件中找出相应的网页，并且返回给浏览器，在fsdata.c 文件中查找网页的过程就需要fs.c 里面的函数。接收浏览器发送的数据并且将网页返回给浏览器的过程都是由httpd.c 文件里面的函数来完成的。

1.POST方法实现

ST的例程中默认使用的是GET方法，而在提交用户名和密码等数据时，希望安全性更高；在提交串口服务器的配置信息时，信息比较多，也不希望全部添加到URL中，综上考虑，选择使用POST方式来提交表单。因此需要对httpd.c和httpd.h文件做一些修改。

（1）修改httpd.h文件中的宏定义LWIP_HTTPD_SUPPORT_POST，使其支持POST方法。

/** 设置为1支持POST Set this to 1 to support HTTP POST */

#ifndef LWIP_HTTPD_SUPPORT_POST

#define LWIP_HTTPD_SUPPORT_POST 1

#endif

（2）实现三个函数,关于这三个函数的详细代码，请参考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_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实现

通过表单提交的不同CGI来执行对应的handler函数，在httpd_cgi_ssi.c 中我们定义了一个数组ppcURLS，数组如下：

static const tCGI ppcURLs[]= //cgi程序

{

{"/login.cgi",Login_CGIHandler },//文件名文件功能

{"/write.cgi",WEBSET_CGIHandler },//文件名文件功能

{"/setpwd.cgi",SetPwd_CGIHandler },//文件名文件功能

{"/uart.cgi",SetUart_CGIHandler},//文件名文件功能

};

当接收到/login.cgi时，就会执行Login_CGIHandler函数，该函数代码如下：

//登录的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(pcValue[index],lwip_https://www.360docs.net/doc/f22341612.html,ername) != 0)//用户名不相等

return "/index.shtml";

}

index = FindCGIParameter ( "password", pcParam, iNumParams );

if(index!=-1)

{

if(strcmp(pcValue[index],lwip_login.passwd) != 0)//密码不相等

return "/index.shtml";

}

return "/lwipset.shtml"; //这里返回你要发给浏览器的文件名路径

}

从上面的代码可以看出，通过web浏览器提交的表单项名称依次存放在pcParam中，表单项内容依次存放在pcV alue中，iNumParams存放的是提交的数据个数。在Login_CGIHandler中，首先判断是否提交了“name”和“passward”这些表单标签，然后判断用户名和密码是否相等，如果相等，则进入串口服务器配置界面，否则，登录不成功。

其余几个handler函数的原理一样，不再赘述。

3.SSI实现

这里通过SSI来实现配置信息的显示，如下图：

要实现SSI，必须在制作网页时，在对应的需要显示的位置添加SSI标签，然后在程序检测该标签，从而嵌入对应的数据。

SSIHandler 函数为SSI 的句柄函数，函数代码如下，在这个函数中我们根据参数iIndex 调

用不同的函数来完成向网页中添加数据，这几个函数比较简单。

在httpd_cgi_ssi.c文件中，SSI标签数据定义如下：

//SSI插入标签

static const char *ppcTAGs[]= //SSI的Tag

{

"e", //登录错误

"h", //IP模式

"i", //IP地址

"j", //端口

"k", //工作模式

"l", //子网掩码

"m", //网关

"n",//目的IP

"o", //目的端口

"w", //波特率

"x", //数据位

"y", //校验位

"z", //停止位

};

SSIHandler函数代码如下，该函数通过判断SSI标签ppcTAGs来在不同的位置插入对应的信息。

//SSI的Handler句柄

//根据不同的索引来插入对应的数据

//返回：插入数据的字符串长度

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 = "动态获取";

else p = "静态";

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";

else

p = "TCP client";

WEB_dis_Handler(pcInsert,p);

break;

……

}

4.初始化

当完成以上步骤后，还需要完成CGI和SSI的初始化，分别调用http_set_cgi_handlers()和http_set_ssi_handler()来完成，代码如下：

//SSI句柄初始化

void httpd_ssi_init(void)

{

//配置内部温度传感器的SSI句柄

http_set_ssi_handler(SSIHandler,ppcTAGs,NUM_CONFIG_SSI_TAGS);

}

//CGI句柄初始化

void httpd_cgi_init(void)

{

//配置CGI句柄LEDs control CGI) */

http_set_cgi_handlers(ppcURLs, NUM_CONFIG_CGI_URIS);

}

最后，在系统初始化时，调用httpd_init()函数进行整个web server的初始化，该函数包含了上面的CGI和SSI初始化。该函数代码如下：

//初始化httpd,建立一个监听PCB并且绑定到指定的端口上

void httpd_init(void)

{

LWIP_DEBUGF(HTTPD_DEBUG, ("httpd_init\n"));

#if LWIP_HTTPD_SSI

httpd_ssi_init();

#endif

#if LWIP_HTTPD_CGI

httpd_cgi_init();

#endif

httpd_init_addr(IP_ADDR_ANY);

}

经过以上步骤，串口服务器就可以通过web浏览器访问来配置了。

三．下载验证

在代码编译成功以后，下载代码到串口服务器中，通过网线连接开发板到路由器或者交换机上，如果没有路由器的话就连接到电脑端的RJ45 上，可以配置为DHCP来获取IP地址，当获取到当前的IP地址后，就可以通过这个IP来进行web访问了。如下图所示：

如果拥有域名的话，还可以将域名解析到这个web server的IP，就可以实现通过域名来访问了。如下图所示：

登录成功的界面如下所示：

可以看到当前串口服务器的配置信息，并且可以修改它。当设置成功后，会弹出提示页面：