“第十课--MicroWRT Web 移植”的版本间的差异

来自Microduino Wikipedia
跳转至: 导航搜索
Luci 页面编辑
Luci 页面编辑
 
第41行: 第41行:
 
第三个参数为显示的名字,第四个参数为显示顺序,这里在最后显示,其中helloworld.htm 文件的内容如下:
 
第三个参数为显示的名字,第四个参数为显示顺序,这里在最后显示,其中helloworld.htm 文件的内容如下:
  
   //<%+header%>
+
   <%+header%>
   //<h1><%:Hello World%></h1>
+
   <h1><%:Hello World%></h1>
   //<%+footer%>
+
   <%+footer%>
  
 
执行完之后可以看下界面的显示,可以看到system 下面有了helloworld 选项,点击他进入界面,如下图所示:
 
执行完之后可以看下界面的显示,可以看到system 下面有了helloworld 选项,点击他进入界面,如下图所示:

2014年12月28日 (日) 04:06的最新版本

本节主要介绍如何在openwrt下进行LUCI的移植开发,大部分路由器的提供了web 配置方式,openwrt 也不例外, 有了web 界面就可以简单配置有关路由器的一些参数了,比如ip 地址,无线参数等,而且如果做自己的应用的话web 界面也少不了。 Openwrt 提供了两种web 界面,luci 和webif,这两种界面各有千秋。Luci 是官方提供的标准界面,webif 是第三方开发的界面。 他们有一个共同点是他们都是脚本,解释性语言。这就为他们的扩张提供了方便。本节教程主要介绍在openwrt上面web 的移植和开发, 对于web 的移植openwrt 已经做了集成移植比较简单,但是web 的开发官网上面介绍的非常少,所以这里也介绍下怎么增加一个简单界面, 为以后的扩张。

Luci 编译

首先介绍luci 的编译,luci 的编译比较简单。首先进入openwrt 的配置界面,进入luci 的界面选择页面,如下图所示:

选中luci,这样基本的luci 界面就选中了,然后保存退出编译即可,编译的话请参考编译章节。 这样编译出的固件即具有了luci 界面。任何一个web 界面都包括两部分内容,一部分是web 服务器, 一部分是界面语言,openwrt 的web 服务器默认采用uhttpd,端口80,web 界面语言为luci,luci 包括两部分内容,它是由lua 和uci 合并起来的,lua 是一种执行效率非常高的解释性语言,uci 是配置openwrt 的默认工具。对于uci 的使用后面章节会有介绍,这里就不说了。 编译好固件之后下载进去即可使用luci 了,默认的luci 界面如下所示:

Luci 页面编辑

Luci 的界面用户目录在/usr/lib/lua/luci,luci 是mvc 架构,/usr/lib/lua/luci/下有三个目录model、view、controller, 它们对应M、V、C。下面简单介绍生成界面的方法。其中M 是已经生成的web 控件,其实这里就是写好的lua 脚本, V 是给外部提供的一些web 界面,C 控制其V 和M 的显示方式,从上面的描述可以看出C 部分是其入口的地方, 现在就进入controller 看看他的内容,其实它的入口地址在controller的admin 目录下面,里面的各个lua 文件就是各个入口, 比如system.lua 就对应的主界面的system 栏下面,咱们现在希望在system 栏中增加一个自定义的界面,这里为了方面描述只显示helloworld。 每个功能界面的入口地址为对应的lua 文件中entry 功能函数,entry 功能函数的原型为:

entry(path, target, title=nil, order=nil)

前面两个参数是必须的,后面两个是可选的。Path 形如(admin,system,reboot),entry 根据这些属性创建节点, 比如上面内容代表在system 标签中的reboot 页面,target 是这里的重点,它描述了当用户调用这个界面所执行的行为。 这里主要由三种行为,call、template、cbi,其中call 为调用文件中的功能函数, template 为调用view 中的html 界面,cbi 为调用mode 中的lua 文件。Title 是在页面中显示的内容, order 是显示的顺序,顺序越小显示内容越靠前。下面在system.lua 中增加一条:

 entry({"admin", "system", "helloworld"}, template("admin_system/helloworld"), _("helloworld"), 99)

其中第一个参数代表一个节点,第二个参数,调用view/admin_system/helloworld.htm 文件, 第三个参数为显示的名字,第四个参数为显示顺序,这里在最后显示,其中helloworld.htm 文件的内容如下:

 <%+header%>

<%:Hello World%>

 <%+footer%>

执行完之后可以看下界面的显示,可以看到system 下面有了helloworld 选项,点击他进入界面,如下图所示:

可以看到和界面内容保持一致。这样一个简单的界面就增加成功了,不过只是简单显示了一条语句, 要增加更复杂的内容,读者可以学习相关的资料做后续开发。