OpenWrt Web界面修改及功能實作執行個體說明

<a href="http://www.cnblogs.com/dwayne/archive/2012/04/21/2460830.html">http://www.cnblogs.com/dwayne/archive/2012/04/21/2460830.html</a>

通過上篇文章的介紹，我們應該了解了Lua語言在OpenWrt Web配置頁面的基本對應功能設計方法。本文将以一個頁面為例，來說明Lua語言如何實作頁面控件以及怎麼使輸入或操作的選項在系統中生效。

頁面如圖所示：

 首先，我們要在System欄下建立分頁"Test by Wayne"，使用cbi子產品實作，修改目錄lua\luci\controller\admin下的system.lua檔案。

在function index()中添加語句：

entry({"admin", "system", "test"}, cbi("admin_system/test"), "Test by Wayne", 30).dependent=false

接下來就需要在lua\luci\model\cbi\admin_system中建立test.lua檔案并完成控件元素編輯。

上一篇文章中已經說過，所有的控件都由Map開始，在這裡我測試的是網絡設定，語句如下：

m = Map("network", translate("Test Page by Wayne (~_~)"), translate("On this page we can learn how the .lua works."))

然後需要建立分塊”Network Configuration”。建立section之前，需要在etc/config目錄下的network檔案中添加一個配置，就取名叫netset吧，network檔案如下：

config 'interface' 'loopback'

        option 'ifname' 'lo'

        option 'proto' 'static'

                   ……

config 'interface' 'lan'

        option 'ifname' 'eth0'

        option 'type' 'bridge'

config 'netset'

修改好配置檔案後，使用如下語句建立section：

s = m:section(TypedSection, "netset", translate("Network Configuration"))

第一個控件”address”屬于cbi類型的Value類型，并且定義輸入類型為ip4addr，實作如下：

ipaddr1 = s:taboption("wan1", Value, "ipaddr1", translate("address"))

ipaddr1.datatype = "ip4addr"

控件”netmask”在這裡其實是ListValue的效果，但是此處為了擁有custom自定義的選項，設定的類型為Value，實作如下：

netmask1 = s:taboption("wan1", Value, "netmask1", translate("netmask"))

netmask1.datatype = "ip4addr"

netmask1:value("255.255.255.0")

netmask1:value("255.255.0.0")

netmask1:value("255.0.0.0")

 到這裡，控件都已經可以添加并顯示了，剩下的工作就是輸入的值如IP位址和網關資訊怎麼擷取生效了。

在進行編輯Save &amp; Apply後，再打開etc/config/network檔案，發現檔案内容如下：

        option 'ipaddr1' '192.168.1.30'

        option 'netmask1' '255.255.255.0'

        option 'gateway1' '192.168.1.5'

即所操作的内容都在配置檔案中自動儲存，而配置檔案中的值擷取方式就很多了，我們可以使用uci指令得到。

Usage: uci [&lt;options&gt;] &lt;command&gt; [&lt;arguments&gt;]

Commands:

        batch

        export     [&lt;config&gt;]

        import     [&lt;config&gt;]

        changes    [&lt;config&gt;]

        commit     [&lt;config&gt;]

        add        &lt;config&gt; &lt;section-type&gt;

        add_list   &lt;config&gt;.&lt;section&gt;.&lt;option&gt;=&lt;string&gt;

        show       [&lt;config&gt;[.&lt;section&gt;[.&lt;option&gt;]]]

        get        &lt;config&gt;.&lt;section&gt;[.&lt;option&gt;]

        set        &lt;config&gt;.&lt;section&gt;[.&lt;option&gt;]=&lt;value&gt;

        delete     &lt;config&gt;[.&lt;section[.&lt;option&gt;]]

        rename     &lt;config&gt;.&lt;section&gt;[.&lt;option&gt;]=&lt;name&gt;

        revert     &lt;config&gt;[.&lt;section&gt;[.&lt;option&gt;]]

        reorder    &lt;config&gt;.&lt;section&gt;=&lt;position&gt;

這樣，一個頁面的定制和功能的實作過程就完成了。