基于OpenWrt系統(tǒng)路由器的模式切換與網(wǎng)頁(yè)設(shè)計(jì)*

曹為華，凌 強(qiáng)，張 雷，徐 駿，范 寅

（1.中國(guó)科學(xué)技術(shù)大學(xué) 自動(dòng)化系，安徽 合肥 230027；2.科大國(guó)禎合肥城市云數(shù)據(jù)中心有限公司，安徽 合肥 230088）

基于OpenWrt系統(tǒng)路由器的模式切換與網(wǎng)頁(yè)設(shè)計(jì)*

曹為華1，凌 強(qiáng)1，張 雷1，徐 駿1，范 寅2

（1.中國(guó)科學(xué)技術(shù)大學(xué) 自動(dòng)化系，安徽 合肥 230027；2.科大國(guó)禎合肥城市云數(shù)據(jù)中心有限公司，安徽 合肥 230088）

目前商用WiFi路由器已應(yīng)用到多個(gè)領(lǐng)域，商家通過(guò)給用戶提供一個(gè)穩(wěn)定免費(fèi)WiFi熱點(diǎn)達(dá)到吸引客戶、提升服務(wù)的目標(biāo)。傳統(tǒng)路由器自帶的Luci界面提供了工廠模式的Web界面，用戶可通過(guò)該界面配置路由器。Luci采用MVC模式（Model-View-Controller）構(gòu)造網(wǎng)頁(yè)，能實(shí)現(xiàn)動(dòng)態(tài)的程序設(shè)計(jì)，便于修改和擴(kuò)展。本文主要針對(duì)OpenWrt系統(tǒng)的路由器，介紹如何使用Lua和JavaScript腳本語(yǔ)言添加用戶模式Web界面。此外，還介紹了工廠模式和用戶模式之間的切換、添加Web頁(yè)面的方法，給出了一些應(yīng)用實(shí)例。

OpenWrt系統(tǒng)；Lua；Web界面；模式切換；MVC

0 引言

基于OpenWrt系統(tǒng)的家用路由器作為免費(fèi)WiFi以及廣告投放的解決方案，具有成本低、部署靈活的優(yōu)點(diǎn)，被廣告商家以及大型連鎖門店以集中投放、集中管理的方式運(yùn)用［1］。采用該方式需要解決以下問(wèn)題：精簡(jiǎn)配置管理界面，便于大規(guī)模投放部署；屏蔽認(rèn)證頁(yè)、廣告頁(yè)投放等設(shè)置，避免路由器的經(jīng)營(yíng)價(jià)值受損。因此需要在路由器管理界面中設(shè)定工廠模式以及用戶模式，以便于設(shè)備的管理、調(diào)試、部署［2］。

本文首先介紹了 OpenWrt系統(tǒng)網(wǎng)頁(yè)的工作原理，然后具體介紹了如何添加用戶模式以及用戶模式和工廠模式的切換原理，接下來(lái)分析了基于 Luci編寫網(wǎng)頁(yè)的具體過(guò)程。文章的最后對(duì)下一步的改進(jìn)工作提出展望。

1 Luci搭建網(wǎng)頁(yè)

要理解 Luci是如何搭建網(wǎng)頁(yè)的，首先就要了解 Luci、Uhttpd、CGI、MVC幾個(gè)概念。

Luci是 OpenWrt上的 Web管理界面，它提供給用戶UCI、API接口組件，用于用戶在Web界面上對(duì)路由器進(jìn)行管理與設(shè)置。Luci由 Lua編寫完成，Lua是一種擴(kuò)展語(yǔ)言，幾乎在所有操作系統(tǒng)和平臺(tái)上都可以編譯、運(yùn)行。實(shí)際上，Lua程序的工作流程是嵌入到其他的程序中運(yùn)行的［3］。

