智能网关开发与应用 课件 第7章 基于LuCI开发WEB应用

OpenWrt智能网关开发与应用第7章基于LuCI开发WEB应用本章内容导航01学习目标明确课程核心掌握要点02LuCI简介与MVC模型架构解析与核心概念03CBI开发核心API详解配置界面快速构建方案04Template模板开发灵活的前端页面渲染05UCIAPI操作实践系统配置文件读写操作06实训：黑白名单配置综合实战巩固所学知识本章学习目标学习目标掌握LuCI的工作原理掌握CBI开发LuCIWeb应用掌握Template方式开发LuCI应用技能目标熟练使用CBIAPI设计Web界面熟练运用Template模板语法开发个性化界面熟练使用UCIAPI读写配置文件素养目标提高问题解决能力，独立攻克开发难题增强动手实践能力，理论结合实际项目培养创新意识和自主学习能力7.1LuCI简介与MVC模型理解LuCI的工作原理与架构设计什么是LuCI？LuCI(LuaConfigurationInterface)是OpenWrt官方的Web管理界面，是与路由器交互的主要方式。基于Lua脚本语言整个框架由Lua编写，相比传统CGI脚本更加轻量且高效，占用资源少，响应速度快。经典MVC设计模式采用Model-View-Controller架构，实现了数据、界面和控制逻辑的分离，结构清晰易于维护。自动生成Web界面无需编写HTML，只需定义数据模型(Model)，LuCI自动生成对应的View，极大简化开发。高度可扩展的插件机制支持通过插件形式轻松添加新的功能模块和配置页面，生态丰富，满足各种定制化需求。MVC模型详解Model(模型)-数据逻辑层负责处理数据读写与验证。在LuCI中对应CBI文件，描述配置结构。View(视图)-界面展示层负责Web界面展示。通常由LuCI根据Model自动生成HTML模板。Controller(控制器)-协调层接收用户请求并调用Model处理。在LuCI中对应Lua脚本，处理路由逻辑。LuCI工作原理1.请求到达Web服务器转发请求2.解析路径转换URL为节点路径3.查找节点查找entry注册的节点4.执行目标执行CBI/Template/Lua5.生成响应返回HTML页面核心注册函数：entry开发者通过该函数向LuCI调度树注册节点，定义当用户访问特定URL路径时，系统应如何响应。

