路由器web界面分析(二)---web和底层如何交互

在工作中涉及到了web页面和底层交互问题，这里做下简单回顾。本文基于hisi方案分析web界面、服务器boa、配置管理模块cm之间的调用逻辑。
浏览器和服务器模型基本的流程是：浏览器向服务器发送请求，服务器接收请求，解析请求的URL，然后根据请求的数据调用底层设置或者获取等接口，接着向浏览器返回相关信息，最后浏览器把数据显示出来。

他们的关系如上图。可以分为以下五个步骤：
第一阶段：构建基本的web界面
第二阶段：web向服务器发起连接请求
第三阶段：boa服务器响应请求
第四阶段：配置管理CM
第五阶段：返回数据

以 UPnP 举例分析。

第一阶段：构建基本的web界面
UPnP设置的Web界面如下，使能UPnP或者非使能UPnP。

在SDK中查找，搜索“启用UPnP”，找到“UPnPEnable_checkbox_label”。

去掉_label，继续搜索，在config.js中找到如下：

查看页面初始化函数initPage，在其中找到InitAppTag(Tags[j])，这个函数的作用是根据元素在config.js中定义的类型初始化当前页面。从上图可以看出，UPnP的type为simple_check。跟进去看，如下图所示:

继续跟下去就会发现，这里会把UPnP的web界面基本构建出来。
页面初始化函数initPage中最后会调用initAppFunction(tempTag,name)，这是函数的主要作用是调用第三级菜单init属性对应的函数，如下图，这里会调用init_upnp_set()。

以上是基本的web界面构建，而init_upnp_set()做的事情将会对服务器发起连接请求。

第二阶段：web向服务器发起连接请求

init_upnp_set()如下图定义：

getRequestData函数跟进去会发现调用sendRequest(url,param,callback)，那么可以知道是向服务器发送请求。Url关键词是upnp_app_show。

第三阶段：boa服务器响应请求

SDK中 uponCgiFormDefine 函数中定义请求的 url 和 cgi 执行函数的对
应关系，如下所示：
boaFormDefine(“upnp_app_show.cgi”,upnp_app_show_cgi); /* UPNP 设置 */
upnp_app_show.cgi 为 http 请求的 url; upnp_app_show_cgi 函数为该请求对应的执行
函数。也就是说当服务器收到upnp_app_show.cgi请求后，最终会去调用upnp_app_show_cgi函数。进入upnp_app_show_cgi函数查看：

该函数主要是要通过igdCmConfGet去获取数据。igdCmConfGet参数有三个，分别是表id号，表结构指针和表结构的长度。那么IgdAppUpnpAttrConfTab是什么呢？这就涉及到配置管理模块CM了。

第四阶段：配置管理CM

在CM中查找到IgdAppUpnpAttrConfTab如下定义：

定义表结构，遵守四字节对齐原则。不够四字节用 aucPad 或者 ucPad 补位。
再看igdCmConfGet，里面会调用HI_IPC_CALL(“IPC_igdCmConfGet”, pucInfo, len)。最终会调用HI_DEF_IPC(IPC_igdCmConfGet, void *, pucInfo,len)，然后根据表id号执行UPNP的处理函数igdCmAppUpnpAttrGet。

最终获取到的数据存放在pucInfo地址上。

第五阶段：返回数据

CM模块获取到的数据，会被boa模块中的
igdCmConfGet(IGD_APP_UPNP_ATTR_TAB,(unsigned char *)&data,sizeof(data))获取到，存放在&data地址上。接着会调用数据格式化函数，把获取到的数据格式化为json格式。

最后通过boaWrite(wp, “%s”,data_buffer);返还给web界面。
Web界面接收到数据之后，再通过调用 eval(“(“+data+”)”)，把json格式的数据转化为json对象。接着对数据data进一步解析，显示在界面。

设置下发命令分析类似。