OpenWrt路由器如何添加用户界面？一文看懂它的灵活配置优势

摘要：当下，商用WiFi路由器已被运用到数个领域之中，商家借由为用户供给一个稳定且免费的WiFi热点，达成吸引客户以及提升服务这样做的目标。传统路由器自身所带的Luci界面提供了工厂模式状的Web界面，而用户能够倚靠该界面去配置路由器这项操作而配置路由器。Luci凭借MVC模式（也就是Model-View-Controller模式）来构建网页，如此一来能够达成动态化那样的程序设计，从而方便进行修改并且方便进行扩展。这里主要是针对运行OpenWrt系统的路由器，来讲怎样运用Lua以及JavaScript脚本语言来增添用户模式的Web界面，除此以外，还有关于工厂模式与用户模式之间进行切换的讲述，和添加Web页面的办法说明，会给出一些应用实例呢。

0 引言

采用以OpenWrt系统为基础的家用路由器当作免费WiFi以及广告投放的解决办法，它含有成本低、部署灵活的长处，被广告商家以及大型连锁门店用集中投放、集中管理的形式来运用。运用这种形式需要处理以下难题：精简装备用于管理的界面部分来方便于大规模投放以及部署；把认证页、广告页投放等设定进行遮蔽，防止路由器在商业方面的价值受到损害。所以要在路由器管理界面里设定工厂模式以及用户模式，以此便于设备管理、调试、部署。

本文先是介绍了OpenWrt系统网页的运作原理，随后详细介绍了怎么样去添加用户模式，以及用户模式与工厂模式的切换原理，往后分析了基于Luci编写网页的实际过程。文章收尾对下一步的改进工作给出展望。

1 Luci搭建网页

先要明白Luci、Uhttpd、CGI、MVC都是些什么概念，才能知晓Luci搭建网页的方式是怎样的。

Luci乃OpenWrt之上的Web管理界面，其为用户供给UCI、API接口组件，用以让用户于Web界面那边对路由器予以管理以及设置。Luci借由Lua编写而成，Lua是一种扩展语言，差不多在所有操作系统以及平台之上皆能够编译、运行。事实上，Lua程序的工作流程是嵌入到别的程序当中来运行的。

在OpenWrt系统路由之下，有一个被叫作Uhttpd的，极为精简的Web服务器，它有着极低的内存开销，CPU占用率也是低水平的，效能良好，常常被应用于轻量级的嵌入式设备，它又是Luci默认的Web服务器，藉由Web界面去修改相关参数来配置路由器。

CGI即通用网关接口，它属于外部应用程序跟Web服务器之间的接口标准，规定了CGI程序与Web服务器间传递信息的规则及流程。通常Web服务器Uhttpd功能没强大到能直接运行php、asp这类网页文件，所以与第三方约定，把请求参数发送给第三方，接着接收第三方处理结果给客户端，Lua语言编写的Luci便是这个第三方。

采用CGI方式当中的 用户端 跟Web类服务器 也就是Uhttpd互相有了关联往来。于Uhttpd这款服务器的工作进程里 ，派生出了一个属于它的子进程 ，被用来去处理用户这一方具体的要求 ，随后传递给Luci ，并且于网页之内 把该子进程最终得到的结果予以展示。

Luci、Uhttpd、CGI与网页之间的关系如图1所示。

Luci运用MVC（即Model – View – Controller）模式来搭建网页，MVC模式将软件系统划分成三个基础部分，分别是模型（也就是Model），还有视图（称作View），以及控制器（名为Controller）。

（1）控制器（Controller）：负责转发和处理请求。

（2）视图（View）：设计的网页界面。

（3）模型（Model）：数据模型，是客观事物的抽象。

其目的在于运用MVC模式，达成一种具备动态特性的程序设计方式，能够让后续针对程序所开展的修改以及扩展工作得到简化，同时能让程序当中特定部分的重复利用成为可行的情况。

