OpenWRT添加自定义LUCI页面示例

1.文档结构

在openwrt源代码目录 /openwrt/feeds/luci/applications/下创建文件夹luci-myapplication。文件夹必须以luci-开头以便make menuconfig识别。按如下目录创建文件夹及文件。

luci-myapplication
|---luasrc
|   |---controller
|   |   |---new_tab.lua
|   |---model
|   |   |---cbi
|   |       |---cbi_tab.lua
|   |---view
|       |---view_tab.htn
|---Makefile
|---root|---etc|---config|---cbi_file

2.文件内容

2.1 luci-myapplication/luasrc/controller/new_tab.lua

module("luci.controller.myapp.new_tab", package.seeall)  --notice that new_tab is the name of the file new_tab.luafunction index()entry({"admin", "new_tab"}, firstchild(), "New tab", 60).dependent=false  --this adds the top level tab and defaults to the first sub-tab (tab_from_cbi), also it is set to position 30entry({"admin", "new_tab", "tab_from_cbi"}, cbi("cbi_tab"), "CBI Tab", 1)  --this adds the first sub-tab that is located in <luci-path>/luci-myapplication/model/cbi and the file is called cbi_tab.lua, also set to first positionentry({"admin", "new_tab", "tab_from_view"}, template("view_tab"), "View Tab", 2)  --this adds the second sub-tab that is located in <luci-path>/luci-myapplication/view and the file is called view_tab.htm, also set to the second position
end

2.2 luci-myapplication/luasrc/model/cbi/cbi_tab.lua

m = Map("cbi_file", translate("First Tab Form"), translate("Please fill out the form below")) -- cbi_file is the config file in /etc/config
d = m:section(TypedSection, "info", "Part A of the form")  -- info is the section called info in cbi_file
a = d:option(Value, "name", "Name"); a.optional=false; a.rmempty = false;  -- name is the option in the cbi_file
return m

2.3 luci-myapplication/root/etc/config/cbi_file

config 'info' 'A' option 'name' 'OpenWRT'

2.4 luci-myapplication/luasrc/view/view_tab.lua

<%+header%>
<h1><%:Hello World%></h1>
<%+footer%>

2.5 luci-myapplication/Makefile

include $(TOPDIR)/rules.mkLUCI_TITLE:=LuCI Support for Test
LUCI_DEPENDS:=include ../../luci.mk# call BuildPackage - OpenWrt buildroot signature

3 编译过程

首先在openwrt源代码根目录下运行以下两个命令

./scripts/feeds update luci
./scripts/feeds install -a -p luci

然后运行make menuconfig，选择LuCI --->3. applications --->luci-myapplication，保存配置，编译。

4.测试

将版本下载到设备并重启后，连接电脑和设备，电脑浏览器打开192.168.1.1，输入用户名&密码，进入如下界面

点击CBI_Tab

点击VIEW_Tab

5.遇到的问题

最开始编译完并下载到设备后，连接192.168.1.1能打开首页，但是点开CBI_Tab按钮时，页面加载出现错误，如下所示。

Failed to execute cbi dispatcher target for entry '/admin/new_tab/tab_from_cbi'.
The called action terminated with an exception:
/usr/lib/lua/luci/dispatcher.lua:938: module 'luci.cbi' not found:no field package.preload['luci.cbi']no file './luci/cbi.lua'no file '/usr/share/lua/luci/cbi.lua'no file '/usr/share/lua/luci/cbi/init.lua'no file '/usr/lib/lua/luci/cbi.lua'no file '/usr/lib/lua/luci/cbi/init.lua'no file './luci/cbi.so'no file '/usr/lib/lua/luci/cbi.so'no file '/usr/lib/lua/loadall.so'no file './luci.so'no file '/usr/lib/lua/luci.so'no file '/usr/lib/lua/loadall.so'
stack traceback:[C]: in function 'require'/usr/lib/lua/luci/dispatcher.lua:938: in function </usr/lib/lua/luci/dispatcher.lua:937>

解决办法1.确保openwrt设备联网，然后输入以下命令：

root@OpenWrt:/# opkg update
root@OpenWrt:/# opkg install luci-compat
root@OpenWrt:/#

解决办法2.在源代码中将luci-compat编译进去。在源代码根目录输入make menuconfig，然后选择LuCI--->2.Modules --->luci-compat，如下图所示，保存更改，重新编译并下载到设备上即可。

6.参考网址

https://openwrt.org/docs/guide-developer/luci

https://blog.csdn.net/u012041204/article/details/54973395