OpenWRT - WEB界面开发思路和基本方法
想要对OpenWRT的WEB界面（*下称界面）进行修改。修改的目标是：
1.修改页面的样式，设计为企业的风格（stylesheet）
2.新建自己的功能，实现 访问页面后，用户就可以对配置文件（也就是系统的一些参数）进行修改。 甚至是与远端服务器交互，实现验证。
一. 几种可行的开发路线：
1.改用PHP、JSP等语言开发
2.修改已有的界面，实现自己的功能
2.1 修改已有样式表
2.2 仍然利用lua开发
第一种比较容易操作，但需要在设备里安装nginx和PHP环境，然后在 /www下放PHP脚本就可以了。但是这种方法可能对网关设备的存储带来较大压力。所以我没有采取这种方式。（这个就是普通的web开发，只不过多了一些对文件的读写，字符格式的匹配，还有要去操作一些linux shell命令。 前期我也开发了一个这个版本，但是后来被废弃啦。如果想用这种方式开发的欢迎来交流。）
第二种中有两种方式，这是我想分享的两种开发模式。接下来简单介绍一下。
二.LuCI的文件目录
OpenWRT luci中，web界面在/www下。其他的界面由CGI程序生成。 /www下放有index.html，仅仅用来直接跳转至 /cgi-bin/luci 。
CGI程序实质上是MVC模式。Mmodel，Vview，C~controller。MVC读取配置文件的信息，然后输出到页面上，也就是MVC里面的读“数据库”，写“数据库”。只不过这里面的“数据库”对应的是配置文件，读写方法也不太一样。
Model（配置文件）:/etc/config
View（页面文件）：/usr/lib/lua/luci/view
Controller（控制器）：/usr/lib/lua/luci/Controller。
请注意：View（页面文件）的stylesheet（样式表文件）地址是 /www/luci-static/bootstrap/cascade.css。
view、controller根据功能进行分组后存在不同的文件夹内。比如状态功能以及状态功能下的总览、防火墙等功能的view会存在admin-status文件夹下面。文件的存储路径恰好与访问功能的url一致（为http://192.168.1.1/cgi-bin/luci/admin/status/xxx）。
三.第二种方法示例
刚才说到，对界面进行开发有两种方式。这里先介绍主流的第二种方式。这种方式的优点是 能够自由自在的定义样式（我觉得重绘界面肯定比按照界面元素去挨个修改界面样式容易很多。猜想您的前端一定也会很感谢你使用了这种方法来进行开发~）
以及将业务逻辑进行简单归类，并且可以自由订制表单界面的样式和差异性（如果您暂时不能理解这点，请先跳过，看完全文后在回来分析这句话）。
controller中，url和您想要操作的行为有三种对应方式，这么说太磨叽了，不懂。简而言之就是：
url可以对应htm页面“读写数据库”，url可以调用一个方法“读或者写，也可以对数据进行操作”，url可以调用一个cbi方法，来“写数据库”。
html并不是传统意义上的静态页面。事实上，可以在.htm文件内使用lua的方法。
那么接下来简单介绍一下如何修改服务器文件。我以修改设备名字做示例。
首先，写一个htm文件，里面存着表单。
文件保存在/usr/lib/lua/luci/view下，文件名叫 setHostname.htm,文件内容如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SET-HOSTNAME</title>
</head>
<body>
<p>Setting the IP address</p>
<form method="get" action="<%=luci.dispatcher.build_url("set", "hostname")%>">
<input type="text" name="hostname">
<button id="submit">提交</button>
</form>
</body>
</html>
好了，v 搞定了，然后该弄controller了。我要能根据url访问到表单，还要写一个响应表单请求的页面（方法）能够使得文件的修改生效。
打开一个controller的文件。请注意这里不限定究竟打开哪个controller的文件。但是为了保证项目代码的易维护性，最好还是新建一个controller。在/usr/lib/lua/luci/controller下可以新建一个mytest.lua（或者mkdir一个test文件夹再新建mytest.lua）
mytest.lua的文件内容是：
module("luci.controller.mytest", package.seeall)
function index(){
entry({"fuck", "ybt", "sb"}, template("setHostname"))
entry({"set", "hostname"}, call("set_hostname"))
}
function set_hostname()
local hostname = luci.http.formvalue("hostname")
local executeString = "uci set system.@system[0].hostname="..hostname
luci.sys.exec(executeString)
end
好了，写完了这些之后，清除缓存 / 重启uhttpd / reboot就可以使对页面的修改生效。
清除缓存方法：清除/tmp下面所有luci-xxxx文件夹。 命令：rm /tmp/luci-* -rf
建议您把 -rf 写在后面，以防止无心之失。
重启uhttpd：/etc/init.d/uhttpd restart
reboot：这是终极大招。如果前两种方式都没有使界面修改生效，再考虑此方法吧~ btw ，reboot之后，你就可以断掉与路由的ssh了。因为你需要重新ssh这个路由器。 命令： reboot
接下来，访问192.168.1.1/cgi-bin/luci/fuck/ybt/sb 来对页面进行修改。然后页面会使用get的方法给192.168.1.1/cgi-bin/luci/set/hostname 传过去一个值。
192.168.1.1/cgi-bin/luci/set/hostname将调用控制器内部的set_hostname方法，设置hostname的值。
Knowledges
1.主机名存放的文件地址：/etc/config/system
这个文件的文件内容是：
config system
option zonename 'UTC'
option timezone 'GMT0'
option conloglevel ''
option cronloglevel ''
option hostname 'ybtsb' config timeserver 'ntp'
list server '0.openwrt.pool.ntp.org'
list server '1.openwrt.pool.ntp.org'
list server '2.openwrt.pool.ntp.org'
list server '3.openwrt.pool.ntp.org'
option enabled ''
现在主机名是ybtsb 。这个是我可爱的室友的名字。
2.controller是如何实现了对文件的修改呢？
controller中的lua语法调用了luci框架本身的方法，去执行一句shell语句。
luci.sys.exec("语句")
这个语句可以是任何的shell。
比如刚才提到的清理缓存：luci.sys.exec("rm /tmp/luci-* -rf")
再比如reboot。 local ybtsb="reboot" luci.sys.exec(ybtsb)这里的ybtsb是一个变量。具体lua的语法，请访问lua的官方网站。本案的开发只涉及调用一些uci的shell。故不做展开。
那么，修改文件的shell是：
uci set A.B.C=value A是文件名，B是节名，C是配置项名。value是要把C对应的项进行修改的变量
当然，聪明的你应该猜到了，从文件中获取配置项的shell是uci get A.B.C 。
我们来看一看网关的IP地址。网关的IP地址存放在/etc/config/network文件下lan节的ipaddr。
我们先vi一下这个文件。vi /etc/config/network 这个文件是酱紫的：
红色的部分我把它叫节（B）。里面的每一项叫做配置项（C）。
我们看到network下面的lan节下面的ipaddr是 192.168.1.1
ok 退出这个文件的编辑（ esc -> :q!）。
执行命令：uci get network.lan.ipaddr 回车
得到的内容是 192.168.1.1 。
当然，如果你想修改ipaddr，可以用shell ：uci get network.lan.ipaddr=192.168.1.2
…
你可能会注意到 前面修改hostname的时候，用到了@和[0]这种意味不明的东西。这是怎么回事呢？
事实上/etc/config下的配置文件中，可能含有多个含有相同节名（或者不含节名的）配置文件。怎么能够准确调取捏？
如果重名，[ 0 ] [ 1 ] 放在节的后面，依次对应着文件内的同名节第一项和第二项。顺序由其在文件内的先后顺序决定。
如果没名，就如同刚才的system文件：
B的部分，写节的类。要用@做标记，并标记先后 如上面获取hostname，就应该用uci get system.@system[0].hostname
当然！htm中也可以使用lua语句然后调取文件的内容。这个方法很简单：
在你想要调用的htm文件中这样使用：
<!--Lua Code start here-->
<%
local ip=luci.sys.exec("uci get network.lan.ipaddr")
%>
<p>IP地址是：<%=ip%></p>
OK了 以上两个案例涵盖了这种开发方式的最基本操作。当然，有些时候你可能需要对输入和输出数据格式进行调整。你可以在htm的lua代码段和控制器的方法中编写方法。具体内容请 100度 - -
最后是这种开发方式的开发思路：
1.看文档，了解你要修改的的配置项 在 那个文件中？
2.写controller，包括form target的地址和其他可访问页面的地址。
3.写html css 画界面。
4.在controller中编写数据处理函数。luci中也有trim函数哦（具体内容，请100度 ）。
5.最后，为了提升用户体验，form页应该使用ajax来传输数据。
四.第一种方法开发
注意到刚才controller的url对应中没有提及cbi。cbi干嘛用的呢？说白了就是一行代码生成一个表单页面。这个页面里有一个input和button。直接对应配置文件中的相关节和相关项。具体使用，请参见github.com/openwrt/luci/wiki/ 下面的howto。
cbi能够直接生成表单，也意味着它的高度封装给我们自定义web界面带来了困难。我们不仅无法直观修改cbi的页面样式，也不能自由自在的使用JavaScript。
直接使用lua的方法，我个人认为比较简洁。欢迎大家一同讨论openwrt web界面开发中所遇到的困难。
——————————————————
（C）Sugarguan
Upd@ 2018.06.21
Poi.Harbin Institute of Technology
---------------------
作者：Sugar关
来源：CSDN
原文：https://blog.csdn.net/q595860633/article/details/80763394
版权声明：本文为博主原创文章，转载请附上博文链接！
OpenWRT - WEB界面开发思路和基本方法的更多相关文章
- java web 入门级 开发 常用页面调试方法
这里介绍一下Java web 入门级开发中常用的代码调式方法; ( 仅供入门级童靴 参考) ; 工具: chrome 浏览器 (版本越高越好); Java web 入门级开发 主要就是两个方面: ...
- OpenWrt Web界面修改及功能实现实例说明
http://www.cnblogs.com/dwayne/archive/2012/04/21/2460830.html 通过上篇文章的介绍,我们应该了解了Lua语言在OpenWrt Web配置页面 ...
- Web界面开发必看！Kendo UI for jQuery编辑功能指南第二弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- Web界面开发必看！Kendo UI for jQuery编辑功能指南第一弹
Kendo UI for jQuery最新试用版下载 Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support f ...
- AR路由器web界面每IP限速配置方法
一.做下载方向的限速:在 QOS>接口限速,选择“新建”“接口名称”选择内网接口“限速类型”选择IP限速(目的)“方向”选择流出“起始/目的ip”写内网的ip“类型”选择独占“承诺速率”为限速的 ...
- psdash-为开发、测试人员提供简单的方法，在web界面查看服务器的运行情况（网络，带宽，磁盘，CPU）， 同时可以在web界面查看日志
psdash是linux的系统信息web指示板主要由使用数据psutil——由此得名. github地址:https://github.com/Jahaja/psdash 特性 安装 开始 配置 截图 ...
- Unity iOS混合开发界面切换思路
Unity iOS混合开发界面切换思路 最近有很多博友QQ 私信 或则 留言联系我,请教iOS和Unity界面之前相互切换的问题,源代码就不私下发你们了,界面跳转功能的代码我直接贴到下面好了,顺带说i ...
- 二十一、【.Net开源框架】EFW框架Web前端开发之目录结构和使用FireBug调试方法
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan.baidu. ...
- 关于java web开发需要哪些技术要求（简单的web界面管理系统）
目前, 国内外信息化建设已经进入基于Web应用为核心的阶段, Java作为应用于网络的最好语言,前景无限看好.然而,就算用Java建造一个不是很烦琐的web应用,也不是件轻松的事情.概括一下,实施Ja ...
随机推荐
- ip后面带端口号如何做域名解析
最近自己购买了个云服务器(阿里)和域名(腾讯,需要备案,相对比较麻烦),放上自己的工程,通过如下配置 服务器设置: 域名设置: 这样就可以通过默认的域名解析可以通过外网来访问自己的服务. 当然在内网的 ...
- 捕获程序异常之onerror
问题描述:html5页面在电脑上打开,功能正常,没有报错,一旦嵌进微信或者APP,页面就卡住了,不好排查js问题. 预期结果:手机微信页面功能失效时,开发人员在console面板能明确看到出错信息,出 ...
- [ 转载 ] Http详解2
HTTP是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统 | |目录 1引言 2一.HTTP协议详解之URL篇 3二.HTTP协议详解之请求篇 4三.HTTP协议详 ...
- 发布Web端
1.右键发布 2.配置文件,选择自定义 3.填写配置名称 4.选择本地目录 5.最后发布
- 【BZOJ 3620】 3620: 似乎在梦中见过的样子 （KMP）
3620: 似乎在梦中见过的样子 Time Limit: 15 Sec Memory Limit: 128 MBSubmit: 755 Solved: 445 Description “Madok ...
- lupgu P3950 部落冲突
题目链接 luogu P3950 部落冲突 题解 树剖线段树可以 lct还行 代码 #include<cstdio> #include<algorithm> inline in ...
- C# SqlHerper
1.C# SqlHelper public static class SqlHelper { private static readonly string conStr = Configuration ...
- BZOJ3712[PA2014]Fiolki 建图+倍增lca
居然是一道图论题 毫无思路 我们对于每一次的融合操作 $(a,b)$ 建一个新点$c$ 并向$a,b$连边 再将$b$瓶当前的位置赋成$c$ 这样子我们就可以建成一个森林 现在枚举每一种反应$M_i$ ...
- hdu 5781 ATM Mechine dp
ATM Mechine 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5781 Description Alice is going to take ...
- 自动化运维_Ansible
1. 前言 Ansible是自动化运维的工具,基于Python开发,实现了批量系统配置.批量程序部署.批量运行命令等功能. Ansible是基于模块工作的,ansible提供一个框架,通过模块实现批量 ...