摘  要： 目前商用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所示。

　　Luci采用MVC（Model-View-Controller）模式搭建網頁。MVC模式把軟件系統分為三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。

　?。?）控制器（Controller）：負責轉發和處理請求。

　?。?）視圖（View）：設計的網頁界面。

　?。?）模型（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搭建接口實現路由器本地存儲以及內容的投放，使之具有更高的運營價值和潛力。

　　參考文獻

　　[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 control system on embedded Linux with OpenWrt[J]. Personal & Ubiquitous Computing， 2014， 18（3）：535-542.

　　[5] PALAZZI C E， BRUNATI M， ROCCETTI M. 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.