php开发路由器界面,路由器Web页面交互Tips(示例代码)

路由器Web页面开发中基于cgi形式，

一个页面对应一个c语言文件，如

network-lan.c -> lan_setup.cgi

wan.c -> wan.cgi

以network-lan.c 为例，该文件包括 main函数，Web页面生成，参数保存和读取的方法。

Web页面采用了HTML+Javascript+CSS和其他资源文件构成。

其中html文本主要是通过函数打印输出的方式实现，将html的各个元素视为可重用的关键词或语句，在输出函数为HTML的不同元素提供不同的显示方式。

例如:

{DIV_BEGIN, NULL, "class="setting">

{MISC_END, "div", NULL, NULL, NULL, NULL, NULL},

{RAWINPUT,"hostname",hostname,"text",NULL,NULL,"maxlength=‘32‘ οnblur=‘letter_digit_word_host(this, lan.hostname)‘"},

{RAWTXT,NULL,NULL,NULL,NULL,"*",NULL},

{RAWMSG, "share.maxlen32", NULL, NULL, NULL, "setting", NULL},

{MISC_END, "div", NULL, NULL, NULL, NULL, NULL},

Javascript使用两种实现方式：

1 通过在C语言函数中直接输出打印，相当于在HTML页面写js函数内容

2 调用js文件方式，将函数写在js文件中。

CSS样式则主要调用css文件的方式。

Web页面基本架构

在每个页面函数main()中，以下三个函数对HTML的文本内容进行分割，中间dispaly_form()函数在不同功能呈现不同，最终输出了一个完整的HTML代码文本

page_header(&header); //html header>menu

display_form(&form_property, &field_set, &footer_btns, &helps); //function display

page_end(); //end

页面交互逻辑

以配置更改为例

首次加载页面->读取配置->用户Web提交合法更改->获取更改的值并写入配置->刷新页面->页面读取配置并显示

页面调试方法

浏览器静态调试：浏览器访问Web页面按F12进入调试模式，可以直接查看HTML源码，并对HTML代码，CSS样式进行实时修改，从而快速尝试自己想要静态效果。

代码更新调试：在对应页面源码文件做更改后，执行make yourpath 部分编译，编译完成后，复制 .../webcgi/www/目录下对应的cgi网页文件等，传到路由器"/tmp/www/"对应路径下，实时生效，可观察页面或自定义的日志打印输出。