OpenWrt自定义luci页面来修改配置文件

在使用OpenWrt路由器的过程中，经常需要根据需要改改配置文件然后重新启动服务什么的，一般的做法是SSH登录路由器后台，使用vi编辑器修改文件，然后使用/etc/init.d/xxxx restart 来重启服务，次数多了就会觉得很繁琐，光SSH输入密码就够麻烦的，所以不妨自己写一个luci界面在路由器web后台修改配置文件并完成重启这一系列操作。下面以Pdnsd为例进行介绍

首先看一下实现效果

要实现一个luci界面至少需要如下三个文件

A: /etc/config/pdnsd
B : /usr/lib/lua/luci/controller/pdnsd.lua
C: /usr/lib/lua/luci/model/cbi/pdnsd.lua

其中

A的作用是存储你在luci界面上的控件中填入的数值，比如用户名密码，是否可用，选择的选项等等，是一个uci配置文件，可以使用shell的uci命令进行读取

B的作用是通告OP系统你的自定义界面的显示位置，相邻排序，并指向C文件

C是最核心的文件，里面记录了你luci页面的控件布局，控件的显示内容，和控件触发事件的执行脚本

在创建每个文件之前，首先要了解一个概念，就是luci是MVC架构的，而且MVC的理念在luci上得到了最充分最明显的阐释，是理解MVC架构非常形象生动的例子，下面我就简单介绍一下luci的MVC架构。

首先请看下面的两个截图，这是两个不同OP的路由器安装同一个luci ipk安装包之后的界面，界面风格差别很大，不知道的还以为这是两个不同的软件。但其实不是，因为他们来源于同一个ipk安装包，不仅代码一模一样，里面控件的类型和数量也是一致的。而且执行效果也是一样的。

这上面左面应该是潘多拉固件或者DreamBox等等固件的截图，而右面是OP默认界面的原图，右面的加入了一些bootstrap样式。

那为什么同样的luci代码会产生如此风格迥异的界面，并且自动的适配路由器当前固件的风格呢，这就是luci使用lua脚本使用MVC架构的奥义了。同时我们也知道，luci的开发不是像网页一样使用html，css,js进行开发，而是使用lua脚本和uci接口，下面就来仔细介绍一下luci的简单开发过程。

首先我们创建上面必需的三个文件，做一个简单的界面

/etc/config/pdnsd

config arguments

由于这个文件是记录你配置好的参数的，由于我们现在并不需要记录什么参数，所以写个uci的开头就够，其中“arguments”是一个固定标志

/usr/lib/lua/luci/controller/pdnsd.lua

module("luci.controller.pdnsd", package.seeall)
function index()if not nixio.fs.access("/etc/config/pdnsd") thenreturnendentry({"admin", "services", "pdnsd"}, cbi("pdnsd"), _("Pdnsd")).dependent = true
end

这个文件的含义是：首先检查有没有/etc/config/pdnsd文件，如果有就继续向下执行，没有就当什么都没有发生过

第一行中，固定格式是“luci.controller.我的项目名”，因为我们所有的lua文件和/etc/config下面的配置文件都是以pdnsd来进行命名的，所以应该填“luci.controller.pdnsd”

倒数第二行是一个固定格式

entry(路径, 调用目标, _("显示名称"), 显示顺序)

路径：{"admin", "services", "pdnsd"} 意思是登录用户可见，“服务”主菜单下，“名字叫pdnsd的配置文件”，如果你想要放到“系统”菜单下，就把“services”改成“system”

调用目标：指向/usr/lib/lua/luci/model/cbi/pdnsd.lua这个控制文件

显示名称：显示为“Pdnsd”，当然这里也可以填UTF-8的中文，用来在主菜单上显示

显示顺序：这里没填，使用系统默认的显示顺序

这个文件规定的规则显示如下，就是下图中的"Pdnsd"选项

/usr/lib/lua/luci/model/cbi/pdnsd.lua

local fs = require "nixio.fs"
m=Map("pdnsd",translate("Pdnsd"),translate("Pdnsd可以实现类似ChinaDNS的效果，通过TCP协议进行DNS解析可以有效避免DNS污染，默认上游服务器为114DNS，可以在【DHCP/DNS】中设置【DNS转发】为【127.0.0.1#5053】即可将所有DNS请求交给pdnsd进行解析，由于pdnsd自带缓存，所以很快哦。注意SSR如果你勾选了TCP解析DNS会也会开启一个pdnsd监听7453接口，并与该页面的pdnsd冲突，点击【保存/应用】可以重启pdnsd。另外你可以使用dig来检测DNS解析情况，方法dig @127.0.0.1 -p 5053 www.facebook.com"))
s=m:section(TypedSection,"arguments","")
s.addremove=false
s.anonymous=true
return m