Uhttpd是OpenWrt系統(tǒng)路由下的一個(gè)精簡(jiǎn)的Web服務(wù)器，它具有非常低的內(nèi)存開銷，CPU占用率低，效能好，通常用于輕量級(jí)的嵌入式設(shè)備［4］。Uhttpd是 Luci默認(rèn)的Web服務(wù)器，通過(guò)Web界面修改相關(guān)參數(shù)配置路由器。

CGI（Common Gateway Interface）是通用網(wǎng)關(guān)接口，它是外部應(yīng)用程序與 Web服務(wù)器之間的接口標(biāo)準(zhǔn)［5］。CGI規(guī)定了 CGI程序和 Web服務(wù)器之間傳遞信息的規(guī)則和流程［5］。通常 Web服務(wù)器 Uhttpd的功能并沒(méi)有強(qiáng)大到直接運(yùn)行 php、asp這樣的網(wǎng)頁(yè)文件，因此與第三方約定，把請(qǐng)求參數(shù)發(fā)送至第三方，然后接收第三方處理結(jié)果給客戶端。Lua語(yǔ)言編寫的 Luci就是這個(gè)第三方。

用戶端與 Web服務(wù)器 Uhttpd使用 CGI方式交互。Uhttpd服務(wù)器在工作過(guò)程中分叉出一個(gè)子進(jìn)程，用于處理用戶的具體需求，然后傳遞給 Luci，并在網(wǎng)頁(yè)中將子進(jìn)程的結(jié)果進(jìn)行顯示。

Luci、Uhttpd、CGI與網(wǎng)頁(yè)之間的關(guān)系如圖1所示。

圖1 Luci、Uhttpd、CGI與網(wǎng)頁(yè)的關(guān)系圖

Luci采用 MVC（Model-View-Controller）模式搭建網(wǎng)頁(yè)。MVC模式把軟件系統(tǒng)分為三個(gè)基本部分：模型（Model）、視圖（View）和控制器（Controller）。

（1）控制器（Controller）：負(fù)責(zé)轉(zhuǎn)發(fā)和處理請(qǐng)求。

（2）視圖（View）：設(shè)計(jì)的網(wǎng)頁(yè)界面。

（3）模型（Model）：數(shù)據(jù)模型，是客觀事物的抽象。

使用 MVC模式的目的是實(shí)現(xiàn)一種動(dòng)態(tài)的程序設(shè)計(jì)，使后續(xù)對(duì)程序的修改和擴(kuò)展簡(jiǎn)化，并且使程序某一部分的重復(fù)利用成為可能［6］。

Controller、View、Model三者之間的關(guān)系如圖2所示［7］。

圖2 Controller、View、Model三者之間的關(guān)系

2 用戶模式切換

2.1 MVC框架設(shè)計(jì)

Luci是一個(gè)單用戶框架，在/usr/lib/lua/luci/下有三個(gè)目錄，分別是model、view、controller，它們對(duì)應(yīng)m、V、C［6］。公用的模塊放置在/usr/lib/lua/luci/controller/下面，各個(gè)用戶的模塊放置在該路徑下面對(duì)應(yīng)的文件夾中。如路由器自帶的工廠模式就位于該目錄下的 admin文件夾下。新增用戶模式需新添加文件夾mini，然后在該路徑下添加功能程序。這樣既有效地管理了不同管理員的權(quán)限，又有利于系統(tǒng)的拓展和維護(hù)。Controller、Model、View生成網(wǎng)頁(yè)的關(guān)系如圖3所示。

圖3 Controller、Model、View生成網(wǎng)頁(yè)關(guān)系圖

在 controller目錄下，每個(gè) Lua程序都以 index（）作為起始函數(shù)。在 index（）函數(shù)中，通過(guò)調(diào)用 entry（）函數(shù)創(chuàng)建子節(jié)點(diǎn)，并把它放在全局節(jié)點(diǎn)樹的相應(yīng)位置。entry（）函數(shù)的參數(shù)規(guī)定了該節(jié)點(diǎn)的位置屬性。

