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

最新推荐文章于 2024-09-24 10:17:01 发布
最新推荐文章于 2024-09-24 10:17:01 发布
阅读量9.1k 收藏 38
点赞数 3
分类专栏： Openwrt 文章标签： Openwrt Openwrt web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q595860633/article/details/80763394
版权

想要对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 '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 这个文件是酱紫的：

Markdown

红色的部分我把它叫节（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关
关注
专栏目录
openwrt结合智能家居（相关搜索：路由器）
**My Coding Family**
08-31 407
🏆本文收录于《CSDN问答解惑-专业版》专栏，主要记录项目实战过程中的Bug之前因后果及提供真实有效的解决方案，希望能够助你一臂之力，帮你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！
网络安全方向相关课题和材料
10-30 1233
搜集大量网络安全行业开源项目一个是关注互联网企业/团队的安全开源项目，经企业内部实践，这些最佳实践值得借鉴。一个是来自企业安全能力建设的需求，根据需求分类，如WAF、HIDS、Git监控等。这个收集是一个长期的过程，我在GitHub创建了这个项目，专门用来收集一些优秀的甲方安全项目。还有很多很好的免费开源项目可供选择，下面列出的还只是其中很少的一部分，我将持续更新这个项目，欢迎Star。
OpenWrt网络配置详解
szembed的博客
08-28 2159
OpenWrt是一款强大的路由器操作系统，当然OpenWrt还可以作为其他用途，目前应用最广泛的就是路由器。希望对广大的客户，在配置网络有帮助。OpenWrt所有配置保存在/etc/config目录，以下为网络配置文件网络接口配置网络服务配置防火墙配置。
OpenWrt 6.为OpenWrt配置支持Web界面.rar
05-31
掌握如何给自己的开发板添加一个Web服务器。 Luci介绍 ……
OpenWrt学习（二）
最新发布
keep on going
09-24 1227
tail [参数] 文件[参数]：-n 行数，-n 50就是50行在 Shell 编程中，变量是用于存储数据值的名称。注意，变量名和等号之间不能有空格，这可能和你熟悉的所有编程语言都不一样。变量名可以包含字母（大小写敏感）、数字和下划线 _，不能包含其他特殊字符。变量名不能以数字开头，但可以包含数字。不要使用Shell的关键字（例如 if、then、else、fi、for、while 等）作为变量名，以免引起混淆。习惯上，常量的变量名通常使用大写字母，例如 PI=3.14。
openwrt 搭建web
唐僧的专栏
12-18 2730
通过 ipv4/ipv6 地址访问我的 web站点 (白飘不花钱的方式)
OpenWRT的开发
固本培元的专栏
09-10 7347
Openwrt 官方正式的发行版是已编译好了的映像文件（后缀名bin或trx、trx2），此映像文件可从Openwrt官方网站的下载页面中轻松获取到，连接地址为 OpenWrt官方网站。 准备工作 在开始编译Openwrt之前需要您做些准备工作；与其他编译过程一样，类似的编译工具和编译环境是必不可少的： 一个构建并编译OpenWrt映像的系统，简单说就是准备一个Linux或者类Unix操作系
轻松搭建个人web站点：OpenWRT教程结合内网穿透技术实现公网远程访问
Aron的博客
10-13 6381
uhttpd 是 OpenWrt/LuCI 开发者从零开始编写的 Web 服务器，目的是成为优秀稳定的、适合嵌入式设备的轻量级任务的 HTTP 服务器，并且和 OpenWrt 配置框架非常好地集成在一起。它是管理 OpenWrt 的默认的 Web 服务器，还提供了现代 Web 服务器所有的 功能。下面我们将在openwrt上部署uhttpd搭建web服务器，同时使用cpolar将其安全暴露到公网上，让公网用户也可以正常访问到openwrt下的web服务器。
【OpenWrt】（Luci）OpenWrt Web GUI 开发之 Luci 框架粗解
热门推荐
「熊猫系列项目」ing
09-20 1万+
本博文全部内容都可以在 ???? GitHub ???? 上找到。 本博文是 GitHub 上的 README 内容，故本文内部分链接是以 GitHub 上相对路径放置的，有需要请在 GitHub 中下载/查看。 因为个人的水平和精力是有限的，如果本目录下的内容存在错误，疏忽之处，欢迎指出：可创建 Issue 或者 fork 修改后向本仓库做 pull request Overview理解 Luci 架构...
openwrt 需要高级浏览器_斐讯K2P刷openwrt设置mentohust
weixin_39757040的博客
11-04 2039
因为我有手机，平板，电脑等上网设备。所以用学校的校园网上网的话。会受到限制，以前只能一个设备在线。现在可以PC端和移动端两个在线。这样就给了我们无限的发挥空间。我们可以弄一个树莓派来然后用它上网，外放WiFi做成一个类似路由器的东西。运用树莓派的话，我们还可以做成一个小型的服务器。另外一个思路的话，我们可以用路由器来刷openwrt。openwrt界面openwrt是一个嵌入式linux，一个运行...
openwrt安装web管理页面
11-06
openwrt安装web管理界面的过程及问题记录，openwrt系统opkg安装软件使用相关问题实例流程
OPENWRT交叉编译之神州数码校园客户端实践
guanfangtao2的专栏
03-20 3499
OPENWRT交叉编译之神州数码校园客户端实践 以华为HD255G为例 此教程仅供个人使用，不得用作商业用途，本文作者保留最终解释权。 转载请说明出处 浙理工 咸咖啡 附言 本人不是学程序的，也不是学习相关专业的，第一次写教程，如有不详细的地方，请大家指出，如果错误的地方，请大家指正，欢迎交流！ 许多学校寝室的上网计费系统是神州数码，神州数码和闪讯比起来，
openwrt开发包含路由器基本功能的web问题记录
buhuidage的博客
03-31 557
openwrt开发包含路由器基本功能web问题记录
在openwrt 上自建网站
weixin_52488303的博客
08-31 921
openwrt
搭建OpenWrt开发环境（包括编译过程）
linuxheik的专栏
02-26 2235
【转】搭建OpenWrt开发环境（包括编译过程） OpenWrt是一个高度模块化、高度自动化的嵌入式linux发行版，其编译和安装过程比普通的linux发行版而言，要简单太多了。如果您是新手，您那恐惧的心大可放到肚子里，呵呵。对于新手来说最麻烦的恐怕是安装开发环境需要的软件了。 最基本条件： ++++++++++++++++++++++++++++++++++++++++++
OpenWrt的Luci之Web页面开发
小乔流水仁家的博客
06-26 1万+
翻译自github：https://github.com/openwrt/luci/wiki/ModulesHowTo 或官方http://luci.subsignal.org/trac/wiki/Documentation/ModulesHowTo 编写LUCI模块 1、Luci简介 LuCI是OpenWrt上的Web管理界面，LuCI采用了MVC三层架构，使用Lua脚本开发，所以开发L...
OpenWrt的Luci之Web页面开发2
小乔流水仁家的博客
06-26 1573
写的挺好一博客1：https://www.cnblogs.com/mayswind/p/3468124.html?utm_source=tuicool&utm_medium=referral 写的挺好一博客2：https://blog.csdn.net/u012041204/article/category/6585005 3：https://blog.csdn.net/q595860...
Html和CSS的关系
weixin_30593443的博客
03-03 580
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。 2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。 3.JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值