OpenWrt Web界面修改及功能實現實例說明

通過上篇文章的介紹，我們應該了解了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 
          ' 
          
        option  
          ' 
          proto 
          '  
          ' 
          static 
          ' 
          
                   …… 
          
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 & Apply后，再打開etc/config/network文件，發現文件內容如下：

           config  
          ' 
          interface 
          '  
          ' 
          loopback 
          ' 
          
        option  
          ' 
          ifname 
          '  
          ' 
          lo 
          ' 
          
        option  
          ' 
          proto 
          '  
          ' 
          static 
          ' 
          
                   …… 
          
config  
          ' 
          interface 
          '  
          ' 
          lan 
          ' 
          
        option  
          ' 
          ifname 
          '  
          ' 
          eth0 
          ' 
          
        option  
          ' 
          type 
          '  
          ' 
          bridge 
          ' 
          
        option  
          ' 
          proto 
          '  
          ' 
          static 
          ' 
          
                   …… 
          
config  
          ' 
          netset 
          ' 
          
        option  
          ' 
          ipaddr1 
          '  
          ' 
          192.168.1.30 
          ' 
          
        option  
          ' 
          netmask1 
          '  
          ' 
          255.255.255.0 
          ' 
          
        option  
          ' 
          gateway1 
          '  
          ' 
          192.168.1.5 
          ' 
         

 

即所操作的內容都在配置文件中自動保存，而配置文件中的值獲取方式就很多了，我們可以使用uci命令得到。

           Usage: uci [<options>] < 
          command> [<arguments>] 
          
  
          
Commands: 
          
        batch 
          
        export     [<config>] 
          
        import     [<config>] 
          
        changes    [<config>] 
          
        commit     [<config>] 
          
        add        <config> <section- 
          type> 
          
        add_list   <config>.<section>.<option>=<string> 
          
        show       [<config>[.<section>[.<option>]]] 
          
        get        <config>.<section>[.<option>] 
          
         
          set        <config>.<section>[.<option>]=<value> 
          
        delete     <config>[.<section[.<option>]] 
          
         
          rename     <config>.<section>[.<option>]=<name> 
          
        revert     <config>[.<section>[.<option>]] 
          
        reorder    <config>.<section>=<position> 
         

 

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