2.2 利用控制器生成Target

Controller目錄下的子節(jié)點(diǎn)以 Target的方式生成網(wǎng)頁(yè)。Target是由每個(gè)子節(jié)點(diǎn)的 entry（）函數(shù)創(chuàng)建的，這是dispatch（）流程最后要執(zhí)行的方法。Target主要有 alise、firstchild、call、cbi、form和 template 6種生成方式?？傮w上可以分成兩類，前兩種主要用于鏈接其他節(jié)點(diǎn)，后四種則是實(shí)現(xiàn)函數(shù)方法或頁(yè)面跳轉(zhuǎn)［7］。

鏈接節(jié)點(diǎn)：alias是網(wǎng)頁(yè)節(jié)點(diǎn)之間的鏈接。比如，當(dāng)用戶登錄路由成功后，進(jìn)入的網(wǎng)頁(yè)節(jié)點(diǎn)未定義內(nèi)容，可以用 alias的方法，自動(dòng)鏈接到有內(nèi)容的 Web節(jié)點(diǎn)。

實(shí)現(xiàn)函數(shù)方法或頁(yè)面跳轉(zhuǎn)：這種方法一般用于一個(gè)路徑的葉節(jié)點(diǎn) leaf，執(zhí)行相應(yīng)的操作，并且動(dòng)態(tài)生成頁(yè)面 html文件，傳遞給用戶。在 call、cbi、form、template四種方法中，call調(diào)用了自定義的功能函數(shù)，直接調(diào)用以實(shí)現(xiàn)特定的目標(biāo)，如發(fā)送數(shù)據(jù)、讀取文件等。調(diào)用 cbi函數(shù)能夠使用 CBI模塊簡(jiǎn)潔高效地生成網(wǎng)頁(yè)。函數(shù) template是直接鏈接到目錄view下面的 htm頁(yè)面，實(shí)現(xiàn)網(wǎng)頁(yè)跳轉(zhuǎn)。

如果要添加用戶模式（Mini），就必須在 Controller目錄下添加文件夾mini。這樣 Luci就能夠直接從 Controller目錄下讀取子節(jié)點(diǎn)的數(shù)目及名稱，以便生成對(duì)應(yīng)的節(jié)點(diǎn)樹。在用戶模式的mini目錄下至少添加兩個(gè)文件。第一個(gè)是 index.lua文件，index.lua程序是為了實(shí)現(xiàn)用戶名、密碼的認(rèn)證和網(wǎng)頁(yè)節(jié)點(diǎn)的配置。第二個(gè)是要具體實(shí)現(xiàn)的功能網(wǎng)頁(yè)，該網(wǎng)頁(yè)定義了生成的Target。以顯示路由系統(tǒng)狀態(tài)為例，需要添加 index.lua和system_state.lua文件。添加的用戶模式（Mini）文件結(jié)構(gòu)如圖4所示。

圖4 用戶模式（Mini）文件結(jié)構(gòu)

要說(shuō)明的是，此處 system_state.lua規(guī)定是用 template的方式生成 Target，直接跳轉(zhuǎn)到 view/mini文件夾下的system_state.htm文件。

實(shí)際上，用戶模式和工廠模式都是使用 Luci搭建網(wǎng)頁(yè)，二者之間的原理完全相同。不同的是，在用戶模式下，給用戶顯示的是更加貼近實(shí)際使用需求的頁(yè)面。此外，使用用戶模式，關(guān)閉工廠模式的部分功能，還能使路由器更加高效地運(yùn)轉(zhuǎn)。

在成功添加了用戶模式后，就要考慮登錄認(rèn)證的問(wèn)題。只有輸入正確的用戶名和密碼之后，才能成功登錄用戶模式。用戶模式下的所有子節(jié)點(diǎn)是由上而下逐層索引的，因此只要有一個(gè)節(jié)點(diǎn)需要認(rèn)證，在該節(jié)點(diǎn)下的所有子節(jié)點(diǎn)也需要認(rèn)證。只要mini節(jié)點(diǎn)有 sysauth值，它以下的所有子節(jié)點(diǎn)都需要認(rèn)證才能查看、操作。

