想要給openwrt開發(fā)應(yīng)用，雖然直接可執(zhí)行程序也可以運行，但是沒有UI會很不方便，想要開發(fā)UI就要用openwrt的那一套，自然就是LuCI，LuCI又用了一套MVC框架，今天就講講這是個什么東西。

OpenWrt LuCI 界面開發(fā)中的 MVC 架構(gòu)

在 OpenWrt 的 LuCI Web 界面開發(fā)中，采用了 MVC（Model-View-Controller）架構(gòu)，但它和傳統(tǒng)的 MVC 框架有所不同，主要依賴 Lua + UCI + JavaScript（Vue 風(fēng)格） 來實現(xiàn) Web UI 交互。

---

1. OpenWrt LuCI 的 MVC 架構(gòu)

在 LuCI 開發(fā)中：

• Model（模型）：負(fù)責(zé)數(shù)據(jù)處理（通常基于 UCI 配置）。
• View（視圖）：負(fù)責(zé) UI 展示（使用 Lua Template (.htm) 或現(xiàn)代 JavaScript (.js)）。
• Controller（控制器）：負(fù)責(zé)業(yè)務(wù)邏輯和路由（通常是 Lua (.lua) 腳本）。

🔹 架構(gòu)示意圖

用戶請求 (Web)↓
Controller (Lua) - 處理請求，調(diào)用 Model↓
Model (UCI) - 讀取/寫入配置數(shù)據(jù)↓
View (HTML/JS) - 渲染頁面↓
用戶交互 (表單提交，RPC 調(diào)用)

---

2. LuCI 的三大核心組件

組件	作用	代碼位置
Model（模型）	處理 UCI 配置數(shù)據(jù)	/usr/lib/lua/luci/model/cbi/
View（視圖）	生成 HTML/JS 頁面	/usr/lib/lua/luci/view/ 或 /www/luci-static/resources/view/
Controller（控制器）	處理請求邏輯和路由	/usr/lib/lua/luci/controller/

---

3. Model（模型） - 處理 UCI 配置

在 LuCI 開發(fā)中，Model 層主要用于 操作 OpenWrt 的 UCI（Unified Configuration Interface）。

📌 示例：定義 Model 處理 UCI

文件：/usr/lib/lua/luci/model/cbi/admin_network/wol.lua

m = Map("wol", "Wake on LAN")  -- 綁定到 UCI "wol" 配置
s = m:section(NamedSection, "main", "wol", "WOL 配置")mac = s:option(Value, "macaddr", "MAC 地址")  -- 用戶輸入的 MAC 地址
mac.datatype = "macaddr"iface = s:option(ListValue, "interface", "網(wǎng)絡(luò)接口")
iface:value("br-lan", "LAN")
iface:value("wan", "WAN")return m

🔹 解釋

• Map("wol", "Wake on LAN") 綁定到 /etc/config/wol UCI 配置文件。
• s:option(Value, "macaddr", "MAC 地址") 定義了 MAC 地址 輸入框，并限制為 macaddr 數(shù)據(jù)類型。
• iface:value("br-lan", "LAN") 提供了接口選擇。

---

4. View（視圖） - 生成 UI 頁面

LuCI 視圖有兩種方式：

1. 傳統(tǒng) Lua 模板 (.htm)
2. 現(xiàn)代 JavaScript (.js)

📌 示例 1：Lua 方式渲染 HTML

文件：/usr/lib/lua/luci/view/admin_network/wol.htm

<%+cbi/header%>
<h2>Wake on LAN</h2>
<%+cbi/apply_cb%>
<form method="post"><input type="text" name="macaddr" placeholder="輸入 MAC 地址"/><button type="submit">發(fā)送 WOL</button>
</form>
<%+cbi/footer%>

🔹 解釋

• cbi/header 和 cbi/footer 負(fù)責(zé)引入 LuCI 標(biāo)準(zhǔn)框架。
• <input type="text" name="macaddr"> 讓用戶輸入 MAC 地址。
• <button> 讓用戶提交 WOL 請求。

📌 示例 2：JavaScript (.js) 動態(tài)渲染

文件：/www/luci-static/resources/view/wol.js

return view.extend({render: function() {return E([CBI.form.Value.extend({name: "macaddr",label: _("MAC 地址"),datatype: "macaddr",}),CBI.form.ListValue.extend({name: "interface",label: _("網(wǎng)絡(luò)接口"),values: {"br-lan": _("LAN"),"wan": _("WAN")}})]);}
});

🔹 解釋

• CBI.form.Value 創(chuàng)建一個 MAC 地址輸入框。
• CBI.form.ListValue 創(chuàng)建一個 接口選擇下拉框。
• 視圖是動態(tài)生成的，沒有固定 HTML 代碼。

---

5. Controller（控制器） - 處理請求

LuCI 的 Controller 層主要用于：

1. 定義 Web UI 的 URL 路由
2. 調(diào)用 Model（UCI 讀取/寫入）
3. 返回 View（HTML/JS 渲染）

📌 示例：控制器定義 WOL 頁面

文件：/usr/lib/lua/luci/controller/admin/wol.lua

module("luci.controller.admin.wol", package.seeall)function index()entry({"admin", "network", "wol"}, cbi("admin_network/wol"), "Wake on LAN", 30)entry({"admin", "network", "wol_send"}, call("send_wol"), nil).leaf = true
endfunction send_wol()local mac = luci.http.formvalue("macaddr")os.execute("etherwake " .. mac)luci.http.redirect(luci.dispatcher.build_url("admin", "network", "wol"))
end

🔹 解釋

• entry({"admin", "network", "wol"}) 創(chuàng)建 Web UI 菜單項。
• cbi("admin_network/wol") 調(diào)用 Model (wol.lua) 處理 UCI 配置。
• function send_wol() 處理用戶提交的 WOL 請求，然后執(zhí)行 etherwake 命令。

---

6. 組件之間如何協(xié)作？

組件	作用	代碼
Controller (Lua)	處理請求，調(diào)用 Model	luci.controller.admin.wol
Model (Lua/UCI)	讀取/寫入配置	luci.model.cbi.admin_network.wol
View (HTML/JS)	渲染 Web UI	luci-static/resources/view/wol.js
后端進(jìn)程 (C/命令行)	執(zhí)行 WOL	etherwake

🔹 交互流程

1. 用戶打開 WOL 頁面（Controller 解析請求）
2. Controller 調(diào)用 Model 讀取 UCI 配置
3. View 生成 UI，用戶輸入 MAC 地址
4. 用戶點擊 "發(fā)送 WOL"，Controller 處理請求
5. Controller 調(diào)用 etherwake 發(fā)送 WOL
6. 返回到 Web UI，顯示成功消息

---

7. 結(jié)論

? LuCI 使用 MVC 架構(gòu)，但 Controller 是 Lua，View 現(xiàn)在更多用 JavaScript。
? 現(xiàn)代 OpenWrt 主要基于 rpcd 和 ubus 進(jìn)行數(shù)據(jù)交互，而不只是傳統(tǒng)的 Lua cbi()。
? 如果你要修改 luci-app-wol，需要改動 controller/wol.lua（后端）、view/wol.js（前端）、以及 rpcd 相關(guān)部分。