前言

在《LUCI启动流程介绍》里，我们介绍了LUCI的启动主体是dispatcher.lua的dispatch()函数，他通过解析controller目录下的lua文件，定义node节点，构建node-tree来进行页面管理。本节将详细介绍M（model）、V（view）、C（controller）各个文件的功能以及如果添加新的node节点。

controller目录
model目录
view目录
新页面添加流程
官方及参考网址

controller目录

因为dispatch()函数通过解析controller目录下的lua文件构建node-tree，所以我们优先看一下这个目录的lua脚本是如何定义的。以controller/admin/status.lua的部分代码为例。

module("luci.controller.admin.status", package.seeall)function index()entry({"admin", "status"}, alias("admin", "status", "overview"), _("Status"), 20).index = trueentry({"admin", "status", "overview"}, template("admin_status/index"), _("Overview"), 1)entry({"admin", "status", "iptables"}, call("action_iptables"), _("Firewall"), 2).leaf = trueentry({"admin", "status", "processes"}, cbi("admin_status/processes"), _("Processes"), 6)
endfunction action_iptables()......
end

1、定义模块入口---> module("luci.controller.admin.status", package.seeall)

此行说明了程序和模块的路径名称，比如在controller/admin目录创建一个status.lua，那么就可以写成“luci.controller.admin.status”

2、添加index()函数，在index()函数中定义node节点属性

createtree()函数调用lua文件中的index()函数创建node-tree，同时index()引用entry函数定义node节点

3、entry (path, target, title, order)函数

（1）path：地址栏访问路径，通常也定义菜单分配，如：“{"admin", "一级菜单名", "菜单项名"}”

-- 定义菜单栏的一级菜单名
entry({"admin", "status"}, alias("admin", "status", "overview"), _("Status"), 20).index = true
-- 定义status下的overview菜单项
entry({"admin", "status", "overview"}, template("admin_status/index"), _("Overview"), 1)

（2）target：指定节点被调度（即用户点击）时的行为，主要有三种：call、template 和 cbi。

alias：别名，指向别的entry函数
call：调用指定函数，例如上述代码直接调用action_iptables函数
template：调用指定页面，例如 template(“admin_status/index”)表示调用/usr/lib/lua/luci/view/admin_status/index.htm页面
cbi：调用指定lua文件，这个页面的生成与LUA脚本及UCI配置文件息息相关，具体联系后文介绍。此时命令cbi(“admin_status/processes”)表示调用/usr/lib/lua/luci/model/cbi/admin_status/processes.lua文件。

（3）title：标题，即我们在网页中看到的菜单名（可选）

（4）order：同级节点的显示顺序，越小越靠前，反之越靠后（可选）

model目录

在entry函数中，使用cbi方式调用model下的lua文件。在这部分主要介绍model目录的lua脚本是如何定义的，他与UCI配置文件到底有何联系，保存生效如何能连接启动脚本。

1、model页面

model的页面是通过其目录下的LUA脚本与配置文件一起生成的。在LUA脚本的开头，通过 Map("配置文件文件名", "配置页面标题", "配置页面说明") 函数连接相应的配置文件；然后使用类型或者名称查找对应的section及option；最后根据页面需求，将option转换成HTML元素。以上操作就完成了model页面的配置，LUA脚本的详细介绍可以参考下列网址，这里只贴部分代码进行说明。

https://blog.csdn.net/qq_19004627/article/details/80364099
（1）/etc/config/example配置文件内容如下

config interface 'test'option enable '1'option addr '192.168.1.1'

（2）model目录的lua脚本内容如下，因为页面内容是由配置文件生成的，所以当修改完页面点击保存按钮时，修改的值也会同步到底层配置文件中。

--m = Map("配置文件文件名", "配置页面标题", "配置页面说明")
--第一个参数为配置文件存储的文件名，不包含路径，默认在/etc/config目录下
--第二个参数为页面的标题
--第三个参数为页面的描述
m = Map("example", translate("LUA Example"))--创建与配置文件中对应的section
--section的创建分为两种：NamedSection和TypedSection
--s = m:section(NamedSection, name, type, title, description)
--s = m:section(TypedSection, type, title, description)
--前者根据配置文件中的section名，例如上述配置文件中的test
--后者根据配置文件中的section类型，例如上述配置文件中的interface
s = m:section(TypedSection, "interface", translate("Example Info"))
s.anonymous = true --获取section对应的option，并转换成HTML元素
addr = s:option(Value, "addr", translate("Address"))
enable = s:option(Flag, "enable", translate("Enable"))--一定要记得return，才会有页面显示，否则是空页面
return m

（3）保存生效按钮与脚本的关联方法有二，一是捕获保存生效按钮，如果发现用户点击保存生效按钮，则调用底层脚本；

local apply = luci.http.formvalue("cbi.apply")
if apply thenluci.sys.call("/etc/init.d/example restart")
end

二是底层脚本监听配置文件是否有修改，如果发现有改动，脚本重新启动。具体操作可以参考下列网址：
https://www.cnblogs.com/mayswind/p/3468124.html