其中，第1行是引用依赖库，这个依赖库是用来读取和写入文件的，目前不写这一行也可以，但是要实现读写配置文件的功能，这个库是必不可少的

第2行是固定格式

m = Map("配置文件文件名", "配置页面标题", "配置页面说明")
第一个参数:上一步我们新建配置文件/etc/config/pdnsd.这里就是建立与配置文件的联系.
第二个参数：主标题.

第三个参数：副标题，注意不能出现双引号“”，否则会报错，中文要使用UTF-8编码

第3行：

m:section(类型，“arguments”，“”)

在一个配置文件中可能有很多Section,所以我们需要创建与配置文件中我们想要的Section的联系. “arguments”就是section的uci名字，就是我们在/etc/config/pdnsd中写的那个config arguments
有两种方式可以选择:NamedSection(name,type,title,description)和TypedSection(type,title,description),前者根据配置文件中的Section名，而后者根据配置文件中的Section类型.我们选用了第二种.

第4行：设定不允许增加或删除Section，这样能保证页面的清爽，不然会多出一些奇奇怪怪的控件
第5行：设定是否显示Section的名称，建议为true

这里顺带提一句，lua脚本中使用--来作为注释的标记，而不是常见的//或者#；另外luci可以显示中文，但是你在编辑lua文件的时候必须指定“UTF-8”编码，否则出来的中文是乱码

把这三个文件通过winscp上传到路由器对应的目录上，无需重启路由器，刷新一下路由器后台就可以看到效果，如下图

这样一个简单的页面就出来了，只有主标题和副标题，没有任何其他的控件

下面我们添加一个简单的checkbox，用来控制是否让配置立即生效，只需修改C文件

--Alex<1886090@gmail.com>
local fs = require "nixio.fs"
m=Map("pdnsd",translate("Pdnsd"),translate("Pdnsd可以实现类似ChinaDNS的效果，通过TCP协议进行DNS解析可以有效避免DNS污染，默认上游服务器为114DNS，可以在【DHCP/DNS】中设置【DNS转发】为【127.0.0.1#5053】即可将所有DNS请求交给pdnsd进行解析，由于pdnsd自带缓存，所以很快哦。注意SSR如果你勾选了TCP解析DNS会也会开启一个pdnsd监听7453接口，并与该页面的pdnsd冲突，点击【保存/应用】可以重启pdnsd。另外你可以使用dig来检测DNS解析情况，方法dig @127.0.0.1 -p 5053 www.facebook.com"))
s=m:section(TypedSection,"arguments","")
s.addremove=false
s.anonymous=true
view_enable = s:option(Flag,"enabled",translate("Enable"))
return m

仅添加了一行

view_enable = s:option(Flag,"enabled",translate("Enable"))

Flag是checkbox控件的意思，如果改成Value就是文本框，相当于html中的input标签

“enabled”是/etc/config/pdnsd这个uci文件的字段名，所以我们可以顺带在这个文件里加入一个默认值，如下：

config argumentsoption enabled '1'

0就是默认不选，也就是进入luci界面之后checkbox不勾选，1就是默认勾选

tanslate（“Enable”）就是checkbox前面的提示文字，如果你安装了luci-i18n等ipk，会自动翻译成你选择的语言，目前实现的效果如下

页面中果然多了一个“启用”checkbox，此时如果你点击“保存&应用”就会把该checkbox的状态记录到/etc/config/pdnsd文件中，如果勾选就是1，不勾选为0或者不显示该项

下面再来添加一个大文本框并显示我们要修改的文本文件。

--Alex<1886090@gmail.com>
local fs = require "nixio.fs"
m=Map("pdnsd",translate("Pdnsd"),translate("Pdnsd可以实现类似ChinaDNS的效果，通过TCP协议进行DNS解析可以有效避免DNS污染，默认上游服务器为114DNS，可以在【DHCP/DNS】中设置【DNS转发】为【127.0.0.1#5053】即可将所有DNS请求交给pdnsd进行解析，由于pdnsd自带缓存，所以很快哦。注意SSR如果你勾选了TCP解析DNS会也会开启一个pdnsd监听7453接口，并与该页面的pdnsd冲突，点击【保存/应用】可以重启pdnsd。另外你可以使用dig来检测DNS解析情况，方法dig @127.0.0.1 -p 5053 www.facebook.com"))
s=m:section(TypedSection,"arguments","")
s.addremove=false
s.anonymous=true
view_enable = s:option(Flag,"enabled",translate("Enable"))
view_cfg = s:option(TextValue, "1", nil)view_cfg.rmempty = falseview_cfg.rows = 43function view_cfg.cfgvalue()return nixio.fs.readfile("/etc/pdnsd.conf") or ""end
return m

