openwrt网关页面增加新菜单并添加上传文件功能-----（一）

本文参考：

https://blog.51cto.com/wangyw/5148219

主要是前面新菜单建立看了这篇文章，后续文件上传功能留在下一片介绍

一.创建网页菜单上传文件

使用的相关文件：⑴菜单配置：/usr/share/luci/menu.d/xxx.json

-------xxx.json是要改写相关配置文件的名称

                    ⑵js的实现：/www/luci-static/resources/view/xxx.js

  -------xxx.js是要改写代码的文件

                                  

                                   图1网页修改前的界面

1.新建菜单

    一级菜单管理在/usr/share/luci-static/menu.d/luci-base.json目录下打开，在配置文件中新填如下配置：

"admin/demonstrate_menu": {

        "title":"演示_菜单建立",

        "order":8,

        "action":{

            "type":"firstchild",

  "preferred":"demonstrate_test",

            "recurse":true

        }

    }

然后在此目录下再重新创建一个json文件：/usr/share/luci/menu.d/demonstrate_test.json,在里面添加二级菜单。demonstrate_test.json文件添加如下配置：

{

  "admin/demonstrate_menu/demonstrate_test": {

        "title":"演示二级标题制作",

        "order":1,

        "action":{

            "type":"view",

            "patn":"demonstrate_path/js_01"  

  }

    }

}

保存退出，然后打开MobaXterm软件进入openwrt的后台，输入sync命令，保证文件上传到flash上，然后输入reboot命令，进行重启。

  再次打开网关界面，输入账号密码登录，就可以看见新增的菜单了（如果没有出现新菜单，清理浏览器内存，刷新界面）。

当点击二级菜单时，会显示报错。提示没有找到相应的.js文件，这是因为还未添加.js文件，可以选择先关闭。点击关闭后，出现如下界面。

注意：⑴菜单的显示先后顺序，由order决定。order越大越靠后靠下。

 ⑵一级菜单的firstchild关联的是preferred字段指定的demonstrate_test该字段拼接成admin/demonstrate_menu/demonstrate_test关联到二级菜单的demonstrate_test.json对应的字段。

1. 添加.js文件，增添上传文件功能。

   ⑴创建页面项关联的js文件，在/www/luci-static/resource/view/demonstrate_path/ 路径下创建js_01.js文件

/www/luci-static/resource/view/是js文件的目录前缀，luci会在这里找相应的js文件，创建的二级菜单关联的path字段的值是demonstrate_path/js_01那么对应的文件就是/www/luci-static/resources/view/demonstrate_path/js_01.js，这就是luci的js文件机制。