`

openwrt ---Luci - 网页用户配置界面开发

 
阅读更多
luci 参考资料
http://luci.subsignal.org/trac/wiki/Documentation
http://wiki.openwrt.org/doc/techref/preinit_mount?#first.boot
http://www.google.com.hk/search?q=Luci&hl=en&safe=strict&domains=openwrt.org&sitesearch=openwrt.org&prmd=ivnsl&ei=kDCrTc6UGI-WvAO63LH_CQ&start=0&sa=N
http://wiki.openwrt.org/doc/techref/luci
http://wiki.openwrt.org/doc/uci
http://wiki.openwrt.org/doc/techref/uci
 
LuCI作为“FFLuCI”诞生于2008年3月份,目的是为OpenWrt固件从 Whiterussian 到 Kamikaze实现快速配置接口。
Lua是一个小巧的脚本语言,很容易嵌入其它语言。轻量级. LUA语言的官方版本只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快,从而适合嵌入在别的程序里。
UCI是OpenWrt中为实现所有系统配置的一个统一接口,英文名Unified Configuration Interface,即统一配置接口。LuCI,即是这两个项目的合体,可以实现路由的网页配置界面。
最初开发这个项目的原因是没有一个应用于嵌入式的免费,干净,可扩展以及维护简单的网页用户界面接口。大部分相似的配置接口太依赖于大量的Shell脚本语言的应用,但是LuCi使用的是Lua编程语言,并将接口分为逻辑部分,如模板和视图。
LuCI使用的是面向对象的库和模板,确保了高效的执行,轻量的安装体积,更快的执行速度以及最重要的一个特性————更好的可维护性。
与此同时,LuCI从MVC-Webframework衍生出一个包含了很多库、程序以及Lua程序用户接口的集合,但是LuCI仍然专注于实现网页用户界面并成为OpenWrt Kamikaze官方的一份子。
 
 
/www/index.html:
<meta http-equiv="refresh" content="0; URL=/cgi-bin/luci" />
<a style="color: white; text-decoration: none" href="/cgi-bin/luci">LuCI - Lua Configuration Interface
 
在 web server 中的 cgi-bin 目录下,运行 luci 文件(权限一般是 755 ) , luci 的代码如下:
1 #!/usr/bin/lua -- 执行命令的路径
2 require"luci.cacheloader" -- 导入 cacheloader 包
3 require"luci.sgi.cgi"  -- 导入 sgi.cgi 包
4 luci.dispatcher.indexcache = "/tmp/luci-indexcache" --cache 缓存路径地址
5 luci.sgi.cgi.run()  -- 执 行 run 方法,此方法位于 /usr/lib/lua/luci/sgi/cgi.lua中, 内容如下:
--[[
LuCI - SGI-Module for CGI
Description: Server Gateway Interface for CGI
]]--
exectime = os.clock()
module("luci.sgi.cgi", package.seeall)
local ltn12 = require("luci.ltn12")
require("nixio.util")
require("luci.http")
require("luci.sys")
require("luci.dispatcher")
 
-- Limited source to avoid endless blocking
local function limitsource(handle, limit)
limit = limit or 0
local BLOCKSIZE = ltn12.BLOCKSIZE
 
return function()
if limit < 1 then
handle:close()
return nil
else
local read = (limit > BLOCKSIZE) and BLOCKSIZE or limit
limit = limit - read
 
local chunk = handle:read(read)
if not chunk then handle:close() end
return chunk
end
end
end
 
function run()
local r = luci.http.Request(
luci.sys.getenv(),
limitsource(io.stdin, tonumber(luci.sys.getenv("CONTENT_LENGTH"))),
ltn12.sink.file(io.stderr)
)
 
local x = coroutine.create(luci.dispatcher.httpdispatch)
local hcache = ""
local active = true
 
while coroutine.status(x) ~= "dead" do
local res, id, data1, data2 = coroutine.resume(x, r)
 
if not res then
print("Status: 500 Internal Server Error")
print("Content-Type: text/plain\n")
print(id)
break;
end
 
if active then
if id == 1 then
io.write("Status: " .. tostring(data1) .. " " .. data2 .. "\r\n")
elseif id == 2 then
hcache = hcache .. data1 .. ": " .. data2 .. "\r\n"
elseif id == 3 then
io.write(hcache)
io.write("\r\n")
elseif id == 4 then
io.write(tostring(data1 or ""))
elseif id == 5 then
io.flush()
io.close()
active = false
elseif id == 6 then
data1:copyz(nixio.stdout, data2)
data1:close()
end
end
end
end
 
openwrt源:
1.转到OpenWrt根目录。
2.输入 ./scripts/feeds update
3.输入 ./scripts/feeds install -a -p luci
4.输入 make menuconfig
5.在”LuCI”菜单下你将找到所有的组件。
 
OpenWrt 安装包版本库:
1.添加一行文字到你的/etc/opkg.conf中,即将LuCI添加到版本库中:
src luci http://downloads.openwrt/kamikaze/8.09.2/YOUR_ARCHITECTURE/packages
2.输入 opkg update
3.LuCI 简版输入: opkg install luci-light
  LuCI 普通版: opkg install luci
  自定义模块的安装: opkg install luci-app-*
4.为了实现HTTPS支持,需要安装luci-ssl meta安装包
 
也许你想修改一下openWrt那个路由配置的丑陋界面,也许你想事项自己软件的一些功能。但是却没有办法去修改LuCI。在路由器上直接修改那就算了,我想说的是如何修改该LuCI的源代码,这样子你编译好的bin镜像文件直接刷入路由器中就ok了。你先得了解一下LuCI,包括它的模块怎么写的,用的是lua语言等:LuCI实现启动应用程序等脚本命令, 然后你想知道怎么将LuCI编译进固件中去:
输入./scripts/feeds/ install LuCI
这样子你会发现feeds文件夹下面有LuCI了,但是里面除了文件夹一无所有,但是回到menuconfig中去回发现有LuCI了,还可以选择ddns等模块,还可以选择中文语言了,可以编译到固件中去了。那么我们就编译一下试试吧。在dl文件夹中,我们看到了LuCI-0.10+svn7976.tar.gz, 这证明源码其实是在这里的
我们又进入build_dir/target-mips_uClibc-0.9.30.1这个文件夹下面发现了解压的上述文件了,好了,其实这个就是编译的文件夹啦。看看里面有什么?theme啊什么的,找个theme里面的header.htm改改编译后看看,发现在新的固件中已经出现了改动了。
好我再模仿application文件夹下面的一些程序 如LuCI-ddns写了一个LuCI-smustar的配置程序界面放到这个文件夹下面,回头到menuconfig中发现没有啊,怎么办?别急 回到feeds/LuCI/LuCI中找到makefile加入
$(eval $(call application,smustar,smustar for 802.1x,+PACKAGE_LuCI-app-smustar:smustar-scipts))
^_^,再回到menuconfig中就看到了,果断的选了,然后就编译到固件中去了
乎,折腾了我几天的LuCI终于在bulder_dir下找到源码可以修改,不过最好别该这里要改就makefile和dl下的源码吧,省的有时候buldr_dir下面的源码会呗dl下的那个压缩文件解压过去,扔在里面的文件就会丢失,小心!

 

 


自用修改:

 

--[[
luci 封装好的html控件类可以在以下文件查看:./host/usr/lib/lua/luci/cbi.lua

Diagnostics 页面相关文件: controller/admin/network.lua, view/admin_network/diagnostics.htm
HTM 页面的变量和lua交互, html中: name="ping", this.form.ping, lua中: diag_ping
<input style="width: 50%" type="text" value="openwrt.org" name="ping" />
<input type="button" value="<%:Ping%>" class="cbi-button cbi-button-apply" onclick="update_status(this.form.ping,this.form.proto)" />
page = entry({"admin", "network", "diag_ping"}, call("diag_ping"), nil)

#只修改 name="pingxu", this.form.pingxu, 页面也执行, 出现如下错误:
No page is registered at '/admin/network/diag_pingxu/openwrt.org'.
If this url belongs to an extension, make sure it is properly installed.
If the extension was recently installed, try removing the /tmp/luci-indexcache file.
--- 再修改 diag_pingxu 则OK, page = entry({"admin", "network", "diag_pingxu"}, call("diag_ping"), nil)

在已有的lua文件中修改, 网页上可以直接看到界面; 增加或删除lua文件, 则必须重启路由器才可以看到界面

#lua中增加页面: view/xutest/web-cgi.htm, 后缀名必须为htm, 不能为html.
page.target = template("xutest/web-cgi")
/usr/lib/lua/luci/template.lua:81: Failed to load template 'xutest/web-cgi'.
Error while parsing template '/usr/lib/lua/luci/view/xutest/web-cgi.htm'.

#htm 中直接跳转
<a href="http://www.w3school.com.cn/index.html">W3School web

#/www/xutest/web-cgi.html, uhttp默认的跟目录和luci中的目录不同. 192.168.1.1 换成localhost 则错误
<a href="http://192.168.1.1/xutest/web-cgi.html">web-cgi

#index.html中 直接执行luci命令
<a style="color: white; text-decoration: none" href="/cgi-bin/luci">LuCI - Lua Configuration Interface


]]--

 

page = node("admin", "network", "diagnostics")
-- 直接链接到 view 相应目录下面的 htm 页面
page.target = template("admin_network/diagnostics")
page.title  = _("Diagnostics")
page.order  = 60

 

 


参考: 
1.  luci在线API: http://luci.subsignal.org/api/luci/
2. luci实现框架: http://www.cnblogs.com/zmkeil/archive/2013/05/14/3078774.html


BusyBox v1.19.4 (2013-09-27 00:16:27 EDT) built-in shell (ash)
Enter 'help' for a list of built-in commands.


  _______                     ________        __
 |       |.-----.-----.-----.|  |  |  |.----.|  |_
 |   -   ||  _  |  -__|     ||  |  |  ||   _||   _|
 |_______||   __|_____|__|__||________||__|  |____|
          |__| W I R E L E S S   F R E E D O M
 -----------------------------------------------------
 BARRIER BREAKER (Attitude Adjustment 12.09.1-qiushui007 test)
 -----------------------------------------------------
  * 1/2 oz Galliano         Pour all ingredients into
  * 4 oz cold Coffee        an irish coffee mug filled
  * 1 1/2 oz Dark Rum       with crushed ice. Stir.
  * 2 tsp. Creme de Cacao
 -----------------------------------------------------

root@OpenWrt:~# df -h
Filesystem                Size      Used Available Use% Mounted on
rootfs                    5.3M    272.0K      5.0M   5% /
/dev/root                 1.8M      1.8M         0 100% /rom
tmpfs                    30.2M     88.0K     30.1M   0% /tmp
tmpfs                   512.0K         0    512.0K   0% /dev
root                     30.2M     48.0K     30.1M   0% /tmp/root
overlayfs:/tmp/root      30.2M     48.0K     30.1M   0% /tmp/root
/dev/mtdblock3            5.3M    272.0K      5.0M   5% /overlay
overlayfs:/overlay        5.3M    272.0K      5.0M   5% /

root@OpenWrt:/xutest# opkg update
Downloading http://192.168.2.224/packages-ar71xx-AA/Packages.gz.
Updated list of available packages in /var/opkg-lists/snapshots.

root@OpenWrt:/xutest# opkg install luci
Installing luci (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci_0.11.1-1_ar71xx.ipk.
Installing uhttpd (2012-10-30-e57bf6d8bfa465a50eea2c30269acdfe751a46fd) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/uhttpd_2012-10-30-e57bf6d8bfa465a50eea2c30269acdfe751a46fd_ar71xx.ipk.
Installing luci-mod-admin-full (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-mod-admin-full_0.11.1-1_ar71xx.ipk.
Installing luci-mod-admin-core (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-mod-admin-core_0.11.1-1_ar71xx.ipk.
Installing luci-lib-web (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-lib-web_0.11.1-1_ar71xx.ipk.
Installing luci-lib-core (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-lib-core_0.11.1-1_ar71xx.ipk.
Installing lua (5.1.4-8) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/lua_5.1.4-8_ar71xx.ipk.
Installing liblua (5.1.4-8) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/liblua_5.1.4-8_ar71xx.ipk.
Installing libuci-lua (2013-01-04.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/libuci-lua_2013-01-04.1-1_ar71xx.ipk.
Installing libubus-lua (2013-01-13-bf566871bd6a633e4504c60c6fc55b2a97305a50) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/libubus-lua_2013-01-13-bf566871bd6a633e4504c60c6fc55b2a97305a50_ar71xx.ipk.
Installing luci-lib-sys (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-lib-sys_0.11.1-1_ar71xx.ipk.
Installing luci-lib-nixio (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-lib-nixio_0.11.1-1_ar71xx.ipk.
Installing luci-sgi-cgi (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-sgi-cgi_0.11.1-1_ar71xx.ipk.
Installing luci-proto-core (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-proto-core_0.11.1-1_ar71xx.ipk.
Installing luci-i18n-english (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-i18n-english_0.11.1-1_ar71xx.ipk.
Installing luci-lib-ipkg (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-lib-ipkg_0.11.1-1_ar71xx.ipk.
Installing luci-theme-openwrt (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-theme-openwrt_0.11.1-1_ar71xx.ipk.
Installing luci-theme-base (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-theme-base_0.11.1-1_ar71xx.ipk.
Installing luci-app-firewall (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-app-firewall_0.11.1-1_ar71xx.ipk.
Installing luci-proto-ppp (0.11.1-1) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/luci-proto-ppp_0.11.1-1_ar71xx.ipk.
Installing libiwinfo-lua (36) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/libiwinfo-lua_36_ar71xx.ipk.
Installing libiwinfo (36) to root...
Downloading http://192.168.2.224/packages-ar71xx-AA/libiwinfo_36_ar71xx.ipk.
Configuring luci-lib-sys.
Configuring liblua.
Configuring libuci-lua.
Configuring lua.
Configuring libubus-lua.
Configuring luci-lib-core.
Configuring luci-lib-nixio.
Configuring luci-sgi-cgi.
Configuring luci-lib-web.
Configuring luci-proto-core.
Configuring luci-i18n-english.
Configuring luci-mod-admin-core.
Configuring libiwinfo.
Configuring libiwinfo-lua.
Configuring luci-theme-base.
Configuring luci-theme-openwrt.
Configuring luci-app-firewall.
Configuring luci-lib-ipkg.
Configuring luci-proto-ppp.
Configuring luci-mod-admin-full.
Configuring uhttpd.
Configuring luci.
Collected errors:
 * resolve_conffiles: Existing conffile /etc/config/luci is different from the conffile in the new package. The new conffile will be placed at /etc/config/luci-opkg.

root@OpenWrt:/xutest# df -h
Filesystem                Size      Used Available Use% Mounted on
rootfs                    5.3M    944.0K      4.4M  17% /
/dev/root                 1.8M      1.8M         0 100% /rom
tmpfs                    30.2M    388.0K     29.8M   1% /tmp
tmpfs                   512.0K         0    512.0K   0% /dev
root                     30.2M     48.0K     30.1M   0% /tmp/root
overlayfs:/tmp/root      30.2M     48.0K     30.1M   0% /tmp/root
/dev/mtdblock3            5.3M    944.0K      4.4M  17% /overlay
overlayfs:/overlay        5.3M    944.0K      4.4M  17% /

分享到:
评论

相关推荐

    OpenWRT LUCI2界面定制、Ubus对象增删配置、http调用Ubus方法

    网络上绝大部分都是LUCI的资料,几乎没有LUCI2的参考文献,即便有也是官网复制的,个人整理测试可用的LUCI2资料

    luci:LuCI-OpenWrt配置界面

    这是包含LuCI-OpenWrt配置界面的OpenWrt“ luci”提要。 用法 默认情况下,此供稿已启用。 您的feeds.conf.default(或feeds.conf)应包含如下一行: src-git luci https://github.com/openwrt/luci.git 要安装其...

    luci:LuCI-OpenWrt配置界面

    这是包含LuCI-OpenWrt配置界面的OpenWrt“ luci”提要。 用法 默认情况下,此供稿已启用。 您的feeds.conf.default(或feeds.conf)应包含如下一行: src-git luci https://github.com/openwrt/luci.git 要安装其...

    openwrt-luci:该LuCI存储库仅适用于Lienol fork OpenWRT源代码

    这是包含LuCI-OpenWrt配置界面的OpenWrt“ luci”提要。 用法 默认情况下,此供稿已启用。 您的feeds.conf.default(或feeds.conf)应包含如下一行: src-git luci https://github.com/Lienol/luci.git;18.06 要...

    2013-05-06 16:47 OpenWRT官网下载页面中各个名称的中文翻译

    config 配置文件,下载用文本编辑器打可在文件前面看到“# OpenWrt version: Barrier Breaker (rXXXXX)”的开发代号和编译号等版本信息 md5sums MD5校验码 openwrt-*-factory.bin 标准镜像,用于工厂刷机模式,...

    OpenWrt开发入门培训视频.zip

    3.OpenWRT开发环境配置。 4.make menuconfig常用选项的含义。 5.Bootloader、固件的关系,以及常见Flash布局方式。 6.固件结构分析,固件头的作用。 7.交叉编译工具链的原理和使用方法。 8.OpenWRT Package结构分析...

    下一步–在vue.js中实现的OpenWrt的现代Web界面-Vue.js开发

    Next oui –在vue.js中实现的OpenWrt现代Web界面oui(中文)在vue.js和Vue的Ant Design中实现的OpenWrt Web用户界面。 Oui使用json-rpc与OpenWrt子系统通信并支持ACL。 Oui特别适合企业定制开发。 如何构建添加提要...

    luci:https的分支

    OpenWrt luci提要描述这是包含LuCI-OpenWrt配置界面的OpenWrt“ luci”提要。用法默认情况下,此供稿已启用。您的feeds.conf.default(或feeds.conf)应包含如下一行: src-git luci ...

    luci:每天自动拉取更新从 https

    这是包含LuCI-OpenWrt配置界面的OpenWrt“ luci”提要。 用法 默认情况下,此供稿已启用。 您的feeds.conf.default(或feeds.conf)应包含如下一行: src-git luci https://github.com/openwrt/luci.git 要安装其...

    Socket编程-tcp&udp-测试用例.docx

    在OpenWrt的软路由上进行luci的自定义web界面开发,可实现自定义配置,以及其可视化修改,提供简单、易操作的配置修改功能。当然,这些功能的实现一方面基于OpenWrt自身软路由的特性,且可自行进行编译选择添加组件...

    oui:在vue.js和Lua中实现的OpenWrt的现代Web界面

    oui() 在和实现的OpenWrt Web用户界面。 Oui使用与OpenWrt子系统通信并支持ACL。 Oui特别适合企业定制开发。如何建造添加提要echo "src-git oui ...

    lua路由器的开发

    LuCI是OpenWrt上的Web管理界面,LuCI采用了MVC三层架构,同时其使用Lua脚本开发,所以开发LuCI的配置界面不需要编辑任何的Html代码,除非想自己单独去创建网页(View层),否则我们基本上只需要修改Model层就可以了...

    openwrit学习资料

    openwrt下载、编译总结,开发资料收集,包括用户层模块开发、内核模块开发、文件系统、web界面开发、procd、统一配置接口uci、进程间通讯ubus等。

Global site tag (gtag.js) - Google Analytics