2 OpenWrt路由器系统开发与网页设计

https://www.zhongkerd.com/news/content-729.html

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

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所示。

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

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

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

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

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

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

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所示。

在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所示。

要说明的是，此处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的内容，就可以实现对应的功能。

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脚本实现特定功能。

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

关于：中科研拓

深圳市中科研拓科技有限公司专注提供软件外包、app开发、智能硬件开发、O2O电商平台、手机应用程序、大数据系统、物联网项目等开发外包服务，十年研发经验，上百成功案例，中科院软件外包合作企业。通过IT技术实现创造客户和社会的价值，致力于为用户提供很好的软件解决方案。联系电话400-0316-532，邮箱sales@zhongkerd.com，网址www.zhongkerd.com