openwrt web简介

1、Openwrt web简介邵艳洁2015年4月电信版 2 openwrt web - LuCI LuCI是Lua和UCI这两个项目的合体 目的提供网页配置界面，为OpenWrt实现快速配置接口 Lua是一个小巧的脚本语言 UCI是OpenWrt中为实现所有系统配置的一个统一接口，英文名是Unified Configuration Interface，即统一配置接口 使用MVC架构 3 代码结构 applications：应用程序 i18n：多语言定义 libs：存放各种库文件 modules：存放大部分页面代码 po：存放语言资源文件 themes: 存放风格文件 4 代码结构-加入编译 如果

2、想要使用某个子文件夹的内容，则需要在Makefile中增加相应的项。以加入applications下的luci-firewall为例： 5 代码结构-modules admin-core: 包含各用户用到的基础lua文件 admin-full: admin用户代码 admin-mini: user用户代码 6 代码结构-modules modules每个文件夹下的luasrc文件夹都包含controller、model、view三个文件夹，其中代码完全拷贝至板子中/usr/lib/lua/luci目录下同名文件夹。 controller：定义页面的各级菜单 model：定义子页面的配置项 vi

3、ew：定义htm文件 7 代码结构-modules：admin-full index.lua：admin用户的入口，定义进入后要显示的页面，页面认证用户等。 network.lua:定义网络页面子菜单 status.lua:定义状态页面子菜单 system.lua:定义系统页面子菜单 8 代码结构-modules：admin-full admin_network: 网络页面lua代码 admin_status: 状态页面lua代码 admin_system:系统页面lua代码 9 代码结构-modules：admin-full admin_network: 网络页面htm代码 admin_st

4、atus: 状态页面htm代码 admin_system:系统页面htm代码 10 代码结构-themes 目前只保留了iwifi一个风格 base为基本风格文件，其中的htdocsluci-staticresourcesicons存放了页面所需要的图片资源 11 代码结构-themes cascade.css：定义该theme的css 12 代码结构-themes 定义头部和底部显示 13 如何增加themes 假设新增的theme名称为mytheme1.在themes文件夹下增加一个名为mytheme的文件夹。2.在themes/mytheme文件夹下增加一个Makefile，其内容为 1

5、4 如何增加themes3.按照如下目录结构增加文件夹 15 如何增加themes4.设计页面 在luasrc/view/themes/mytheme下增加header.htm和footer.htm文件，在htdocs/luci-static/mytheme增加casscade.css文件。 header.htm以如下代码开头： 16 如何增加themes5.在root/etc/uci-defaults/下创建luci-theme-mytheme文件，内容为： 17 如何增加themes6.在ipkg/下创建postinst文件，内容为： 18 LuCI-模板在html中，常用的模板如下： 包

6、含一段lua代码： 获取变量或者函数的值：，可简写为 包含htm模板：，可简写为 包含多语言资源：，可简写为 19 内置的常量有： REQUEST_URI：当前的URL（不包含server部分） controller：LuCI dispatcher的路径 resource：资源文件的路径 media：当前使用的theme文件夹路径LuCI-模板 20 LuCI-常用CBI模型Map (config, title, description) config：需要映射的配置文件，位于/etc/config目录下 title：web中显示的标题 description：页面中显示的描述 21 LuCI

7、-常用CBI模型NamedSection (name, type, title, description) 使用代码Map:section(NamedSection, name, type, title, description) name：配置文件中区域名称 type：配置文件中区域类型 title：web中显示的标题 descritpion：web中显示的描述 22 LuCI-常用CBI模型TypedSection(type, title, description) 使用代码map:section(TypedSection, type, title, description) type：配

8、置文件中区域类型 title：web中显示的标题 descritpion：web中显示的描述 23 LuCI-常用CBI模型 Value (option, title, description)-文本输入框 使用代码option(Value, option, title, description) option:配置文件中选定配置区的配置项名称 title：该配置项在web显示的名称 description：该配置项在web中显示的描述 24 LuCI-常用CBI模型 ListValue(option, title, description)-下拉选择框 使用代码option(ListValu

9、e, option, title, description) 25 LuCI-常用CBI模型 Flag(option, title, description)-勾择框 使用代码option(Flag, option, title, description) 26 LuCI-常用CBI模型 DummyValue(option, title, description)-只读信息 使用代码option(DummyValue, option, title, description) 27 LuCI-常用CBI模型DynamicList(option, title, description) 对应配置文

10、件中的option list 使用代码option(DynamicList, option, title, description) 28 增加一个页面 例子：在admin用户的系统页面增加一个用户管理子页面1.修改modules/admin-full/controller/admin/system.lua加入菜单信息。2.在modules/admin-full/model/cbi/admin_system下加入passwd.lua，在其中写入需要显示的项。注：如果增加的页面是htm形式，则需要把第一步的cbi修改为template，并在modules/admin-full/view下加入passwd.htm 29 保存/应用流程 页面点击保存/应用，触发uci:commit执行配置写入 执行luci-reload，加载配置文件ucitrack luci-reload解析ucitrack中config配置区域,获取到/etc/init.d下的应用程序名称 执行/etc/init.d/应用程序 reload 30 web代码在板子中的位置 /usr/