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模式。M_model，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="..hostnameluci.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 '8'
option cronloglevel '8'
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 '1'

现在主机名是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

OpenWRT - WEB界面开发思路和基本方法相关推荐

使用Layui框架的简单web界面开发
使用Layui框架的简单web界面开发 Layui的简介优势框架的安装使用方法 Layui的简介 layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/C ...
移动端web界面开发
根据2017年大公司的市场分析报告,移动端用户上网人数和上网时间已经突飞猛进,相信在5G的环境中,更多人会选择便捷的移动端进行浏览网页获取信息.移动端界面开发也更加重要. 移动端网页前端开发和传统PC ...
android开发模仿文件管理器_2020 Web界面开发：DevExtreme全新的Diagram控件、文件管理器...
DevExpress ASP.NET Web Forms Controls拥有针对Web表单(包括报表)的110+种UI控件,DevExpress ASP.NET MVC Extensions是服务器 ...
OPPO官网web界面开发案例
成品一.框架实现构建top,header,nav,banner,star,accessory,world,serve,after_sale,footer10个部分框架,然后再逐步构建每一部分. i ...
数据库前台界面设计html,简单Web界面开发（数据库）
(1)首先配置好eclipse 和 SQL server 2016 的环境,下载sqljdbc4.jar.(我的eclipse是eclipse Neon ) (2)创建新的数据库 (3)创建java ...
AR路由器web界面每IP限速配置方法
一.做下载方向的限速: 在 QOS>接口限速,选择"新建" "接口名称"选择内网接口 "限速类型"选择IP限速(目的) "方 ...
前端改变div排序_转行学习web前端开发，需要哪些工具和需要学习什么？
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...
前端工程师需要学习ps 吗_转行学习web前端开发，需要哪些工具和需要学习什么？...
今天我们来谈谈Web和前端开发过程中需要学习什么?前端开发需要使用什么开发工具?也简单介绍前端开发前景和薪水. 前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与 ...
Web前端开发需要具备哪些职责?需要掌握哪些技能?
相信有很多小伙伴想要学习Web前端开发,下面就来和我一起来看一看. 一.前端工程师的主要职责: 前端工程师在不同的公司有不同的功能,但性质相似. 1.网站设计与网页界面开发 2.做网站 ...

OpenWRT - WEB界面开发思路和基本方法

OpenWRT - WEB界面开发思路和基本方法相关推荐

最新文章

热门文章