OpenWRT - WEB界面開發思路和基本方法
想要對OpenWRT的WEB界面（*下稱界面）進行修改。修改的目標是：
1.修改頁面的樣式，設計為企業的風格（stylesheet）
2.新建自己的功能，實現 訪問頁面後，用戶就可以對配置文件（也就是系統的一些參數）進行修改。 甚至是與遠端服務器交互，實現驗證。
一. 幾種可行的開發路線：
1.改用PHP、JSP等語言開發
2.修改已有的界面，實現自己的功能
2.1 修改已有樣式表
2.2 仍然利用lua開發
第一種比較容易操作，但需要在設備裏安裝nginx和PHP環境，然後在 /www下放PHP腳本就可以了。但是這種方法可能對網關設備的存儲帶來較大壓力。所以我沒有采取這種方式。（這個就是普通的web開發，只不過多了一些對文件的讀寫，字符格式的匹配，還有要去操作一些linux shell命令。 前期我也開發了一個這個版本，但是後來被廢棄啦。如果想用這種方式開發的歡迎來交流。）
第二種中有兩種方式，這是我想分享的兩種開發模式。接下來簡單介紹一下。
二.LuCI的文件目錄
OpenWRT luci中，web界面在/www下。其他的界面由CGI程序生成。 /www下放有index.html，僅僅用來直接跳轉至 /cgi-bin/luci 。
CGI程序實質上是MVC模式。Mmodel，Vview，C~controller。MVC讀取配置文件的信息，然後輸出到頁面上，也就是MVC裏面的讀“數據庫”，寫“數據庫”。只不過這裏面的“數據庫”對應的是配置文件，讀寫方法也不太一樣。
Model（配置文件）:/etc/config
View（頁面文件）：/usr/lib/lua/luci/view
Controller（控制器）：/usr/lib/lua/luci/Controller。
請註意：View（頁面文件）的stylesheet（樣式表文件）地址是 /www/luci-static/bootstrap/cascade.css。
view、controller根據功能進行分組後存在不同的文件夾內。比如狀態功能以及狀態功能下的總覽、防火墻等功能的view會存在admin-status文件夾下面。文件的存儲路徑恰好與訪問功能的url一致（為http://192.168.1.1/cgi-bin/luci/admin/status/xxx）。
三.第二種方法示例
剛才說到，對界面進行開發有兩種方式。這裏先介紹主流的第二種方式。這種方式的優點是 能夠自由自在的定義樣式（我覺得重繪界面肯定比按照界面元素去挨個修改界面樣式容易很多。猜想您的前端一定也會很感謝你使用了這種方法來進行開發~）
以及將業務邏輯進行簡單歸類，並且可以自由訂制表單界面的樣式和差異性（如果您暫時不能理解這點，請先跳過，看完全文後在回來分析這句話）。
controller中，url和您想要操作的行為有三種對應方式，這麽說太磨嘰了，不懂。簡而言之就是：
url可以對應htm頁面“讀寫數據庫”，url可以調用一個方法“讀或者寫，也可以對數據進行操作”，url可以調用一個cbi方法，來“寫數據庫”。
html並不是傳統意義上的靜態頁面。事實上，可以在.htm文件內使用lua的方法。
那麽接下來簡單介紹一下如何修改服務器文件。我以修改設備名字做示例。
首先，寫一個htm文件，裏面存著表單。
文件保存在/usr/lib/lua/luci/view下，文件名叫 setHostname.htm,文件內容如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SET-HOSTNAME</title>
</head>
<body>
<p>Setting the IP address</p>
<form method="get" action="<%=luci.dispatcher.build_url("set", "hostname")%>">
<input type="text" name="hostname">
<button id="submit">提交</button>
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
好了，v 搞定了，然後該弄controller了。我要能根據url訪問到表單，還要寫一個響應表單請求的頁面（方法）能夠使得文件的修改生效。
打開一個controller的文件。請註意這裏不限定究竟打開哪個controller的文件。但是為了保證項目代碼的易維護性，最好還是新建一個controller。在/usr/lib/lua/luci/controller下可以新建一個mytest.lua（或者mkdir一個test文件夾再新建mytest.lua）
mytest.lua的文件內容是：
module("luci.controller.mytest", package.seeall)
function index(){
entry({"fuck", "ybt", "sb"}, template("setHostname"))
entry({"set", "hostname"}, call("set_hostname"))
}
function set_hostname()
local hostname = luci.http.formvalue("hostname")
local executeString = "uci set system.@system[0].hostname="..hostname
luci.sys.exec(executeString)
end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
好了，寫完了這些之後，清除緩存 / 重啟uhttpd / reboot就可以使對頁面的修改生效。
清除緩存方法：清除/tmp下面所有luci-xxxx文件夾。 命令：rm /tmp/luci-* -rf
建議您把 -rf 寫在後面，以防止無心之失。
重啟uhttpd：/etc/init.d/uhttpd restart
reboot：這是終極大招。如果前兩種方式都沒有使界面修改生效，再考慮此方法吧~ btw ，reboot之後，你就可以斷掉與路由的ssh了。因為你需要重新ssh這個路由器。 命令： reboot
接下來，訪問192.168.1.1/cgi-bin/luci/fuck/ybt/sb 來對頁面進行修改。然後頁面會使用get的方法給192.168.1.1/cgi-bin/luci/set/hostname 傳過去一個值。
192.168.1.1/cgi-bin/luci/set/hostname將調用控制器內部的set_hostname方法，設置hostname的值。
Knowledges
1.主機名存放的文件地址：/etc/config/system
這個文件的文件內容是：
config system
option zonename ‘UTC‘
option timezone ‘GMT0‘
option conloglevel ‘8‘
option cronloglevel ‘8‘
option hostname ‘ybtsb‘
config timeserver ‘ntp‘
list server ‘0.openwrt.pool.ntp.org‘
list server ‘1.openwrt.pool.ntp.org‘
list server ‘2.openwrt.pool.ntp.org‘
list server ‘3.openwrt.pool.ntp.org‘
option enabled ‘1‘
1
2
3
4
5
6
7
8
9
10
11
12
13
現在主機名是ybtsb 。這個是我可愛的室友的名字。
2.controller是如何實現了對文件的修改呢？
controller中的lua語法調用了luci框架本身的方法，去執行一句shell語句。
luci.sys.exec("語句")
這個語句可以是任何的shell。
比如剛才提到的清理緩存：luci.sys.exec("rm /tmp/luci-* -rf")
再比如reboot。 local ybtsb="reboot" luci.sys.exec(ybtsb)這裏的ybtsb是一個變量。具體lua的語法，請訪問lua的官方網站。本案的開發只涉及調用一些uci的shell。故不做展開。
那麽，修改文件的shell是：
uci set A.B.C=value A是文件名，B是節名，C是配置項名。value是要把C對應的項進行修改的變量
當然，聰明的你應該猜到了，從文件中獲取配置項的shell是uci get A.B.C 。
我們來看一看網關的IP地址。網關的IP地址存放在/etc/config/network文件下lan節的ipaddr。
我們先vi一下這個文件。vi /etc/config/network 這個文件是醬紫的：
紅色的部分我把它叫節（B）。裏面的每一項叫做配置項（C）。
我們看到network下面的lan節下面的ipaddr是 192.168.1.1
ok 退出這個文件的編輯（ esc -> :q!）。
執行命令：uci get network.lan.ipaddr 回車
得到的內容是 192.168.1.1 。
當然，如果你想修改ipaddr，可以用shell ：uci get network.lan.ipaddr=192.168.1.2
…
你可能會註意到 前面修改hostname的時候，用到了@和[0]這種意味不明的東西。這是怎麽回事呢？
事實上/etc/config下的配置文件中，可能含有多個含有相同節名（或者不含節名的）配置文件。怎麽能夠準確調取捏？
如果重名，[ 0 ] [ 1 ] 放在節的後面，依次對應著文件內的同名節第一項和第二項。順序由其在文件內的先後順序決定。
如果沒名，就如同剛才的system文件：
B的部分，寫節的類。要用@做標記，並標記先後 如上面獲取hostname，就應該用uci get system.@system[0].hostname
當然！htm中也可以使用lua語句然後調取文件的內容。這個方法很簡單：
在你想要調用的htm文件中這樣使用：
<!--Lua Code start here-->
<%
local ip=luci.sys.exec("uci get network.lan.ipaddr")
%>
<p>IP地址是：<%=ip%></p>
1
2
3
4
5
6
7
8
9
OK了 以上兩個案例涵蓋了這種開發方式的最基本操作。當然，有些時候你可能需要對輸入和輸出數據格式進行調整。你可以在htm的lua代碼段和控制器的方法中編寫方法。具體內容請 100度 - -
最後是這種開發方式的開發思路：
1.看文檔，了解你要修改的的配置項 在 那個文件中？
2.寫controller，包括form target的地址和其他可訪問頁面的地址。
3.寫html css 畫界面。
4.在controller中編寫數據處理函數。luci中也有trim函數哦（具體內容，請100度 ）。
5.最後，為了提升用戶體驗，form頁應該使用ajax來傳輸數據。
四.第一種方法開發
註意到剛才controller的url對應中沒有提及cbi。cbi幹嘛用的呢？說白了就是一行代碼生成一個表單頁面。這個頁面裏有一個input和button。直接對應配置文件中的相關節和相關項。具體使用，請參見github.com/openwrt/luci/wiki/ 下面的howto。
cbi能夠直接生成表單，也意味著它的高度封裝給我們自定義web界面帶來了困難。我們不僅無法直觀修改cbi的頁面樣式，也不能自由自在的使用JavaScript。
直接使用lua的方法，我個人認為比較簡潔。歡迎大家一同討論openwrt web界面開發中所遇到的困難。
——————————————————
（C）Sugarguan
Upd@ 2018.06.21
Poi.Harbin Institute of Technology
---------------------
作者：Sugar關
來源：CSDN
原文：https://blog.csdn.net/q595860633/article/details/80763394
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
OpenWRT - WEB界面開發思路和基本方法