此外，OpenWrt的精簡(jiǎn)內(nèi)核是單用戶機(jī)制，路由器自動(dòng)以 root用戶登錄。也就是說(shuō)，工廠模式和用戶模式使用的是同一個(gè)用戶名和密碼。通過(guò)認(rèn)證后，服務(wù)器端會(huì)發(fā)給用戶端一個(gè) session值，該值以 cookie的形式存在于請(qǐng)求報(bào)文中，供服務(wù)器識(shí)別用戶。

2.3 Footer頁(yè)腳標(biāo)簽

用戶成功登錄路由后，要求能夠在工廠模式與用戶模式之間自由切換。這個(gè)任務(wù)就由Footer頁(yè)腳標(biāo)簽來(lái)完成。Footer的工作原理是由 Luci的主題決定的，主題包含兩個(gè)內(nèi)容，分別是 header.htm和 footer.htm。header.htm能顯示每個(gè)頁(yè)面的菜單欄，footer.htm則會(huì)讀取 Controller目錄下的節(jié)點(diǎn)，最終顯示在頁(yè)腳中，以鏈接的方式切換用戶。

Footer頁(yè)腳標(biāo)簽的工作原理如圖5所示。

圖5 Footer頁(yè)腳標(biāo)簽的工作原理

在成功添加頁(yè)腳之后，整個(gè)添加用戶模式和模式切換的工作就完成了。結(jié)果如圖6所示，其中 footer.htm顯示在右下方，user model就是添加的用戶模式。

3 網(wǎng)頁(yè)設(shè)計(jì)

前面提到，為了在用戶模式下生成滿足特定功能的網(wǎng)頁(yè)，需要在controller/mini目錄下添加index.lua和 system_state.lua兩個(gè)文件。在 system_state.lua中，規(guī)定網(wǎng)頁(yè)是以 template的方式鏈接到 view/mini文件下的 system_state.htm文件。這樣只要設(shè)計(jì) system_state.htm的內(nèi)容，就可以實(shí)現(xiàn)對(duì)應(yīng)的功能。

圖6 成功添加用戶模式

system_state.htm是將 Lua和 JavaScript兩種語(yǔ)言配合使用來(lái)完成相應(yīng)的功能。如果編寫的功能模塊不需要訪問(wèn)路由器的數(shù)據(jù)，則利用 Lua和 JavaScript可以比較輕松地實(shí)現(xiàn)［4］。特別地，還可以調(diào)用一些輔助性 Shell script。在網(wǎng)頁(yè)中，利用 Lua語(yǔ)言的 luci.sys.exec（）函數(shù)，就可以調(diào)用shell腳本。

例如，要測(cè)試路由器與外網(wǎng)是否連通，可以簡(jiǎn)單地通過(guò) ping命令，訪問(wèn)某一主流網(wǎng)站即可。如果 ping通，則返回值為1，否則返回0。該功能可以用shell腳本寫，在網(wǎng)頁(yè)中使用如下命令：

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

這樣就能執(zhí)行/shellfun文件夾下的 pingtest.sh Shell腳本，返回是否連通的狀態(tài)，在網(wǎng)頁(yè)中顯示相應(yīng)的內(nèi)容。

如果編寫的功能模塊需要訪問(wèn)路由器的數(shù)據(jù)，這就需要一個(gè)從Lua腳本到 JavaScript腳本數(shù)據(jù)交互的過(guò)程。因?yàn)?JavaScript不太適合直接訪問(wèn)路由器的數(shù)據(jù)，一般都是由Lua腳本程序讀取路由器的數(shù)據(jù)。然后，用JSON（JavaScript Object Notation）這種輕量級(jí)的數(shù)據(jù)交換格式發(fā)送給 JavaScript腳本，利用 JavaScript腳本在網(wǎng)頁(yè)上顯示出傳遞的數(shù)據(jù)。