view目录

在entry函数中，主要通过template方式调用view下的HTML文件。在这部分主要介绍页面框架是如何搭建的。注：view目录下的文件虽然是HTML文件，但是文件尾缀必须要写成.htm形式

1、顶部<%- 内容 -%>：此部分主要包含lua脚本的调用，在这里获取的变量可以直接在后文HTML中进行引用。

2、中部：此部分完成CGI post及get的处理，主要使用JS语言进行编写

<script type="text/javascript" src="<%=resource%>/cbi.js"></script>
<script type="text/javascript"..></script>

3、html部分：此部分完成页面内容的显示，与常规HTML编写相同

新页面添加流程

例：在状态菜单下添加测试页面

1、在controller目录下定义node节点

entry({"admin", "status", "example"}, cbi("admin_status/example"), _("Example"), 6)

2、在/etc/config下添加配置文件example

config interface 'test'option enable '1'option addr '192.168.1.1'

3、在model目录下添加example.lua脚本

m = Map("example", translate("LUA Example"))
s = m:section(TypedSection, "interface", translate("Example Info"))
s.anonymous = true
addr = s:option(Value, "addr", translate("Address"))
enable = s:option(Flag, "enable", translate("Enable"))
return m

4、生成页面如下：

官方及参考网址

1、开发OpenWrt路由器上LuCI的模块(https://www.cnblogs.com/mayswind/p/3468124.html)
2、luci cbi 模块函数详解(https://blog.csdn.net/qq_19004627/article/details/80364099)
3、openWRT官网，保存生效调用脚本(https://oldwiki.archive.openwrt.org/doc/devel/config-scripting)
4、LUCI简单说明教程(https://wenku.baidu.com/view/7cfb0d17e518964bcf847c76.html)
5、OpenWrt自定义luci页面来修改配置文件(https://blog.csdn.net/lvshaorong/article/details/53939138)
6、LUA的详细总结(https://www.cnblogs.com/rohens-hbg/category/743186.html)

OPENWRT-LUCI开发总结-LUCI添加新页面总结相关推荐

pdf怎么删除其中一页与添加新页面
PDF文件格式是目前使用非常广泛的一种文件格式,那么小伙伴们知道如何删除pdf文件中不需要的页面吗?又应该如何给pdf文件添加新的页面呢?如果想知道这两个问题的答案的话,那就继续往下阅读吧. 操作软件 ...
【Vue】添加新页面
在[src\components\]路径下添加新vue文件,例如下图(图省事直接就复制了HelloWorld.vue,修改了一下里面的内容,需要懂html基础即可) 注意修改name 在[src\ro ...
ios开发描述文件添加新设备
我们经常用到真机测试,再development证书中添加新的设备. 首先在devices中添加上自己的设备,然后需要获取uuid号.起个名字,填上你设备的uuid号然后到描述文件里,重新生成一下描 ...
在开源UOJ的导航栏中添加新页面链接
前言刚用开源UOJ搭建OJ成功时就想在导航栏那里添加一个站内页面链接,无奈当时乱搞水平低,网上也没有教程,不晓得怎么弄今天突然来了闲情乱搞一通,结果还真乱搞成了...特意写下为后来人少走点弯路前 ...
批量给 PDF 文件的末尾添加一个新页面
概要:我们有时候需要批量给 PDF 文件的末尾添加一个新的页面,比如说我们需要给最后一页添加一个联系页面等.对于 PDF 这种文件格式来说,我们还需要安装额外的编辑软件,但是这里不需要安装专业的 PD ...
Android:如何添加一个页面，如何跳转页面
一.如何为安卓添加多个页面新建一个工程打开这样然后删掉 @Override public boolean onCreateOptionsMenu(Menu menu) { ...
ecshop后台首页mysql_ecshop 添加后台页面以及设置权限
ecshop 添加新页面给ecshop后台增加管理功能页面比如我们增加一个统计报表叫做物流费用统计报表放在后台"报表统计"栏目中具体操作步骤: 第一步,我们要添加一个菜单 ...
名编辑电子杂志大师教程 | 插入新页面、替换或删除页面、调整页面顺序
名编辑电子杂志大师是一款集编辑与转换于一身的电子杂志制作软件,我们既可以直接将PDF或图片转换成flash电子杂志,也可以从零开始制作我们独一无二的杂志.无论是哪种制作方式,我们都可以自由地添加新页面 ...
[Pandas] 添加新列
美图欣赏2022/06/18 数据准备 import pandas as pddf = pd.DataFrame([['ABC'],['FJZ'],['FOC']],columns=['Site']) ...
OpenWrt路由器上的LuCI模块开发
[一.LuCI配置界面开发的框架] LuCI是OpenWrt上的Web管理界面,LuCI采用了MVC三层架构,同时其使用Lua脚本开发,所以开发LuCI的配置界面不需要编辑任何的Html代码,除非想自 ...

OPENWRT-LUCI开发总结-LUCI添加新页面总结

前言