openwrt Luci2增加自定义界面

luci2 增加自定义界面，luci2参考https://blog.csdn.net/pyt1234567890/article/details/109391884

1. feeds/xluci2/applications下新建luci2-app-mqtt

luci2-app-mqtt$ tree
.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
├── htdocs                                                                                                                                                                                               
│   └── luci2                                                                                                                                                                                            
│       ├── i18n                                                                                                                                                                                         
│       │   └── mqtt.zh-cn.json                                                                                                                                                                          
│       ├── template                                                                                                                                                                                     
│       │   └── mqtt.htm                                                                                                                                                                                 
│       └── view                                                                                                                                                                                         
│           └── mqtt.js                                                                                                                                                                                  
├── Makefile                                                                                                                                                                                                                                                                                                                                                                  
└── share
    ├── acl.d
    │   └── mqtt.json
    └── menu.d
        └── mqtt.json

Makefile：

include $(TOPDIR)/rules.mk

LUCI2_TITLE:=MQTT Config - LuCI2 interface
LUCI2_DEPENDS:=+luci2-base +rpcd-mod-file
LUCI2_DESCRIPTION:=Config MQTT Server

include ../../luci2.mk

# call BuildPackage - OpenWrt buildroot signature

mqtt.htm：

<div id="map"></div>

mqtt.js：

L.ui.view.extend({
	execute: function() {
		var m = new L.cbi.Map('mqtt', {
			caption:     L.tr('Server Config'),
			tabbed:      true
		});
		// mqtt
		var s = m.section(L.cbi.TypedSection, 'mqtt', {
			caption:     L.tr('MQTT Config'),
			description:     L.tr('')
		});
		// mqtt-ali
		s.option(L.cbi.InputValue, 'productKey', {
			caption:     L.tr('ProductKey'),
			datatype:    'string',
			optional:    true
			
		});
		s.option(L.cbi.InputValue, 'deviceSecret', {
			caption:     L.tr('DeviceSecret'),
			datatype:    'string',
			optional:    true
		});

		s.option(L.cbi.InputValue, 'deviceName', {
			caption:     L.tr('DeviceName'),
			datatype:    'string',
			optional:    true
		});

		s.option(L.cbi.InputValue, 'topic', {
			caption:     L.tr('Topic'),
			datatype:    'string',
			optional:    true
		});
		return m.insertInto('#map');
	}
});

acl.d/ mqtt.json:

{
	"mqtt": {
		"description": "mqtt configuration",
		"read": {
			"uci": [
				"mqtt"
			]
		},
		"write": {
			"uci": [
				"mqtt"
			]
		}
	}
}

menu.d/mqtt.json:

{
    "mqtt": {
        "title": "Server",
        "acls": [ "mqtt" ],
        "view": "mqtt",
        "index": 40
    }
}

2. feeds/xluci2/luci2-base/files下新建mqtt.config，用来存放保单配置

feeds/xluci2/luci2-base/files$ ls
luci2.config  luci2.default  mqtt.config

mqtt.config：

config mqtt
	option name ''

3. feeds/xluci2/luci2-base/Makefile中，install增加以下内容，将mqtt.config配置安装系统etc/config目录下

	# eric++
	$(INSTALL_CONF) ./files/mqtt.config $(1)/etc/config/mqtt

4. feeds/xluci2.index中增加如下内容，以增加luci2-app-mqtt选项

Source-Makefile: feeds/xluci2/applications/luci2-app-mqtt/Makefile

Package: luci2-app-mqtt
Submenu: Applications
Version: 1
Depends: +libc +GCC_LIBSSP:libssp +USE_GLIBC:librt +USE_GLIBC:libpthread +luci2-base +rpcd-mod-file
Conflicts: 
Menu-Depends: 
Provides: 
Section: luci2
Category: LuCI2
Repository: base
Title: app-mqtt - LuCI2 interface
Maintainer: 
Source: 
Type: ipkg
Description:    mqtt config

@@

5. 执行./scripts/feeds install -a -p xluci2，重新安装xluci2
6. 编译后，查看新增的界面
   
7. 填写表单保存后，查看表单内容

root@Eric:/etc/config# ls
dhcp      firewall  luci2     network   system    ucitrack  wireless
dropbear  luci      mqtt      rpcd      ubootenv  uhttpd
root@Eric:/etc/config# cat mqtt

config mqtt
        option productKey '1234'
        option deviceSecret '5467'
        option deviceName '222'
        option topic 'user/data'

---