基于OpenWrt系统路由器的模式切换与网页设计*

曹为华，凌 强，张 雷，徐 骏，范 寅

（1.中国科学技术大学 自动化系，安徽 合肥 230027；2.科大国祯合肥城市云数据中心有限公司，安徽 合肥 230088）

基于OpenWrt系统路由器的模式切换与网页设计*

曹为华1，凌 强1，张 雷1，徐 骏1，范 寅2

（1.中国科学技术大学 自动化系，安徽 合肥 230027；2.科大国祯合肥城市云数据中心有限公司，安徽 合肥 230088）

目前商用WiFi路由器已应用到多个领域，商家通过给用户提供一个稳定免费WiFi热点达到吸引客户、提升服务的目标。传统路由器自带的Luci界面提供了工厂模式的Web界面，用户可通过该界面配置路由器。Luci采用MVC模式（Model-View-Controller）构造网页，能实现动态的程序设计，便于修改和扩展。本文主要针对OpenWrt系统的路由器，介绍如何使用Lua和JavaScript脚本语言添加用户模式Web界面。此外，还介绍了工厂模式和用户模式之间的切换、添加Web页面的方法，给出了一些应用实例。

OpenWrt系统；Lua；Web界面；模式切换；MVC

0 引言

基于OpenWrt系统的家用路由器作为免费WiFi以及广告投放的解决方案，具有成本低、部署灵活的优点，被广告商家以及大型连锁门店以集中投放、集中管理的方式运用［1］。采用该方式需要解决以下问题：精简配置管理界面，便于大规模投放部署；屏蔽认证页、广告页投放等设置，避免路由器的经营价值受损。因此需要在路由器管理界面中设定工厂模式以及用户模式，以便于设备的管理、调试、部署［2］。

本文首先介绍了 OpenWrt系统网页的工作原理，然后具体介绍了如何添加用户模式以及用户模式和工厂模式的切换原理，接下来分析了基于 Luci编写网页的具体过程。文章的最后对下一步的改进工作提出展望。

1 Luci搭建网页

要理解 Luci是如何搭建网页的，首先就要了解 Luci、Uhttpd、CGI、MVC几个概念。

Luci是 OpenWrt上的 Web管理界面，它提供给用户UCI、API接口组件，用于用户在Web界面上对路由器进行管理与设置。Luci由 Lua编写完成，Lua是一种扩展语言，几乎在所有操作系统和平台上都可以编译、运行。实际上，Lua程序的工作流程是嵌入到其他的程序中运行的［3］。

Uhttpd是OpenWrt系统路由下的一个精简的Web服务器，它具有非常低的内存开销，CPU占用率低，效能好，通常用于轻量级的嵌入式设备［4］。Uhttpd是 Luci默认的Web服务器，通过Web界面修改相关参数配置路由器。

CGI（Common Gateway Interface）是通用网关接口，它是外部应用程序与 Web服务器之间的接口标准［5］。CGI规定了 CGI程序和 Web服务器之间传递信息的规则和流程［5］。通常 Web服务器 Uhttpd的功能并没有强大到直接运行 php、asp这样的网页文件，因此与第三方约定，把请求参数发送至第三方，然后接收第三方处理结果给客户端。Lua语言编写的 Luci就是这个第三方。

用户端与 Web服务器 Uhttpd使用 CGI方式交互。Uhttpd服务器在工作过程中分叉出一个子进程，用于处理用户的具体需求，然后传递给 Luci，并在网页中将子进程的结果进行显示。

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

图1 Luci、Uhttpd、CGI与网页的关系图

Luci采用 MVC（Model-View-Controller）模式搭建网页。MVC模式把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

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

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

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

使用 MVC模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能［6］。

Controller、View、Model三者之间的关系如图2所示［7］。

图2 Controller、View、Model三者之间的关系

2 用户模式切换

2.1 MVC框架设计

Luci是一个单用户框架，在/usr/lib/lua/luci/下有三个目录，分别是model、view、controller，它们对应m、V、C［6］。公用的模块放置在/usr/lib/lua/luci/controller/下面，各个用户的模块放置在该路径下面对应的文件夹中。如路由器自带的工厂模式就位于该目录下的 admin文件夹下。新增用户模式需新添加文件夹mini，然后在该路径下添加功能程序。这样既有效地管理了不同管理员的权限，又有利于系统的拓展和维护。Controller、Model、View生成网页的关系如图3所示。

图3 Controller、Model、View生成网页关系图

在 controller目录下，每个 Lua程序都以 index（）作为起始函数。在 index（）函数中，通过调用 entry（）函数创建子节点，并把它放在全局节点树的相应位置。entry（）函数的参数规定了该节点的位置属性。

2.2 利用控制器生成Target

Controller目录下的子节点以 Target的方式生成网页。Target是由每个子节点的 entry（）函数创建的，这是dispatch（）流程最后要执行的方法。Target主要有 alise、firstchild、call、cbi、form和 template 6种生成方式。总体上可以分成两类，前两种主要用于链接其他节点，后四种则是实现函数方法或页面跳转［7］。

链接节点：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所示。

图4 用户模式（Mini）文件结构

要说明的是，此处 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所示。

图5 Footer页脚标签的工作原理

