好久没写过技术博客了，最近一次是2019年的。51CTO的菲菲同学是不是发来各种扫码抽奖信息，感谢菲菲同学。终于有点时间可以写一点东西了，最近开始在openwrt系统上开发web控制台，使用到了js 通过rpc调用动态生成页面，以及使用json文件生成菜单项，通过菜单项关联到js文件，在js里来画页面。这个东东着实花了我不少时间，大概2/3周吧，原谅我最后一次搞js和web的东西，已经是9年前了。9年的时间，web动态刷新技术也从ajax，有了很大的变化，在这这方面的贡献也主要是老外搞出来的。说实话，不见的老外的技术水平有多高，而在有时间有精力，肯花时间去考虑构建一个开发框架（当然搞框架实际上是考虑避免重复发明轮子，更好的复用和扩展，提高编码的效率）来飨自己和开发者。ok，废话貌似已太多，开始正题。
关于openwrt的历史，最新的版本已经迭代到22.20的版本或更新，从build kernel到，rootfs，到支持的平台，以及更多的feature，openwrt一直在路上，luci web作为配置和管理的颜值和实力的担当，也在不断进步。目前我这里luci的了解仅限于openwrt 14.07和19.07这两个版本，14.07的-页面基本沿用传统mvc的套路，19.07则在很多地方引入了配置化的菜单和js动态页面，通过json文件和js文件的配合，来扩展菜单，更易于前段人员介入到UI的交互，发挥更多的想象力。
菜单和ui conten的创建流程大致是以下这种样式的：
1.相关的文件（以下说明的相关目录和文件是基于openwrt板卡文件系统）
菜单配置：/usr/share/luci/menu.d/xxx.json
js的实现：/www/luci-static/resources/view/xxx.js
首先，新建一个菜单。
举个栗子，新建一个一级菜单，一级菜单的管理是在/usr/share/luci/menu.d/luci-base.json里，添加“一级菜单”:
"admin/menu_01": {
"title": "一级菜单_01",
"order": 8,
"action": {
"type": "firstchild",
"preferred": "item01",
"recurse": true
}
}然后创建一个json文件：/usr/share/luci/menu.d/luci-mod-menu_01.json，在里面添加"二级菜单"：
{
"admin/menu_01/item01": {
"title": "二级菜单01",
"order": 1,
"action": {
"type": "view",
"path": "menu_01/js_01"
}
}
}然后执行sync命令（保证文件回写到flash上）。
然后重启（reboot或者重新上电都可以）。
再打开主页面，就可以看到新添加的菜单。
然后要说明几个问题：
1.菜单显示的先后顺序，由order这个字段决定。order越大越靠后和靠下。
2.然后一级菜单的firstchild关联的是preferred字段指定的item01，该字段拼接成/admin/menu_01/item01，然后关联到二级菜单的luci-mod-menu_01.json对应的字段。
但是当你点击二级菜单后，会以大红色的一段警告信息，提示找不到js_01.js，🙀
ok，聪明的朋友，你意识到是在哪个字段建立的关联吗？
然后，创建页面项关联的js文件：/www/luci-static/resources/view/menu_01/js_01.js
/www/luci-static/resources/view/是js文件的目录前缀，luci会从这里找对应的js文件，我们创建的二级菜单关联的path字段的值是menu_01/js_01，那么对应的文件就是/www/luci-static/resources/view/menu_01/js_01.js，这个就是luci的js文件机制。
下面来说下负载动态刷新的页面：
负载动态刷新的菜单页面：/usr/share/luci/menu.d/luci-base.json （一级菜单中的status就是）
/usr/share/luci/menu.d/luci-mod-status.json(二级菜单中load那个就是)
负载动态刷新页面的js：/www/luci-static/resources/view/status/load.js
大家可以参考学习下。
本来还想在说说js是如何通过rpc调用获取到openwrt板卡的信息，实现动态刷新的，看来得下次了，希望不要太久。