控制器、视图以及模型，这三者之间所存在的关系，就如同图2当中所展示的那样，被呈现出。

2 用户模式切换

2.1 MVC框架设计

Luci属于单用户框架，于/usr/lib/lua/luci/之下存在三个目录，这三个目录分别为model、view、controller，它们各自对应M、V、C，公用的模块被放置在。

那么，在 /usr/lib/lua/luci/controller/ 这个路径之下，紧接着各个用户的模块是要放置在该路径下面与之对应的文件夹之中的。比如说，路由器自带的工厂模式，它恰恰就是位于该目录下的 admin 文件夹之下的。接下来，如果要新增用户模式的话，就得新添加一个文件夹 mini，之后呢还要在该路径下添加功能程序。像这样做，一方面能够有效地对不同管理员的权限进行管理，另一方面呢也有利于系统的拓展以及维护。还有，Controller、Model、View 生成网页的关系是如图 3 所示的。

于controller目录里头，每一个Lua程序皆是以index作为开头起始的函数。在index函数当中，借由调用entry函数去创建子节点，并且将其放置于全局节点树里的相应位置处。entry函数的参数对该节点的位置属性作出了规定。

2.2 利用控制器生成Target

Controller目录之下的子节点，是以Target的样式来生成网页的。Target是借由每个子节点的entry函数所创建的，这属于dispatch流程最后才会执行的方法。Target主要存在alise、firstchild、call、cbi、form以及template这6种生成方式。总体而言能够划分成两类，前面两种主要是用以链接其他节点，后四种则是对函数方法予以实现或者进行页面跳转。

用于链接的节点，alias它是网页各个节点之间起到链接作用的设定。举例来说，在用户登录路由达成成功状态之后。进入呈现的网页节点里不存在定义好的具体内容时。能够借助alias这种方式办法。自动去链接到存有相关内容的Web节点处。

叶节点leaf，于其中执行相应操作时有一种方法，此方法用于一个路径，它能实现函数方法或页面跳转，还会动态生成页面html文件并传递给用户。在call、cbi、form、template这四种方法里，call调用了自定义功能函数，通过直接调用以达成特定目标，像发送数据、读取文件之类。调用cbi函数借助CBI模块能简洁高效地生成网页。函数template则是直接链接到目录view下面的htm页面来实现网页跳转。

倘若要增添用户模式（Mini），那就得于Controller目录下增添文件夹mini，就这样Luci便能径直从Controller目录去读取子节点的数目与名称，用以生成相应的节点树，于用户模式的mini目录下起码增添两个文件，头一个是index.lua文件，index.lua程序旨在达成用户名、密码的认证以及网页节点的配置，第二个是需具体予以实现的功能网页，此网页界定了生成的Target。比如以显示路由系统状态作为例子，这件事情是需要将index.lua文件添加进去的，同时还需要把system_state.lua文件添加进去。

添加的用户模式（Mini）文件结构如图4所示。

值得表明的是，在此处存在这样的规定，即system_state.lua是以template的方式来生成Target，并且会直接跳转至view/mini文件夹里面的system_state.htm文件。

事实上，用户模式以及工厂模式均是借助Luci搭建网页的，二者相互之间的原理全然相同。不一样的地方在于这儿，于用户模式之下，给用户所展示出来的是更为贴近实际使用需求的页面。除此之外，运用用户模式，将工厂模式的部分功能予以关闭，如此还能够让路由器更加高效率地运转。

成功添加用户模式之后，便须知要考虑登录认证之事。唯有输入正确用户名与密码，方可成功登录用户模式。用户模式中之所有子节点，系由上而下逐层索引，是以只要有一个节点需认证，该节点以下所有子节点亦需认证。只要mini节点存有sysauth值，其以下所有子节点皆需认证方能查看、操作。

此外，被精简的OpenWrt内核采用的是单用户机制，路由器会自动使用root用户来进行登录。也就是说，无论是工厂模式还是用户模式，所运用的都是相同的那个用户名以及密码。在经过认证操作之后，服务器端会给用户端发送一个session值，这个值是以cookie的形式存在于请求报文中的，以此来供服务器识别用户。

