OpenWRT 添加 WEB 配置界面实战记录_openwrt安装web管理页面

本篇是记录在 Openwrt 镜像中添加 自定义的 web 配置界面过程，编译进 openwrt 的系统镜像中。

第一步 建立项目文件目录

mkdir -p feeds/luci/applications/luci-app-Gateway
mkdir -p feeds/luci/applications/luci-app-Gateway/config 
mkdir -p feeds/luci/applications/luci-app-Gateway/luci 
mkdir -p feeds/luci/applications/luci-app-Gateway/module
1
2
3
4

第二步 编写 controller 的 lua 源码

wooya@hi-wooya:~/openwrt-hiwooya/feeds/luci/applications/luci-app-Gateway$ cat luasrc/controller/gateway.lua 
module("luci.controller.gateway", package.seeall) 
function index()
    entry({"admin", "services", "Gateway"}, cbi("gateway/gateway_conf"), translate("Gateway"), nil)
    entry({"admin", "services", "Service"}, template("gateway/helloworld"), _("Online help"), nil)
end
1
2
3
4
5
6

第三步 编写 model 模块内容

wooya@hi-wooya:~/openwrt-hiwooya/feeds/luci/applications/luci-app-Gateway$ cat luasrc/model/cbi/gateway/gateway_conf.lua 
m = Map("gatewayConf", translate("Gateway")) -- cbi_file is the config file in /etc/config

g = m:section(TypedSection, "gateway")  -- info is the section called info in cbi_file

sn = g:option(Value, "sn", translate("Gateway SN"),"BCD code Eg:abcdef202202110001000101");

addr = g:option(Value,"IPv4addr",translate("Server IPv4:Port"),"eg:172.168.10.211:1813");

heart= g:option(Value, "HeartBeat", translate("MQTT HeartBeat"), "d:second");

name = g:option(Value, "UserName", translate("MQTT UserName"));

pwd = g:option(Value, "Password", translate("MQTT Password"));

return m
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

第四步 编码在线帮助web 网页

wooya@hi-wooya:~/openwrt-hiwooya/feeds/luci/applications/luci-app-Gateway$ cat luasrc/view/gateway/helloworld.htm 
<%+header%>
<h1><%: HelloWorld %></h1>
<%+footer%>
1
2
3
4

第五步 创建配置参数确实值

wooya@hi-wooya:~/openwrt-hiwooya/feeds/luci/applications/luci-app-Gateway/root/etc/config$ cat gatewayConf
config gateway 'parament'
        option HeartBeat '60'
        option sn 'abcdef202202110001000101'
        option UserName 'admin'
        option Password '123456'
        option IPv4addr '81.70.211.95:1883'
1
2
3
4
5
6
7

此文件镜像打包后的系统路径: etc/config 网页中显示和配置内容。

第六步 验证文件路径

wooya@hi-wooya:~/openwrt-hiwooya/feeds/luci/applications/luci-app-Gateway$ tree -L 5
.
├── luasrc
│   ├── controller
│   │   └── gateway.lua
│   ├── model
│   │   └── cbi
│   │       └── gateway
│   │           └── gateway_conf.lua
│   └── view
│       └── gateway
│           └── helloworld.htm
├── Makefile
└── root
    └── etc
        └── config
            └── gatewayConf
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

至此我们把 luci 相关源码准备好，开始编译验证

第七步 编译 luci app 模块

建立软连接并安装 luci_app_gateway 模板

//> ln -s
wooya@hi-wooya:~/openwrt-hiwooya$ cd package/feeds/luci
wooya@hi-wooya:~/openwrt-hiwooya$ package/feeds/luci$ ln -s ../../../feeds/luci/applications/luci-app-Gateway/ .
wooya@hi-wooya:~/openwrt-hiwooya$ package/feeds/luci$ ls luci-app-Gateway
luasrc  Makefile  root
wooya@hi-wooya:~/openwrt-hiwooya$ package/feeds/luci$ ls luci-app-Gateway/luasrc/
controller  model  view
//> install -p luci
wooya@hi-wooya:~/openwrt-hiwooya$ ./scripts/feeds install -a -p luci
Installing all packages from feed luci.
Installing package 'luci-app-Gateway'

# make menuconfig 

Symbol: DEFAULT_luci-app-Gateway [=DEFAULT_luci-app-Gateway]                                                                     
  │ Type  : unknown                                                                                                                  
  │                                                                                                                                 
  │                                                                                                                                 
  │ Symbol: PACKAGE_luci-app-Gateway [=y]                                                                                            
  │ Type  : tristate                                                                                                                 
  │ Prompt: luci-app-Gateway........................... LuCI Support for Gateway-menu                                                 
  │   Location:                                                                                                                     
  │     -> LuCI                                                                                                                      
  │ (1)   -> 3. Applications                                                                                                         
  │   Defined at tmp/.config-package.in:27354                                                                                       
  │   Selects: PACKAGE_librt [=y] && PACKAGE_libc [=y] && PACKAGE_libpthread [=y] && PACKAGE_libssp [=n]   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

烧写镜像后，可以在 services 菜单中，看到 Gateway 和 online help 子菜单内容。下一篇将分享如果在 C++ 程序通过 libuci.so 库
方式，获取web设置内容。

如果您对 Luci 相关语法有些陌生，可以移步至 openwrt.org 网站中wiki部分检索。