例如，當(dāng)要在網(wǎng)頁(yè)中顯示某一端口的實(shí)時(shí)流量時(shí)，需要不斷地訪問(wèn)路由器的端口流量數(shù)據(jù)。可以在/luci/ controller/mini的 system_state.lua中某一節(jié)點(diǎn)規(guī)定，通過(guò)Lua的函數(shù)不斷地訪問(wèn)數(shù)據(jù)，然后用 JSON數(shù)據(jù)格式輸出數(shù)據(jù)［5］。在 JavaScript腳本中，利用 XHR.poll（）函數(shù)每隔一段時(shí)間接收J(rèn)SON數(shù)據(jù)，最后將數(shù)據(jù)以圖表的方式動(dòng)態(tài)顯示。

最終實(shí)現(xiàn)的路由器連通測(cè)試和流量監(jiān)控結(jié)果如圖7所示。

4 結(jié)論

本文深入地分析了路由器 Web系統(tǒng) Luci搭建網(wǎng)頁(yè)的原理和實(shí)現(xiàn)細(xì)節(jié)。MVC模式是軟件工程實(shí)現(xiàn)網(wǎng)站搭建的核心，通過(guò)MVC模式，大大簡(jiǎn)化了網(wǎng)站的開發(fā)和維護(hù)工作。在設(shè)計(jì)網(wǎng)頁(yè)的過(guò)程中，介紹了 Lua和 JavaScript如何進(jìn)行數(shù)據(jù)交互，以及如何配合外部的 shell腳本實(shí)現(xiàn)特定功能。

圖7 路由系統(tǒng)狀態(tài)

目前家用路由已經(jīng)支持采用 TF卡、U盤等外置存儲(chǔ)硬件，可以采用 Luci搭建接口實(shí)現(xiàn)路由器本地存儲(chǔ)以及內(nèi)容的投放，使之具有更高的運(yùn)營(yíng)價(jià)值和潛力。

［1］?；?，李濤，韓俊剛，等.多態(tài)并行處理器的數(shù)據(jù)通信和路由器的設(shè)計(jì)［J］.電子技術(shù)應(yīng)用，2014，40（8）：38-40，47.

［2］朱云雷.基于互聯(lián)與認(rèn)證的無(wú)線路由器關(guān)鍵技術(shù)［J］.微型機(jī)與應(yīng)用，2014，33（24）：57-58，65．

［3］張一弓.基于 OpenWrt平臺(tái)的進(jìn)程問(wèn)通信［J］.科技創(chuàng)新與應(yīng)用，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界面開發(fā)之CBI模塊［EB/OL］．（2011-09-04）［2015-06-30］http：//www.chaochaoblog.com/archives/698．

［7］吵吵博客．LuCI實(shí)現(xiàn)啟動(dòng)應(yīng)用程序等腳本命令 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，F(xiàn)an 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

曹為華，凌強(qiáng)，張雷，等.基于 OpenWrt系統(tǒng)路由器的模式切換與網(wǎng)頁(yè)設(shè)計(jì) ［J］.微型機(jī)與應(yīng)用，2015，34（23）：91-94.

2015-08-05）

曹為華（1992-），男，碩士研究生，主要研究方向：嵌入式系統(tǒng)。

國(guó)家自然科學(xué)基金（61273112）

凌強(qiáng)（1975-），通信作者，男，博士，副教授，博士生導(dǎo)師，主要研究方向：網(wǎng)絡(luò)化控制、嵌入式系統(tǒng)。E-mail：qling@ustc.edu.cn。

張雷（1990-），男，碩士研究生，主要研究方向：嵌入式系統(tǒng)。