2.3 Footer页脚标签

路由被用户成功登录之后，是有在工厂模式以及用户模式之间作出自由切换这样需求的。完成此任务的是Footer页脚标签。Footer的赖以运作的原理是经由Luci的主题予以确定的，该主题涵盖两个内容，其一是header.htm，其二是footer.htm。header.htm能够展示每个页面的菜单栏，footer.htm会读取设立于Controller目录那里的节点，最终于页脚之中进行显示，通过链接的形式转变用户。

Footer页脚标签的工作原理如图5所示。

在达成成功添加上限页脚之后，整个增添用户样式以及样式转换这件事情就宣告完成了。呈现出来的结果如同图示6那般展现，其中footer.htm于右下方予以呈现，user model即为添加上了去的用户样式。

3 网页设计

之前有提到，要在用户模式下去生成合乎特定功能具备的网页，那就得在controller/mini目录里添加index.lua以及system_state.lua这两个文件。在system_state.lua当中，明确规定网页是以template的形式链接至view/mini文件所属的system_state.htm文件。如此一来，只要对system_state.htm的内容予以设计，便能够达成相应的功能。

拥有相应功能呢的是借助 Lua 和 JavaScript 搭配用而去实现的 system _ state .htm此文件。若编写的功能模块 不存在对路由器数据的访问需求，那么凭借 Lua 和 JavaScript 能够较为轻易地达成。专门来讲，还能够去调用一些具备辅助性 的 Shell script。于网页当中，借助 Lua 语言的 lucisys .exec 函数，便能够对 shell 脚本进行调用。

比如说，若要去测试路由器跟外网彼此会不会连通，那种情况下能够较为简便地借助ping命令，进而访问某一个主流网站便是了。要是ping已经通了，那么返回的值就会是1，不然的话返回值即为0。此项功能能够运用shell脚本来进行编写，只是在网页里面使用像下面这样的命令而已。

状态等于将，通过执行，路径是“/shellfun/pingtest”的操作，所得到的结果，转换为数字类型。

如此一来，便能够去执行放置于/shellfun文件夹里的pingtest.sh Shell脚本，进而返回是否连通的状态，然后在网页之中显示相应的内容。

要是编写的功能模块得去访问路由器的数据，那就需要一个从Lua脚本至JavaScript脚本的数据交互进程。鉴于JavaScript不太适宜直接去访问路由器的数据，通常是由Lua脚本程序读取路由器的数据，接着，采用JSON（JavaScript Object Notation）这种轻量级的数据交换格式发送给JavaScript脚本，凭借JavaScript脚本在网页上呈现出传递的数据。

例如，要在网页里显示某一端口的实时流量，就得不断去访问路由器的端口流量数据。可以在/luci/controller/mini的system_state.lua的某一节点进行规定，用Lua的函数不断去访问数据，接着以JSON数据格式输出数据。在JavaScript脚本中，借助XHR.poll函数每隔一段时间接收JSON数据，最后将数据以图表的形式动态显示。

最终实现的路由器连通测试和流量监控结果如图7所示。

4 结论

本文对路由器Web系统Luci搭建网页的原理，进行了深入透彻的分析，还分析了其实现细节。MVC模式是软件工程实现网站搭建的核心所在，仰仗MVC模式，网站的开发工作以及维护工作被大大简化。在设计网页的进程当中，介绍了Lua以及JavaScript怎样开展数据交互，还介绍了它们如何与外部的shell脚本相配合去实现特定功能。

当下，家用路由已然能够支持运用TF卡、U盘等这类外置存储硬件，能够借助Luci搭建接口达成路由器本地存储以及内容的投放，从而使其拥有更高的运营价值以及潜力。

未经允许不得转载：openwrt技术分享 » OpenWrt路由器如何添加用户界面？一文看懂它的灵活配置优势