luci界面开发中的MVC架构——LuCI介绍(二)
想要给openwrt开发应用,虽然直接可执行程序也可以运行,但是没有UI会很不方便,想要开发UI就要用openwrt的那一套,自然就是LuCI,LuCI又用了一套MVC框架,今天就讲讲这是个什么东西。
OpenWrt LuCI 界面开发中的 MVC 架构
在 OpenWrt 的 LuCI Web 界面开发中,采用了 MVC(Model-View-Controller)架构,但它和传统的 MVC 框架有所不同,主要依赖 Lua + UCI + JavaScript(Vue 风格) 来实现 Web UI 交互。
1. OpenWrt LuCI 的 MVC 架构

在 LuCI 开发中:
- Model(模型):负责数据处理(通常基于 UCI 配置)。
- View(视图):负责 UI 展示(使用 Lua Template (
.htm) 或现代 JavaScript (.js))。 - Controller(控制器):负责业务逻辑和路由(通常是 Lua (
.lua) 脚本)。
🔹 架构示意图
用户请求 (Web)↓
Controller (Lua) - 处理请求,调用 Model↓
Model (UCI) - 读取/写入配置数据↓
View (HTML/JS) - 渲染页面↓
用户交互 (表单提交,RPC 调用)
2. LuCI 的三大核心组件
| 组件 | 作用 | 代码位置 |
|---|---|---|
| Model(模型) | 处理 UCI 配置数据 | /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 开发中,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", "网络接口")
iface:value("br-lan", "LAN")
iface:value("wan", "WAN")return m
🔹 解释
Map("wol", "Wake on LAN")绑定到/etc/config/wolUCI 配置文件。s:option(Value, "macaddr", "MAC 地址")定义了MAC 地址输入框,并限制为macaddr数据类型。iface:value("br-lan", "LAN")提供了接口选择。
4. View(视图) - 生成 UI 页面
LuCI 视图有两种方式:
- 传统 Lua 模板 (
.htm) - 现代 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">发送 WOL</button>
</form>
<%+cbi/footer%>
🔹 解释
cbi/header和cbi/footer负责引入 LuCI 标准框架。<input type="text" name="macaddr">让用户输入 MAC 地址。<button>让用户提交 WOL 请求。
📌 示例 2:JavaScript (.js) 动态渲染
文件:/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: _("网络接口"),values: {"br-lan": _("LAN"),"wan": _("WAN")}})]);}
});
🔹 解释
CBI.form.Value创建一个 MAC 地址输入框。CBI.form.ListValue创建一个 接口选择下拉框。- 视图是动态生成的,没有固定 HTML 代码。
5. Controller(控制器) - 处理请求
LuCI 的 Controller 层主要用于:
- 定义 Web UI 的 URL 路由
- 调用 Model(UCI 读取/写入)
- 返回 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"})创建 Web UI 菜单项。cbi("admin_network/wol")调用 Model (wol.lua) 处理 UCI 配置。function send_wol()处理用户提交的 WOL 请求,然后执行etherwake命令。
6. 组件之间如何协作?
| 组件 | 作用 | 代码 |
|---|---|---|
| Controller (Lua) | 处理请求,调用 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 |
| 后端进程 (C/命令行) | 执行 WOL | etherwake |
🔹 交互流程
- 用户打开 WOL 页面(Controller 解析请求)
- Controller 调用 Model 读取 UCI 配置
- View 生成 UI,用户输入 MAC 地址
- 用户点击 "发送 WOL",Controller 处理请求
- Controller 调用
etherwake发送 WOL - 返回到 Web UI,显示成功消息
7. 结论
✅ LuCI 使用 MVC 架构,但 Controller 是 Lua,View 现在更多用 JavaScript。
✅ 现代 OpenWrt 主要基于 rpcd 和 ubus 进行数据交互,而不只是传统的 Lua cbi()。
✅ 如果你要修改 luci-app-wol,需要改动 controller/wol.lua(后端)、view/wol.js(前端)、以及 rpcd 相关部分。
相关文章:
luci界面开发中的MVC架构——LuCI介绍(二)
想要给openwrt开发应用,虽然直接可执行程序也可以运行,但是没有UI会很不方便,想要开发UI就要用openwrt的那一套,自然就是LuCI,LuCI又用了一套MVC框架,今天就讲讲这是个什么东西。 OpenWrt LuCI 界面开发中…...
第1章大型互联网公司的基础架构——1.10 其他NoSQL数据库
这里我们简单介绍一下其他常见的NoSQL数据库及其适用的场景,其中部分数据库会在后续服务设计章节中正式使用时再做详细介绍。 1.10.1 文档数据库 文档数据库的典型代表是MongoDB和CouchDB。**文档数据库普遍采用JSON格式来存储数据,而不是采用僵硬的行…...
DeepSeek+Kimi生成高质量PPT
DeepSeek与Kimi生成PPT全流程解析 一、工具分工原理 DeepSeek核心作用:生成结构化PPT大纲(擅长逻辑构建与内容优化)Kimi核心作用:将文本转换为视觉化PPT(提供模板库与排版引擎) 二、操作步骤详解 1. 通…...
web网络安全:跨站脚本攻击(XSS)
跨站脚本攻击(XSS)概述 跨站脚本攻击(XSS,Cross-Site Scripting) 是一种常见的 Web 安全漏洞,攻击者通过向受信任的网站注入恶意脚本(通常是 JavaScript),诱使其他用户在…...
【Python爬虫(44)】分布式爬虫:筑牢安全防线,守护数据之旅
【Python爬虫】专栏简介:本专栏是 Python 爬虫领域的集大成之作,共 100 章节。从 Python 基础语法、爬虫入门知识讲起,深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑,覆盖网页、图片、音频等各类数据爬取ÿ…...
微信小程序:多菜单栏设计效果
一、实现效果 二、代码 wxml 编辑前端界面,步骤 菜单逻辑: 逐步取出数组中的项,首先取出顶部菜单项,然后选中后取出选中的底部数据(左侧菜单+右侧内容),然后点击左侧菜单取出选中的左侧菜单对应的右侧内容 ①这里我的数据是全部封装到一个数组对象的,首先我的循环…...
海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现,并可以在浏览器vue前端播放(附带源码)
1.首先说了一下为什么要用ISUP协议来取流 ISUP主要就是用来解决摄像头没有公网ip的情况,如果摄像头或者所在局域网的路由器有公网ip的话,其实采用rtsp直接取流是最方便也是性能最好的,但是项目的摄像头没有公网IP所以被迫使用ISUP,ISUP是海康…...
蓝桥杯之阶段考核
📖 Day 7:阶段考核 - 蓝桥杯官方模拟赛(限时 4 小时) 📖 一、如何高效完成模拟赛? 模拟赛是一种接近真实竞赛的训练方式。要高效完成模拟赛,需要掌握以下策略: 1. 赛前准备 ✅ 环…...
Python爬虫基础重要数据类型
重要数据类型 列表数据类型 在实际开发中,经常需要将一组(不只一个)数据存储起来,以便后边的代码使用。列表就是这样的一个数据结构。且列表是Python中最基本也是最常用的数据结构之一。什么是数据结构呢?通俗来讲&a…...
乐享数科:供应链金融—三个不同阶段的融资模式
供应链金融是与产业链紧密结合的融资模式,它主要体现在订单采购、存货保管、销售回款这三个不同的业务阶段,并针对这些阶段提供了相应的金融服务。以下是这三个阶段中主要的融资模式及其特点: 供应链金融融资模式主要分为以下几种࿱…...
【AI】openEuler 22.03 LTS SP4安装 docker NVIDIA Container Toolkit
NVIDIA Container Toolkit 打开网址 Unsupported distribution or misconfigured repository settings | NVIDIA Container Toolkit 为方便离线安装,先下载过来 wget https://nvidia.github.io/libnvidia-container/stable/rpm/nvidia-container-toolkit.repo mk…...
【2025全网首发B站教程】YOLOv12训练数据集构建:标签格式转换-划分-YAML 配置 避坑指南 | 小白也能轻松玩转目标检测!
【2025全站首发】YOLOv12训练数据集构建:标签格式转换-划分-YAML 配置 避坑指南 | 小白也能轻松玩转目标检测! 文章目录 1. 数据集准备1.1 标签格式转换1.2 数据集划分1.3 yaml配置文件创建 2. 训练验证 1. 数据集准备 示例数据集下载链接:P…...
设计模式教程:中介者模式(Mediator Pattern)
中介者模式是一种行为型设计模式,它用于减少对象之间的直接依赖关系。通过引入一个中介者对象,所有对象的交互都通过中介者进行,而不是直接相互通信。这种模式的主要目的是减少对象之间的耦合,提升系统的灵活性和可维护性。 1. 定…...
编写dockercompose脚本,管理redis,activemq,mysql5.7
编写dockercompose脚本,管理redis,activemq,mysql5.7,mysql的root密码设置Duke2007,redis密码设置duke0591 Docker Compose 多服务编排脚本(安全增强版) yaml 复制 services: # # MySQL 5.7 服务配置 #…...
【编程语言】委托与函数指针
委托与函数指针的相似之处: 指向方法:C# 的委托和 C 的函数指针都可以用来指向一个方法或函数。调用方法:它们都可以通过引用(委托或函数指针)来调用指向的方法。 委托与函数指针的主要区别: 类型安全&am…...
基于vue和微信小程序的校园自助打印系统(springboot论文源码调试讲解)
第3章 系统设计 3.1系统功能结构设计 本系统的结构分为管理员和用户、店长。本系统的功能结构图如下图3.1所示: 图3.1系统功能结构图 3.2数据库设计 本系统为小程序类的预约平台,所以对信息的安全和稳定要求非常高。为了解决本问题,采用前端…...
数字后端实现之Innovus中open net原因解析及解决方案
数字IC后端设计实现Innovus中我们经常会碰到如下的WARNING警告信息。这个log是在route或ECO Route阶段报的。这个WARNING必须要看,因为这里是报告当前设计存在open的net,即某些pin只有逻辑连接,而没有实际的物理连接。 这里正常工具应该报ERR…...
MATLAB基础学习相关知识
MATLAB安装参考:抖音-记录美好生活 MATLAB基础知识学习参考:【1小时Matlab速成教程-哔哩哔哩】 https://b23.tv/CnvHtO3 第1部分:变量定义和基本运算 生成矩阵: % 生成矩阵% 直接法% ,表示行 ;表示列 a [1,2,3;4,5,6;7,8,9];%…...
Mac系统下使用Docker快速部署MaxKB:打造本地知识库问答系统
随着大语言模型的广泛应用,知识库问答系统逐渐成为提升工作效率和个人学习的有力工具。MaxKB是一款基于LLM(Large Language Model)大语言模型的知识库问答系统,支持多模型对接、文档上传和自动爬取等功能。本文将详细介绍如何在Ma…...
RT-Thread+STM32L475VET6——icm20608传感器
文章目录 前言一、板载资源二、具体步骤1.打开CubeMX进行配置1.1 使用外部高速时钟,并修改时钟树1.2 打开I2C3,参数默认即可(I2C根据自己需求调整)1.3 打开串口1.4 生成工程 2. 添加icm20608软件包3. 使能传感器,打开动态链接库4.…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
如何将联系人从 iPhone 转移到 Android
从 iPhone 换到 Android 手机时,你可能需要保留重要的数据,例如通讯录。好在,将通讯录从 iPhone 转移到 Android 手机非常简单,你可以从本文中学习 6 种可靠的方法,确保随时保持连接,不错过任何信息。 第 1…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
MySQL 8.0 OCP 英文题库解析(十三)
Oracle 为庆祝 MySQL 30 周年,截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始,将英文题库免费公布出来,并进行解析,帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中,UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包
文章目录 现象:mysql已经安装,但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时,可能是因为以下几个原因:1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计,聪明的码友立马就知道了,该到数据访问模块了,要不就这俩玩个6啊,查库势在必行,至此,它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据(数据库、No…...
企业如何增强终端安全?
在数字化转型加速的今天,企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机,到工厂里的物联网设备、智能传感器,这些终端构成了企业与外部世界连接的 “神经末梢”。然而,随着远程办公的常态化和设备接入的爆炸式…...
管理学院权限管理系统开发总结
文章目录 🎓 管理学院权限管理系统开发总结 - 现代化Web应用实践之路📝 项目概述🏗️ 技术架构设计后端技术栈前端技术栈 💡 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 🗄️ 数据库设…...
视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...
