一. 簡介

本文介紹在OpenWRT中使用Luci框架定制設備配置頁面的方法，包括添加靜態頁面和參數配置頁面的過程，以及如何利用lua腳本實現界面與功能的結合。

二. Luci介紹

UCI 是 Openwrt 中為實現所有系統配置的一個統一接口，英文名 Unified Configuration Interface，即統一配置接口。輕量級 LUA 語言的官方版本只包括一個精簡的核心和最基本的庫。這使得 LUA 體積小、啟動速度快，從而適合嵌入在別的程序里。 LuCI 即是這兩個項目的合體，可以實現路由的網頁配置界面。

建議在學習LuCI界面開發之前，先了解下LUA 的相關語法知識。
參考教程https://www.runoob.com/lua/lua-basic-syntax.html

LuCI采用了MVC (模型/視圖/控制）三層架構，在系統的/usr/lib/lua/luci/下有三個目錄 model、 view、 controller， 它們分別對應 M、V、 C。也可以在openwrt源碼/feeds/luci/applications/luci-app-xx/luasrc/ 或 openwrt源碼/feeds/luci/modules/luci-mod-admin-full/luasrc/ 目錄下閱讀官方的源碼例程，學習參考， 我們要做的主要工作就是基于 LuCI 框架編寫LUA 腳本、在 html 頁面中嵌入 LUA 腳本。

三. Openwrt界面開發

添加界面有兩種方式，大同小異：
① 在開發板系統中添加界面方式。
② 在源碼中添加界面方式。

第①種在系統板上修改界面配置文件后，可以馬上在網頁端看到修改效果，不用重新編譯Openwrt源碼和燒寫固件。
優點：開發便捷
缺點：重刷系統后相關文件修改信息丟失。
兩者開發方式就類似于在開發板上掛載NFS開發；第②種適合產品發布。

3.1 在開發板系統中添加界面

按照前面所講的MVC模型，將涉及的三個文件夾列出來：

1. /usr/lib/lua/luci/controller/*
2. /usr/lib/lua/luci/view/*
3. /usr/lib/lua/luci/model/cbi/*

后面我們也將圍繞這三個文件夾進行界面開發。

3.1.1 添加控制controller

進入 /usr/lib/lua/luci/controller/ 目錄下， mkdir myapp 創建myapp/目錄，并在myapp目錄下創建new_tab.lua 文件，在文件中輸入如下內容：

module("luci.controller.myapp.new_tab", package.seeall) 
function index()entry({"admin", "new_tab"}, firstchild(),translate("cfg"), 1).dependent=falseentry({"admin", "new_tab", "sn"}, cbi("myapp-mymodule/gateway_sn"), translate("sn"), 2)entry({