上面的代码中TextValue就是大文本框的意思，相当于html中的text标签，

.rmempty = false是设置该文本框不许留空，如果为空在“保存&应用”中会出现相应的提示

.rows = 43是这个大文本框的高度为43行，如果内容超出会出现滚动条

要实现进入该界面的时候该文本框自动显示/etc/pdnsd.conf这个配置文件的内容，需要重写大文本框自带的.cfgvalue()方法，这样浏览器进入pdnsd页面之后luci后台就会自动调用该控件的.cfgvalue()方法，把文件内容呈现在浏览器上。

nixio.fs.readfile("文件路径")会读取一个文件的全部内容，返回值就是该文件的内容 or ""意思是如果前面那句报错，就输出空字符串

现在已经实现了文件的读取功能，那么如何实现文件的写入功能呢？我们需要实现TextValue控件的另一个自带方法，如下

local fs = require "nixio.fs"function sync_value_to_file(value, file)value = value:gsub("\r\n?", "\n")local old_value = nixio.fs.readfile(file)if value ~= old_value thennixio.fs.writefile(file, value)endendm=Map("pdnsd",translate("Pdnsd"),translate("Pdnsd可以实现类似ChinaDNS的效果，通过TCP协议进行DNS解析可以有效避免DNS污染，默认上游服务器为114DNS，可以在【DHCP/DNS】中设置【DNS转发】为【127.0.0.1#5053】即可将所有DNS请求交给pdnsd进行解析，由于pdnsd自带缓存，所以很快哦。注意SSR如果你勾选了TCP解析DNS会也会开启一个pdnsd监听7453接口，并与该页面的pdnsd冲突，点击【保存/应用】可以重启pdnsd。另外你可以使用dig来检测DNS解析情况，方法dig @127.0.0.1 -p 5053 www.facebook.com"))
s=m:section(TypedSection,"arguments","")
s.addremove=false
s.anonymous=trueview_enable = s:option(Flag,"enabled",translate("Enable"))view_cfg = s:option(TextValue, "1", nil)view_cfg.rmempty = falseview_cfg.rows = 43function view_cfg.cfgvalue()return nixio.fs.readfile("/etc/pdnsd.conf") or ""endfunction view_cfg.write(self, section, value)sync_value_to_file(value, "/etc/pdnsd.conf")end
return m

上面代码中又重写了.write(self,section,value)这个方法，其中value这个参数就是当前TextValue这个控件中显示的文字，于是我又写了一个函数 sync_value_to_file(文本，文件路径)方法来将控件中的内容写入到文件中去。

而那个信函数主要作用就是先把windows中的换行符“\r\n”换成linux的换行符“\n”

然后检查一下新旧文本有没有发生变化，如果发生变化才调用库函数nixio.fs.writefile(file, value)将文本写入到文件中去。

截至目前，我们已经实现了使用luci页面读写配置文件的功能了。

可是我们还想在配置文件发生修改之后自动重启后台的服务，应该怎么做呢，首先我们记得我们上面的checkbox记录了启用与否，并记在了/etc/config/pdnsd这个文件里。那么我们可以根据这个文件记录的内容，如果是1就restart pdnsd这个服务并enable，如果是0就stop这个服务并disable。那么我们先写一个shell脚本来读取uci文件的记录值并完成这一系列动作，我新建了一个/etc/pdnsd_init.sh 并添加执行权限，内容如下

echo luci for pdnsd
local vt_enabled=`uci get pdnsd.@arguments[0].enabled 2>/dev/null`
echo $vt_enabled
if [ "$vt_enabled" = 1 ]; thenlogger -t alex restarting pdnsdecho "restarting pdnsd"/etc/init.d/pdnsd enable/etc/init.d/pdnsd restart
else    logger -t alex stopping pdnsdecho "stopping pdnsd"/etc/init.d/pdnsd disable/etc/init.d/pdnsd stop
fi

一个很普通的shell脚本，其中echo语句只有使用控制台执行的时候才输出，而logger语句会输出到OpenWrt主界面【状态】-【系统日志】中去，方便记录log和分析bug

上面的uci get pdnsd.@arguments[0].enabled 就是获取uci配置文件中enabled这个字段的值，因为一个config可以有多个section，每个section下面都可以有一个叫enabled的变量，所以要填写arguments[0]。比如像如下这种uci文件，就会有多个seciton（uci和lua中nil就是null的意思）

