openwrt luci网页开发

最近在学习openwrt，做一个简单的web页面添加

openert使用luci管理web界面，luci使用的是MVC架构，使用lua脚本开发
三层架构对应的名称和路径：
M：module，路径：/usr/lib/lua/luci/model/cbi
V：view，路径：/usr/lib/lua/luci/view
C：controller，路径：/usr/lib/lua/luci/controller
开发luci的界面可以使用html的代码，也可以只修改module层
下面我用两种方式在web界面中增加一个新的选项

首先在controller层（/usr/lib/lua/luci/controller/admin）创建一个名为test.lua的文件，文件内容如下：

module("luci.controller.admin.test", package.seeall)

function index()
    entry({"admin", "TEST"}, alias("admin", "TEST", "TEST"), "TEST", 90)
    entry({"admin", "TEST", "test_viem"}, template("admin_status/test"), "Test_view", 100)
    entry({"admin", "TEST", "test_cbi"}, cbi("admin_system/testmodule"), "Test_cbi", 110)
end

简单做一下说明：
第一行是模块加载，也就是在/usr/lib/lua/luci/controller/admin/路径下加载test.lua文件
重点说一下entry函数，其定义如下，后两个参数可以为空
entry（path, target, title=nil, order=nil）
第一个entry函数是创建了一个名为TEST的一级菜单
第二个entry函数是在TEST一级菜单下创建了一个名为test_view的二级菜单
第三个entry函数是在TEST一级菜单下创建了一个名为test_cbi的二级菜单
path即路径，可以按照路径在浏览器里面访问对应的脚本
target为调用目标，有三种方式，第一种是执行指定的方法action，第二种是访问指定的页面view，第三种是调用cbi module
上述代码中的第二个entry就是访问指定的页面，文件路径为：/usr/lib/lua/luci/view/admin_status/test.htm
第三个entry就是调用cbi module，文件路径为：/usr/lib/lua/luci/model/cbi/admin_system/testmodule.lua
第三个参数title也就是菜单的显示名称，三个菜单分别显示为：TEST，Test_view，Test_cbi
第四个参数order也就是菜单的显示优先级，数值越小，越靠前显示

文件修改保存退出，重启之后（修改controller下的文件都要重启），会出现如下图所示的页面

菜单显示ok之后，就需要添加显示该网页的具体内容了
其中Test_view菜单访问的是指定的网页，对应的路径是：
/usr/lib/lua/luci/view/admin_status/test.htm
接下来我们需要编写test.htm文件的内容了
具体内容根据实际情况编写，我这里为了方便，只显示一个TEST
test.htm的具体内容为：

<%+header%>
<h1><%:TEST %></h1>
<%+footer%>

点击Test_view菜单，显示内容为：

另外一个二级菜单Test_cbi，需要修改对应路径下的testmodule.lua文件
/usr/lib/lua/luci/model/cbi/admin_system/testmodule.lua

方便起见，我直接把之前写的一个关于vxlan的拿过来用了，等有时间在具体说一下代码的含义

require("luci.sys")
require("luci.sys.zoneinfo")
require("luci.tools.webadmin")
require("luci.config")
 
    local m, s, o
  
    m = Map("vxlan", translate("VxLAN Setting"), translate("this is vxlan pre config"))
    m:chain("luci")
   
    s = m:section(TypedSection, "vxlan", translate("vxlan list"))
    s.anonymous = false -- 不显示此session名字
    s.addremove = true -- 允许删除或者创建
    
    s:tab("general",  translate("vxlan information"))

    local vni, remoteip, locaip, interface
    -- 读取vni
    vni = s:taboption("general", Value, "vni", translate("VNI"))

    -- 读取remoteip
    remoteip = s:taboption("general", Value, "remoteip", translate("RemoteIP"))

    -- 读取localip
    localip = s:taboption("general", Value, "localip", translate("LocalIP"))

    -- 读取interface
    interface = s:taboption("general", Value, "interface", translate("Interface"))

    function vni.write(self, section, value)
        Value.write(self, section, value)
    end

    function remoteip.write(self, section, value)
        Value.write(self, section, value)
    end

    function localip.write(self, section, value)
        Value.write(self, section, value)
    end

    function interface.write(self, section, value)
        Value.write(self, section, value)
    end

    return m

然后点击该二级菜单，显示效果如下：

可以对/etc/config/vxlan文件进行新增，修改，删除操作