第十课--MicroWRT Web 移植 - 版本历史

Shengkai81@gmail.com：/* Luci 页面编辑 */

2014-12-28T04:06:54Z

‎Luci 页面编辑

Shengkai81@gmail.com：/* Luci 页面编辑 */

2014-12-28T04:06:15Z

‎Luci 页面编辑

Shengkai81@gmail.com：/* Luci 页面编辑 */

2014-12-28T04:05:48Z

‎Luci 页面编辑

Shengkai81@gmail.com：Created page with "{| style="width: 800px;" |- | 本节主要介绍如何在openwrt下进行LUCI的移植开发，大部分路由器的提供了web 配置方式，openwrt 也不例外，有了w..."

2014-12-28T04:02:20Z

Created page with "{| style="width: 800px;" |- | 本节主要介绍如何在openwrt下进行LUCI的移植开发，大部分路由器的提供了web 配置方式，openwrt 也不例外，有了w..."

新页面

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

==Luci 编译==

首先介绍luci 的编译，luci 的编译比较简单。首先进入openwrt 的配置界面，进入luci 的界面选择页面，如下图所示：
[[File:luci1.jpg|800px|thumb|center|LUCI]]

[[File:luci2.jpg|800px|thumb|center|LUCI]]

[[File:luci3.jpg|800px|thumb|center|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%>
<h1><%:Hello World%></h1>
<%+footer%>

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

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

|}

@@ 第41行： / 第41行： @@
 第三个参数为显示的名字，第四个参数为显示顺序，这里在最后显示，其中helloworld.htm 文件的内容如下：
-   //<%+header%>
+   <%+header%>
-   //<h1><%:Hello World%></h1>
+   <h1><%:Hello World%></h1>
-   //<%+footer%>
+   <%+footer%>
 执行完之后可以看下界面的显示,可以看到system 下面有了helloworld 选项，点击他进入界面，如下图所示：

@@ 第31行： / 第31行： @@
 比如system.lua 就对应的主界面的system 栏下面，咱们现在希望在system 栏中增加一个自定义的界面，这里为了方面描述只显示helloworld。
 每个功能界面的入口地址为对应的lua 文件中entry 功能函数，entry 功能函数的原型为：
   entry(path, target, title=nil, order=nil)
 前面两个参数是必须的，后面两个是可选的。Path 形如（admin，system，reboot），entry 根据这些属性创建节点，
 比如上面内容代表在system 标签中的reboot 页面，target 是这里的重点，它描述了当用户调用这个界面所执行的行为。
@@ 第39行： / 第37行： @@
 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%>
+  <%+header%>
- <h1><%:Hello World%></h1>
+  <h1><%:Hello World%></h1>
- <%+footer%>
+  <%+footer%>
 执行完之后可以看下界面的显示,可以看到system 下面有了helloworld 选项，点击他进入界面，如下图所示：

第十课--MicroWRT Web 移植 - 版本历史

Shengkai81@gmail.com：/* Luci 页面编辑 */

Shengkai81@gmail.com：/* Luci 页面编辑 */

Shengkai81@gmail.com：/* Luci 页面编辑 */

Shengkai81@gmail.com：Created page with "{| style="width: 800px;" |- | 本节主要介绍如何在openwrt下进行LUCI的移植开发，大部分路由器的提供了web 配置方式，openwrt 也不例外， 有了w..."

Shengkai81@gmail.com：Created page with "{| style="width: 800px;" |- | 本节主要介绍如何在openwrt下进行LUCI的移植开发，大部分路由器的提供了web 配置方式，openwrt 也不例外，有了w..."