config transparent_proxyoption main_server 'nil'option udp_relay_server 'nil'option local_port '1234'config socks5_proxyoption server 'nil'option local_port '1080'config port_forwardoption server 'nil'option local_port '5300'option destination '8.8.4.4:53'

然后使用终端执行/etc/pdnsd_init.sh系统就会根据/etc/config/pdnsd中记录的值来判断是启动还是停止pdnsd服务了，下面我们要把这个shell文件放到luci中执行，我的方法是放在之前写的文件写入方法中直接执行，这样应该是不太对的方法，不过由于我刚刚接触luci，也没发现别的方法，如果有大神发现可以告诉我。

function sync_value_to_file(value, file)value = value:gsub("\r\n?", "\n")local old_value = nixio.fs.readfile(file)if value ~= old_value thennixio.fs.writefile(file, value)endos.execute("/etc/pdnsd_init.sh >/dev/null")end

其中，os.excute("shell命令")就可以执行我们自定义的代码，然后点击”保存&应用“luci页面会转圈圈，提示”正在应用更改...“然后”配置已应用“，其中”正在应用更改...“取决于上面自定义shell脚本的运行时间，我试过如果在shell脚本中添加一句”sleep 10s“会让”正在应用更改...“的时间明显延长。

那么为什么要加上>/dev/null这个呢？其实非常必要，因为luci需要一个规定格式的输出，如果不写这句，你点击”保存&应用“之后就会出现白屏错误，然后就没有下文了，如下

所以必须把我们自己shell脚本的输出全部丢弃，只需添加>/dev/null就好，注意2>/dev/null是没有用的

至此，我们的通过luci修改配置文件并控制启动、停止的功能就全部完成了。

参考文章：http://www.right.com.cn/forum/thread-183560-1-1.html

http://blog.csdn.net/icy_river/article/details/48179649

OpenWrt自定义luci页面来修改配置文件相关推荐

OpenWRT添加自定义LUCI页面示例
1.文档结构在openwrt源代码目录 /openwrt/feeds/luci/applications/下创建文件夹luci-myapplication.文件夹必须以luci-开头以便make m ...
typora将html转为格式,Typora 修改配置文件实现自定义标签样式（常用）
Typora 修改配置文件实现自定义标签样式(常用) Typora 修改配置文件实现自定义标签样式(常用) 一.简介 Typora 是一款支持实时预览的 Markdown 文本编辑器.它系统自带了几种 ...
ASP.NET自定义错误页面(转)
ASP.NET自定义错误页面(转) ASP.NET 提供三种用于在出现错误时捕获和响应错误的主要方法:Page_Error 事件.Application_Error 事件以及应用程序配置文件 (Web ...
SpringSecurity使用自定义认证页面
SpringSecurity使用自定义认证页面在SpringSecurity主配置文件中指定认证页面配置信息修改认证页面的请求地址再次启动项目后就可以看到自定义的酷炫认证页面了!
智能路由器-OpenWRT 系列三（OpenWRT安装LuCI网络配置）
OpenWRT 安装 LUCI 每次ssh登陆OpenWRT安装新软件时,都必须更新opkg opkg update 安装LUCI opkg install luci 安装luci中文语言包, 不同O ...
keycloak 自定义登录页面
keycloak 自定义登录页面详细步骤如下: 因为keycloak是jboss开发的,使用FTL后缀开发前端文件,可能根据以下方式实现 keycloak将前端页面分为四类:按类设置主题. •Acco ...
自定义404页面并打包docker部署项目
前言最近看了docker的用法,对于容器的理解感觉还行,当是自我感觉总是不靠谱的.所以现在就来使用docker容器实际部署一下项目,检验自己对于知识的掌握. SpringBoot项目和docker的 ...
openwrt的luci应用ipk包开发(三)
luci配置页面修改配置文件先看看network的配置文件: config interface 'loopback' option ifname 'lo'option proto 'static' ...
给你的Zeit page自定义404页面
本文章最初发表在XJHui's Blog,未经允许,任何人禁止转载! 为使您获得最好的阅读体验,强烈建议您点击这里前往 XJHui's Blog 查看! 前言本教程仅适用于部署在Zeit.co的 ...
oauth2自定义登录页面
OAuth2自定义登录页面一.前言继上一篇文章<OAuth2认证授权流程解析>,我们对OAuth2的4种认证模型的流程做了一一跟踪了解,我们知道当用户访问的资源需要认证之后,就会重定向 ...

OpenWrt自定义luci页面来修改配置文件

OpenWrt自定义luci页面来修改配置文件相关推荐

最新文章

热门文章