openWRT的luci web管理器添加新菜单案例1

LuCi的界面用户目录为/usr/lib/lua/luci，以后的编辑都在这个目录下进行。LuCi是基于MVC架构的，M是已经生成的web控件（lua脚本），V是对外部提供的一些web界面，C控制M和V的显示方式。
1.登录openwrt终端：
root@OpenWrt:/# ls
bin etc mnt proc root sys usr www
dev lib overlay rom sbin tmp var
root@OpenWrt:/# ls usr/lib/lua/luci/controller/admin/
filebrowser.lua network.lua status.lua uci.lua
index.lua servicectl.lua system.lua
说明：
上面的/usr/lib/lua/luci/controller/admin目录下存放着各个入口文件，
network.lua、status、system三个文件分别对应web页面上的Status、System、Network三个导航栏。所以要添加一个导航时可以在这里新建一个lua文件。

2.进入/usr/lib/lua/luci/controller/admin目录下，打开system.lua文件进行编辑。（也可以使用vi进行编辑）
function index()
......
--20171121 crmn add

entry({"admin","system","helloluci"},template("admin_system/helloluci"),_("helloluci"),99)
end
function action_clock_status()
......
- usr/lib/lua/luci/controller/admin/system.lua 40/380 10%

　　

3.进入/usr/lib/lua/luci/view/admin_system目录下，新建helloworld.htm文件
root@OpenWrt:/# ls /usr/lib/lua/luci/view/admin_system/
applyreboot.htm clock_status.htm ipkg.htm reboot.htm
backupfiles.htm flashops.htm packages.htm upgrade.htm
root@OpenWrt:/# vim /usr/lib/lua/luci/view/admin_system/helloluci.htm
root@OpenWrt:/# cat /usr/lib/lua/luci/view/admin_system/helloluci.htm
<%+header%>
<h1><%:helloluci crmn... %></h1>
<%+footer%>

4、重新登录web页面就会出现以下效果。

//LuCi开发语法介绍：
（1）.我们添加了下面这条语句：
entry({“admin”,”system”,”helloworld”}, template(“admin_system/helloworld”), _(“Helloworld”), 99);
entry(path, target, title=nil, order=nil)这个函数用于注册一个节点
参数介绍：
path: 在调度树的位置，例如：{“foo”, “bar”, “baz”}会插入foo.bar.baz节点(文件树形结构)
target: 用户请求（点击）节点时调用的动作（可以理解为监听器），有三种类型：
call, template, cbi
title: menu上面显示的字符串（可选）
order: 在相同层次的排列顺序（可选）

template(“admin_system/helloworld”)
template :这个方式对应于web页面。
admin_system/helloworld: 对应/view/admin_system目录下的helloworld.htm文件

_(“Helloworld”)
在web页面上显示的标题

（2）.template方式的htm文件基本语法
1、 包含Lua代码:
<% code %>

2、 输出变量和函数值：
1) <% write(value) %>
2) <%=value%>

3、 包含模板:
1) <% include(templatesName) %>
2) <%+templatesName%>

4、 转换：
1) <%= translate(“Text to translate”) %>
2) <%:Text to translate%>

5、 注释：
<%# comment %>

其他语法跟html和JavaScript一样。

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

现在看上面的内容应该就容易很多了
<%+header%>就是包含一个header.htm的文件，它在源码中有提供，我们不需要自己写。
<h1></h1>就是html标签
<%: HelloWorld %>输出“HelloWorld”字符串
<%+footer%>就是包含一个footer.htm的文件，它在源码中有提供，我们不需要自己写。

　　

 

　　

参考：http://blog.csdn.net/u012041204/article/details/54952376