一. 简介

本文介绍在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({