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

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

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

---

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

在 LuCI 開(kāi)發(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)示意圖

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

---

2. LuCI 的三大核心組件

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

---

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

在 LuCI 開(kāi)發(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 頁(yè)面

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 請(qǐng)求。

📌 示例 2：JavaScript (.js) 動(dòng)態(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)建一個(gè) MAC 地址輸入框。
• CBI.form.ListValue 創(chuàng)建一個(gè) 接口選擇下拉框。
• 視圖是動(dòng)態(tài)生成的，沒(méi)有固定 HTML 代碼。

---

5. Controller（控制器） - 處理請(qǐng)求

LuCI 的 Controller 層主要用于：

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

📌 示例：控制器定義 WOL 頁(yè)面

文件：/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 菜單項(xiàng)。
• cbi("admin_network/wol") 調(diào)用 Model (wol.lua) 處理 UCI 配置。
• function send_wol() 處理用戶提交的 WOL 請(qǐng)求，然后執(zhí)行 etherwake 命令。

---

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

組件	作用	代碼
Controller (Lua)	處理請(qǐng)求，調(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. 用戶打開(kāi) WOL 頁(yè)面（Controller 解析請(qǐng)求）
2. Controller 調(diào)用 Model 讀取 UCI 配置
3. View 生成 UI，用戶輸入 MAC 地址
4. 用戶點(diǎn)擊 "發(fā)送 WOL"，Controller 處理請(qǐng)求
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，需要改動(dòng) controller/wol.lua（后端）、view/wol.js（前端）、以及 rpcd 相關(guān)部分。