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 ...
随机推荐
- 必读，sql加索引调优案例和explain extended说明
做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 昨天分享了Mysql中的 explain 命令,使用 explain 来分析 select 语句的运行效果,如 :expl ...
- iOS技术篇：sizeToFit 和 sizeThatFits 区别
sizeToFit:会计算出最优的 size 而且会改变自己的size UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(, , , ...
- 循序渐进学.Net Core Web Api开发系列【7】：项目发布到CentOS7
系列目录 循序渐进学.Net Core Web Api开发系列目录 本系列涉及到的源码下载地址:https://github.com/seabluescn/Blog_WebApi 一.概述 本篇讨论如 ...
- hdu 4407 容斥原理
题意: 1 //一组数据 3 3 //数字为1-3,3次运算 2 2 3 //将2号位变成3 1 1 3 4 //计算1-3号位上与4互质的数的和 1 2 3 6 好题,需要重复练习 #include ...
- C++中如何访问全局变量和全局函数
全局变量和全局函数是相对局部变量和局部函数而言的,不在{}或者for, if 等范围内的都是全局变量或者全局函数,最简单的是在同一个文件中去声明. 例如在mian.cpp中 #include < ...
- Codeforces Beta Round #14 (Div. 2) C. Four Segments 水题
C. Four Segments 题目连接: http://codeforces.com/contest/14/problem/C Description Several months later A ...
- spring cloud 学习(4) - hystrix 服务熔断处理
hystrix 是一个专用于服务熔断处理的开源项目,当依赖的服务方出现故障不可用时,hystrix有一个所谓的断路器,一但打开,就会直接拦截掉对故障服务的调用,从而防止故障进一步扩大(类似中电路中的跳 ...
- 让IIS支持10万并发
适用的IIS版本:IIS 7.0, IIS 7.5, IIS 8.0 适用的Windows版本:Windows Server 2008, Windows Server 2008 R2, Windows ...
- Python 訪问 LinkedIn （API）
CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-8-16 @author: guaguastd @name: l ...
- ubuntu中chown设置文件权限
参考文献: http://yanwen.org/doc/chown.html http://www.cppblog.com/deercoder/articles/110129.html 可以通过ls ...