openwrt 学习笔记 -- 我的第一个页面实现

     工作中，刚开始接触openwrt页面开发，作为初学者，通过第一次写博客，记录 我的openwrt工作之旅。博客中的部分实现方式和基本概念说明，也是参考了其他的文章。

一、WEB界面开发
        LuCI是OpenWrt上的Web管理界面，LuCI采用了MVC三层架构，使用Lua脚本开发，所以开发LuCI的配置界面不需要编辑任何的Html代码，除非想自己单独去创建网页(View层)，否则我们基本上只需要修改Model层就可以了。

        首先我们讲述如何在web界面增加一个新的选项，如下图“stauts”的“wftest”选项卡。


status选项在目录下/usr/lib/lua/luci/controller/admin/status.lua 中定义，我们可以在此添加wftest。文件内容如下：
function index()
        entry({"admin", "status"}, alias("admin", "status", "overview"), _("Status"), 20).index = true
        entry({"admin", "status", "overview"}, template("admin_status/index"), _("Overview"), 1)
        entry({"admin", "status", "iptables"}, call("action_iptables"), _("Firewall"), 2).leaf = true
        entry({"admin", "status", "routes"}, template("admin_status/routes"), _("Routes"), 3)
        entry({"admin", "status", "syslog"}, call("action_syslog"), _("System Log"), 4)
        entry({"admin", "status", "dmesg"}, call("action_dmesg"), _("Kernel Log"), 5)
        entry({"admin", "status", "processes"}, cbi("admin_status/processes"), _("Processes"), 6)
        entry({"admin", "status", "wftest"}, cbi("admin_status/wftest"), _("wftest"), 8)
        entry({"admin", "status", "realtime"}, alias("admin", "status", "realtime", "load"), _("Realtime Graphs"), 7)
        entry({"admin", "status", "realtime", "load"}, template("admin_status/load"), _("Load"), 1).leaf = true
        entry({"admin", "status", "realtime", "load_status"}, call("action_load")).leaf = true
        entry({"admin", "status", "realtime", "bandwidth"}, template("admin_status/bandwidth"), _("Traffic"), 2).leaf = true
        entry({"admin", "status", "realtime", "bandwidth_status"}, call("action_bandwidth")).leaf = true
        entry({"admin", "status", "realtime", "wireless"}, template("admin_status/wireless"), _("Wireless"), 3).leaf = true
        entry({"admin", "status", "realtime", "wireless_status"}, call("action_wireless")).leaf = true
        entry({"admin", "status", "realtime", "connections"}, template("admin_status/connections"), _("Connections"), 4).leaf = true
        entry({"admin", "status", "realtime", "connections_status"}, call("action_connections")).leaf = true
        entry({"admin", "status", "nameinfo"}, call("action_nameinfo")).leaf = true
end
说明：
1）可以在status标签下面看到一个新的标签wftest。
2）上面的代码添加entry后，需要在路径 /usr/lib/lua/luci/model/cbi/admin_status  增加wftest.lua文件。

wftest.lu文件定义如下：
m=Map("network", translate("test page by wftest"), translate("this is hello world."))
s = m:section(TypedSection, "wftest", translate("Network Configuration"))
s:tab("wan1", translate("wan line"))
wftest0 = s:taboption("wan1", Value, "wftest0", translate("wftest0"))
wftest0.datatype = "port"
wftest1 = s:taboption("wan1", Value, "wftest1", translate("wftest1"))
wftest1.datatype = "ip4addr"
wftest1:value("255.255.255.0")
wftest1:value("255.255.0.0")
wftest1:value("255.0.0.0")
return m;
1）这里的Map 、taboption在网上都可以查到介绍，这里可能让人疑惑的地方，就是参数port 和ip4addr是什么意思，从上面截图来看，wftest0是填写正整数，wftest1是下拉框，我们会发现，wftest0里面填写数值，如果数值不符合要求，会提示错误，我们在选择datatype值的时候就需要根据需求而定。datatype具体的实现代码在 /usr/lib/lua/luci/cbi/datatypes.lua中，如port定义：
function port(val)
        val = tonumber(val)
        return ( val and val >= 0 and val <= 65535 )
end
2） 对于使用UCI的方式，首先需要创建对应的配置文件(如果配置文件不存在的话，访问配置页面将会报错)，文件存储在文件系统“/etc/config”目录下，对于本文使用的是Map("network",...),即在“/etc/config/network”，内容如下：
config wftest                   
        option netmask1 '255.255.255.0'
        option ipaddr1 '1'
3) /etc/config/network config wftest字段的更新，可以通过上述页面的save按键生效。

三、参考资料
1 openwrt中luci学习笔记 http://blog.chinaunix.net/uid-23780428-id-4367351.html