语法：entry(path,target,title,order)函数参数详解参数说明path调度树路径，如{"admin","system"}target处理目标，如cbi("system")或template()title/order菜单标题（可选），排序权重（可选）7.2CBI开发核心API详解快速构建配置界面什么是CBI？核心定义：描述即界面CBI(ConfigurationBindingInterface)是LuCI提供的一套API，通过Lua代码描述UCI配置结构，自动生成Web配置界面。核心思想：自动化流程自动生成HTML表单控件(输入框/下拉框等)自动处理表单提交与数据合法性验证自动读写UCI配置文件，无需手动解析开发优势：专注业务逻辑解放生产力告别繁琐的HTML/CSS/JS编写，极大简化开发流程。高可靠性内置数据验证机制，减少因前端输入错误导致的系统异常。结构一致性统一的配置界面风格，降低用户的学习成本和操作门槛。核心类：Map&NamedSectionMap类：配置页面的根容器作用：绑定UCI配置文件（如/etc/config/system），作为页面入口。m=Map("config_name","标题","描述")常用属性：m.submit:自定义提交按钮文本（默认"Save"）m.reset:是否显示重置按钮（默认true）m.on_after_commit:提交成功后的回调（如重启服务）NamedSection类：管理固定配置节作用：操作配置文件中名称固定的节（如configgeneral）。s=m:section(NamedSection,"name","type","标题")核心特性：默认不允许删除(allowdelete=false)支持通过s:depends(...)设置显示依赖条件适用于系统全局设置等不可变名称的配置核心类：TypedSection功能定义与基础语法用于管理UCI配置文件中同一类型的多个配置节（如防火墙规则），支持动态增删。--语法结构s=m:section(TypedSection,"type","Title","Desc")关键属性配置s.anonymous=true:配置节为匿名，无需命名s.addremove=true:允许用户添加/删除配置节s.template="cbi/tblsection":表格样式展示s.sortable=true:启用拖动排序功能实战：防火墙规则管理--管理类型为'rule'的配置节locals=m:section(TypedSection,"rule","防火墙规则")s.anonymous=trues.addremove=trues.template="cbi/tblsection"s.sortable=true效果说明上述配置将生成一个表格界面，用户可以直接在表格中查看所有规则，并且支持通过按钮添加新规则或删除现有规则，同时支持拖拽调整顺序。输入控件：Value&ListValueValue类：单行文本输入框用于接收用户输入的单行文本、数字等简单值，支持数据类型验证。--基础语法o=s:option(Value,"opt_name","标题")o.datatype="uinteger"--数据类型验证o.default="8080"--默认值datatype:类型验证(ipaddr,uinteger,string)default:设置控件的默认显示值rmempty:设置是否允许输入为空ListValue类：下拉菜单提供预定义的选项列表，限制用户只能从中选择一个，适合枚举类型。--定义选项与默认值o=s:option(ListValue,"proto","协议")o:value("tcp","TCP协议")--(实际值,显示文本)o.default="tcp"value(k,v):添加选项，k为实际值，v为显示文本枚举限制：强制用户选择，避免无效输入default:设置默认选中的选项值选择控件：Flag&DynamicListFlag类：布尔开关用于表示启用或禁用状态，值通常为1(启用)或0(禁用)。适用于简单的功能开关场景。--创建Flag控件o=s:option(Flag,"option_name","选项标题")o.default=o.enabled--默认启用o.rmempty=falseDynamicList类：动态列表允许用户动态添加或删除多个文本值，支持数据类型验证（如IP地址）。适用于DNS服务器等不确定数量的列表项。--创建DynamicList控件o=s:option(DynamicList,"dns","DNS服务器")o.datatype="ipaddr"--验证IP格式o.default={"","14"}其他常用CBI控件MultiValue多选框组允许用户从预定义选项中选择多个，值以逗号分隔存储。StaticList静态列表以列表形式展示选中项，与MultiValue类似，但不可输入新值。DummyValue只读文本展示静态或动态计算的信息，不与UCI选项绑定。TextValue多行文本框用于输入大段文本，如配置文件内容、日志信息等。Button按钮控件用于触发自定义操作（如执行脚本、重启服务），需配合回调函数。组合应用场景组合使用这些控件，可构建功能丰富、交互友好的Web表单配置界面。7.3Template模板开发灵活定制Web界面，打造极致个性化体验CHAPTER07什么是Template模板？核心概念与特性Template允许开发者直接编写HTML代码，并嵌入Lua脚本，实现对页面内容的动态控制，适用于CBI无法满足的复杂定制场景。适用场景展示复杂的数据列表与图表设计独特的交互界面文件规范目录位置：luasrc/view/文件后缀：.htm基本使用示例1.创建模板文件helloworld.htm<h1><%="Hello,"..(nameor"World").."!"%></h1>2.在Controller中注册并渲染--方式一：直接关联entry({"my","new"},template("myapp/helloworld"),"Demo").leaf=true--方式二：传递参数渲染entry({"my","new"},call(function()luci.template.render("myapp/helloworld",{name="LuCI"})end),"Demo").leaf=trueTemplate基本语法嵌入Lua代码<%localx=10;ifx>5then%><p>x>5</p><%end%>输出变量/表达式<p>时间:<%=os.date()%></p><p>欢迎:<%=%></p>包含其他模板<!--复用头部模板--><%+header%><h1>我的页面</h1><%+footer%>翻译转换(I18n)<p><%:"Thisisatranslatablestring"%></p>模板注释<%#这是一行模板注释，不会输出到页面%>7.4UCIAPI操作实践用Lua脚本操作配置文件Lua中的UCIAPI环境准备：安装软件包首先需要安装libuci-lua软件包以启用Lua接口：opkgupdate&&opkginstalllibuci-lua核心作用：Cursor对象cursor是操作UCI配置的顶级入口点。通过它提供的一系列方法，开发者可以对UCI配置文件进行读取、写入、修改和删除等全生命周期管理。实战代码：创建UCI上下文--1.加载UCI库localuci=require("uci")--2.创建标准UCIcursor实例localcursor=uci.cursor()--3.进阶：处理非标准目录配置--localcursor=uci.cursor(nil,"/tmp/config")--后续所有读写操作均通过cursor对象完成UCIAPI常用操作获取配置值(get)获取指定配置节中的选项值。localhostname=cursor:get("system","system","hostname")设置配置值(set)修改或创建配置选项的值。cursor:set("system","system","hostname","MyRouter")删除配置(delete)删除指定的配置选项或整个配置节。cursor:delete("dhcp","lan","leasetime")添加配置节(section)创建新的配置节，可以是命名或匿名。cursor:section("firewall","rule",nil,{src="wan"})遍历配置节(foreach)遍历同类型的所有配置节并执行回调。cursor:foreach("network","interface",func)提交更改(commit)保存所有修改到磁盘，必须调用才生效。cursor:commit("system")7.5实训任务：黑白名单配置综合应用CBI与UCI开发实战实训任务分析：IP黑白名单配置系统功能需求分析工作模式切换支持黑名单、白名单及关闭三种状态切换IP地址管理黑名单禁止访问，白名单仅允许特定IP访问数据持久化存储配置变更需实时写入UCI配置文件持久化UCI配置文件设计configblack-white-listoptionlist_type'none_type'listwhite_list'00'listblack_list''关键配置项说明list_type:标识工作模式(none/white/black)white_list:白名单IP列表(允许访问)black_list:黑名单IP列表(禁止访问)CBI模型实现black-white-list.lua--1.初始化Map对象，绑定配置文件localm=Map("black-white-list","黑白名单配置")locals=m:section(TypedSection,"black-white-list","")

--2.创建下拉菜单，选择工作模式localo=s:option(ListValue,"list_type","ListType")o:value("white_type","WhitelistMode")o:value("black_type","BlacklistMode")

--3.动态列表配置(关键依赖逻辑)localwl=s:option(DynamicList,"whit