在成功添加页脚之后，整个添加用户模式和模式切换的工作就完成了。结果如图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的内容，就可以实现对应的功能。

图6 成功添加用户模式

system_state.htm是将 Lua和 JavaScript两种语言配合使用来完成相应的功能。如果编写的功能模块不需要访问路由器的数据，则利用 Lua和 JavaScript可以比较轻松地实现［4］。特别地，还可以调用一些辅助性 Shell script。在网页中，利用 Lua语言的 luci.sys.exec（）函数，就可以调用shell脚本。

例如，要测试路由器与外网是否连通，可以简单地通过 ping命令，访问某一主流网站即可。如果 ping通，则返回值为1，否则返回0。该功能可以用shell脚本写，在网页中使用如下命令：

state=tonumber（luci.sys.exec（"/shellfun/pingtest"））

这样就能执行/shellfun文件夹下的 pingtest.sh Shell脚本，返回是否连通的状态，在网页中显示相应的内容。

如果编写的功能模块需要访问路由器的数据，这就需要一个从Lua脚本到 JavaScript脚本数据交互的过程。因为 JavaScript不太适合直接访问路由器的数据，一般都是由Lua脚本程序读取路由器的数据。然后，用JSON（JavaScript Object Notation）这种轻量级的数据交换格式发送给 JavaScript脚本，利用 JavaScript脚本在网页上显示出传递的数据。

例如，当要在网页中显示某一端口的实时流量时，需要不断地访问路由器的端口流量数据。可以在/luci/ controller/mini的 system_state.lua中某一节点规定，通过Lua的函数不断地访问数据，然后用 JSON数据格式输出数据［5］。在 JavaScript脚本中，利用 XHR.poll（）函数每隔一段时间接收JSON数据，最后将数据以图表的方式动态显示。

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

4 结论

本文深入地分析了路由器 Web系统 Luci搭建网页的原理和实现细节。MVC模式是软件工程实现网站搭建的核心，通过MVC模式，大大简化了网站的开发和维护工作。在设计网页的过程中，介绍了 Lua和 JavaScript如何进行数据交互，以及如何配合外部的 shell脚本实现特定功能。

图7 路由系统状态

目前家用路由已经支持采用 TF卡、U盘等外置存储硬件，可以采用 Luci搭建接口实现路由器本地存储以及内容的投放，使之具有更高的运营价值和潜力。

［1］海虎，李涛，韩俊刚，等.多态并行处理器的数据通信和路由器的设计［J］.电子技术应用，2014，40（8）：38-40，47.

［2］朱云雷.基于互联与认证的无线路由器关键技术［J］.微型机与应用，2014，33（24）：57-58，65．

［3］张一弓.基于 OpenWrt平台的进程问通信［J］.科技创新与应用，2014（21）：62.

［4］KIM C G，KIM K J.Implementation of a cost-effective home lighting controlsystem on embedded Linux with OpenWrt［J］.Personal&Ubiquitous Computing，2014，18（3）：535-542.

［5］PALAZZI C E，BRUNATIm，ROCCETTIm.An OpenWrt solution for future wireless homes［C］.2010 IEEE International Conference on Multimedia and Expo，IEEE Computer Society，2010：1701-1706.

［6］吵吵博客．LuCI界面开发之CBI模块［EB/OL］．（2011-09-04）［2015-06-30］http：//www.chaochaoblog.com/archives/698．

［7］吵吵博客．LuCI实现启动应用程序等脚本命令 2011［EB/ OL］．（2011-09-03）［2015-06-30］http：//www.chaochaoblog.com/ archives/691.

Mode switching and Web design for OpenWrt-based routers

Cao Weihua1，Ling Qiang1，Zhang Lei1，Xu Jun1，Fan Yin2
（1.Deptartment of Automation，University of Science and Technology of China，Hefei 230027，China；2.USTC-GZ Hefei City Cloud Data Center Inc.，Hefei 230088，China）

Commercial WiFi routers have been implemented into many areas now.By providing customers with a stable free WiFi，vendors attempt to attract more customers and improve their service quality.Traditional routers provide factory mode Web interface by Luci.Users can configure routers via the supplied interface.Luci chooses the MVC pattern （Model-View-Controller）to construct web-pages，can achieve the goal of designing programs online，modifying or expanding programs very conveniently.This paper mainly focuses on the OpenWrt-based routers，introduces how to add user-mode and Web interface by using JavaScript and Lua scripting language.Moreover，the switch between the factory mode and user mode and adding Web pages are also introduced in this paper.Some examples are given.

OpenWrt system；Lua；Web interface；mode switching；MVC

TP368

A

1674-7720（2015）23-0091-04

曹为华，凌强，张雷，等.基于 OpenWrt系统路由器的模式切换与网页设计 ［J］.微型机与应用，2015，34（23）：91-94.

2015-08-05）

曹为华（1992-），男，硕士研究生，主要研究方向：嵌入式系统。

国家自然科学基金（61273112）

凌强（1975-），通信作者，男，博士，副教授，博士生导师，主要研究方向：网络化控制、嵌入式系统。E-mail：qling@ustc.edu.cn。

张雷（1990-），男，硕士研究生，主要研究方向：嵌入式系统。