Openwrt LuCI模塊練習詳細步驟

近在學習openwrt luci方面的知識,為了貫穿整個知識體系,練習題目為:

通過頁面配置周期性地往/tmp/addtest文件寫入內容和時間戳
1.在web主頁面的下拉菜單做一個按鈕,進入設置頁面;
2.兩個設置項:輸入的內容和周期;
3,讀取/tmp/addtest中的內容并顯示在頁面上;

代碼已經開源,歡迎交流~

知識準備

源碼編譯及ipk生成

這部分網上相關文章很多,也可以參見拙作

LuCI

首先回答一個問題:什么是Luci?
~~>LuCI是OpenWrt上的Web管理界面，LuCI采用了MVC三層架構，使用Lua腳本開發.~~

簡單地說,Luci就是用來做openwrt的頁面的.不同于常見的html+css+javascript,Openwrt是用lua腳本語言開發的.

怎么開發一個頁面呢?

要開發一個新的功能頁面,開發者只要根據MVC框架寫些簡單的lua腳本,剩下的部分由openwrt為你自動完成.

說到MVC框架了,什么是MVC框架呢?

MVC是model+view+controller的簡寫.為了便于開發,openwrt將實現不同功能的lua腳本放在不同的文件夾中.請看下圖:

什么是controller控制器?

我們在這里設置功能在頁面的位置,同時設置點擊頁面后,將要調用的功能.是要去Model模型讀寫配置數據呢?還是要呈現一個靜態頁面,或者是直接執行lua腳本函數.

什么是model模型?

這里我們常用的是,通過cbi模塊和UCI(統一配置接口)進行交互.簡單地說,就是我們在這里將頁面和路由器里面的配置關聯起來,從而將頁面的設置寫到路由器當中.

什么是view視圖?

這個應該是最容易理解的,就是呈現的頁面的樣式,有點類似于傳統的html頁面.

上面說到了UCI(Unified Configuartion Interface),這是什么龜?

openwrt將配置用統一的格式書寫,放在規定的地方(/etc/config/),同時提供接口函數進行讀取和設置.

如果還不太明白,接著向下看.如果有可能跟著我動動手,相信你很快就會掌握:)

正文

我們先看下最終效果圖:

我們在頁面上面的System下拉框的下面加了一個AddTest按鈕,下面有兩個子選項:Set和Info.其中Set用于選擇是否開啟功能,設置時間間隔和內容.Info用于顯示/tmp/addtest文件中的內容.

準備工作

首先,嗯~
你得有環境,得有電,有源碼,編譯過簡單的ipk.如果沒有,請回爐重造.
其次,建立相應的文件夾及文件.至于linux操作神馬的,我相信你一定沒有問題.

$mkdir -p ~/temp/addtest
$cd ~/temp/addtest

最終文件樹形圖

骨架已經有了,下面只需要往里面填肉了,是不是感覺很快~
不要管為什么要這樣,我們后面慢慢解釋.

controller

前面我們提到,controller主要用于控制頁面按鈕位置,以及調用的功能.首先來編輯這個文件.

$vim ~/temp/addtest/files/usr/lib/lua/luci/controller/addtest.lua

代碼如下:

module("luci.controller.addtest",package.seeall)

function index()
    entry({"admin","system","addtest"},alias("admin","system","addtest","set"),_("AddTest"),99).index=true
    entry({"admin","system","addtest","set"},cbi("addtest"),_("Set"),1)
    entry({"admin","system","addtest","info"},call("action_info"),_("Info"),2)
end

function action_info()
    if not nixio.fs.access("/tmp/addtest") then
        return
    end

    local info=nixio.fs.readfile("/tmp/addtest")
    luci.template.render("addtest_info",{info=info})
end

格式模板:

module("luci.controller.控制器名", package.seeall)

function index()
        entry(路徑, 調用目標, _("顯示名稱"), 顯示順序)
        end

這個腳本文件可以分為3塊:第1行,3~7行,9~16行

第1行說明了模塊的名稱,本文在controller目錄下創建了addtest.lua文件,將模板中的控制器名替換為addtest即可.第3行第3~7行定義按鈕的位置,調用的功能,顯示名稱.其中第3行和第7行是固定的模板格式,不需要修改第4行entry表示添加新的模塊.
第一個參數{"admin","system","addtest"}表示按鈕的位置.admin表示我們這個功能只有以管理員身份登錄頁面才可以看到.system表示一級菜單名,addtest則是一級菜單下的子菜單.
第二個參數alias("admin","system","addtest","set")表示調用的功能.這個按鈕沒有獨立的功能,而是將它關聯到它的下一級子菜單set.
第三個參數_("AddTest")表示顯示名稱,可選.如果頁面按鈕想做成中文,可以在這里設置.
第四個參數99表示顯示順序的優先級,Luci根據這個值為同一父菜單的所有子菜單排序.第5行第一個參數{"admin","system","addtest","set"}表示在addtest下再增加一個子選項set.
第二個參數cbi("addtest")表示調用cbi模塊,這里將會調用到/usr/lib/lua/luci/model/cbi/addtest.lua第6行第二個參數call("action_info")表示執行指定方法,這里將會調用我們下面寫的acttion_info函數.備注關于entry第二個參數調用目標.我們還有一個template沒有涉及,它表示訪問指定頁面.比如template(addtest_info)將會直接訪問/usr/lib/lua/luci/view/addtest_info.htm.9~16行這里使用lua語言調用nixio接口寫了一個簡單的函數,首先判斷文件是否存在,然后讀取其中的內容賦值給變量info,最后訪問指定頁面/usr/lib/lua/luci/view/addtest_info.htm,同時將變量info傳遞過去.
luci接口手冊
nixio接口手冊

UCI

UCI是openwrt的配置管理機制,它將配置統一放到/etc/config文件夾下.詳細地介紹請參考這里.
下面來編輯這個文件

$vim ~/temp/addtest/files/etc/config/addtest

代碼如下:

config arguments
    option interval ''
    option content ''

Section開始語法: config '類型' '名字'
參數定義語法: option '鍵' '值'
列表定義語法: list '集合名字' '值'

簡單解釋下,我們在/etc/config下新建一個名為addtest的配置文件,其中類型為arguments,名字省略.有兩個鍵,一個名為interval用來存時間間隔.一個名為content用來存準備周期性輸入的內容.

Model

在controller章節中,我們提到cbi會調用到model文件夾中的addtest.lua文件.下面我們來編輯它.

$vim ~/temp/addtest/files/usr/lib/lua/luci/model/cbi/addtest.lua

代碼如下:

m=Map("addtest",translate("Luci practice"),translate("fat cheng's test"))

s=m:section(TypedSection,"arguments","")
s.addremove=true
s.anonymous=false

s:option(Flag,"enable",translate("Enable"))
s:option(Value,"interval",translate("Interval"))
s:option(Value,"content",translate("Content"))

local apply=luci.http.formvalue("cbi.apply")
if apply then
    io.popen("/etc/init.d/addtestd restart")
end

return m

下面我們來解釋下這個文件.

第1行模板m=Map("配置文件文件名", "配置頁面標題", "配置頁面說明")
第一個參數:上一步我們新建配置文件/etc/config/addtest.這里就是建立與配置文件的聯系.
第二,三兩個參數,則是頁面的主標題和副標題.還不清楚的話,翻上去看看最終效果圖,看看它們在哪里.第3行在一個配置文件中可能有很多Section,所以我們需要創建與配置文件中我們想要的Section的聯系.
有兩種方式可以選擇:NamedSection(name,type,title,description)和TypedSection(type,title,description),前者根據配置文件中的Section名，而后者根據配置文件中的Section類型.我們選用了第二種.第4行設定不允許增加或刪除Section第5行設定顯示Section的名稱,這里建議你可以試試設定為true,看看會發生什么.7~9行接著則是建立與Section中的option之間的聯系.模板s:option(交互形式,option鍵值,顯示名稱).
第一個參數:常見的交互形式有Value(文本框),ListValue(下拉框),Flag(選擇框).,不知道為啥我打不開官方文檔,這里也可以參考
第二個參數表示在配置文件中的option的鍵值
第三個參數表示,你希望在頁面上呈現的名稱.
創建后開發者無需考慮讀取以及寫入配置文件的問題，系統會自動處理.11~14行系統會為我們在頁面上自動創建一些按鈕Save&Apply,Save,Reset.我們僅僅將配置寫入/etc/config下對應的文件是不夠的,我們還希望可以根據這個配置進行一些操作.
這部分代碼的作用是,當你按下頁面的apply按鈕后,相當于在串口shell下輸入/etc/init.d/addtestd restart

init.d

上一節我們已經可以讀寫配置了,怎么根據配置來進行操作呢?這是我們這一節要談的.我們來編輯~/temp/addtest/files/etc/init.d/addtestd這個文件.
代碼如下:

#!/bin/sh /etc/rc.common
START=50

run_addtest()
{
    local enable
    config_get_bool enable $1 enable

    if [ $enable ]; then
        local interval
        local content
        config_get interval $1 interval
        config_get content $1 content

        addtest $interval $content           
    fi
}

start()
{
    config_load addtest
    config_foreach run_addtest arguments
}

stop()
{
    result=`pidof addtest`
    kill -9 $result
    echo "addtest has stoped"
}

第1行Linux 系統根據 “#!” 及該字串后面的信息確定該文件的類型,表示這個文件需要由/bin/sh和/etc/rc.common來解釋執行.第2行表示啟動的優先級,這里暫時用不到4~17行是一個函數,主要作用是讀取/etc/config/addtest中的內容,然后根據是否打開開關在第15行將配置傳遞給可執行文件addtest,由它根據配置執行指定的操作.
讀取配置的方法,我強烈推薦你閱讀官方文檔,精煉而簡潔.
獲取布爾值類型:config_get_bool 變量名 Section名 Section參數名
獲取變量值:config_get 變量名 Section名 Section參數名19~23行對應于/etc/init.d/addtestd start.首先使用config_load 配置文件名的方法載入配置文件,然后使用config_foreach 遍歷函數名 Section類型的方法,遍歷配置文件中的Section.25~30行對應于/etc/init.d/addtestd stop.找到addtest這個進程的進程號,然后殺死它備注前一節提到的/etc/init.d/addtestd restart中的restart命令,在/etc/rc.common進行了定義,簡單來講就是先執行了stop命令,再執行start命令.
最后務必執行$sudo chmod 755 ~/temp/addtest/files/etc/init.d/addtestd.

src

前一節,我們談到run_addtest調用可執行文件addtest,現在我們編輯這部分內容

$vim ~/temp/addtest/files/src/addtest.c

代碼如下:

#include <stdio.h>
#include <string.h>
#include <unistd.h>
#include <stdlib.h>

int main(int argc, char *argv[])
{
    int index;
    for(index=0; index<10; index++)
    {
        FILE *fp=fopen("/tmp/addtest","at");
        system("date >> /tmp/addtest");
        fprintf(fp, "%s\n", argv[2]);
        fclose(fp);
        printf("interval=%d\n",atoi(argv[1]));
        sleep(  atoi(argv[1]) );
    }
    return 0;
}

這部分代碼比較簡短,我們不再解釋.需要掌握的點有:

1.argc和argv[]的使用方法
2.fopen函數,fclose函數以及fprintf函數的使用方法
3.system函數的使用方法
4.sleep函數和atoi函數的使用方法,argv[1]的類型為char需要轉換為整型.

通過這個可執行文件,我們周期性地將時間戳和內容寫入了/tmp/addtest文件.
最后我們寫一個簡單的Makefile:

$vim $vim ~/temp/addtest/files/src/Makefile

代碼如下:

addtest : addtest.o
    $(CC) addtest.o -o addtest

addtest.o : addtest.c
    $(CC) -c addtest.c

clean :
    rm *.o addtest

View

上一節,我們已經根據配置將指定的內容周期性地寫入了/tmp/addtest.在controller那一節,我們的函數action_info讀取了/tmp/addtest中的內容并訪問指定頁面/usr/lib/lua/luci/view/addtest_info.htm,同時將讀取的內容通過變量info傳遞過去.
下面我們來編輯這個頁面,
$vim ~/temp/addtest/files/usr/lib/lua/luci/view/addtest_info.htm
代碼如下:

<%+header%>
<h2><a id="content" name="content"><%:Addtest Info%></a></h2>
<div id="content_addtest_info">
<textarea readonly="readonly" wrap="off" rows="<%=info:cmatch("\n")+2%>" id="info"><%=info:pcdata()%></textarea>
</div>
<%+footer%>

這部分和傳統的html很類似,我主要是根據其他頁面照貓畫虎,不是很美觀.有機會還要加強這個方面的學習.

Makefile

不知不覺,我們居然已經將代碼全部寫完了,竟還有點戀戀不舍呢.下面我們用一個Makefie文件將它們打包生成一個ipk文件.

$vim ~/temp/addtest/Makefile

代碼如下:

include $(TOPDIR)/rules.mk

PKG_NAME:=addtest
PKG_VERSION=1.0
PKG_RELEASE:=1

PKG_BUILD_DIR:=$(BUILD_DIR)/$(PKG_NAME)

include $(INCLUDE_DIR)/package.mk

define Package/addtest
    SECTION:=utils
    CATEGORY:=Utilities
    TITLE:=Addtest--print something to /var/addtest
endef

define Package/addtest/description
    It's a test,print something to /var/addtest cyclicaliy
endef

define Build/Prepare
    mkdir -p $(PKG_BUILD_DIR)
    $(CP) ./src/* $(PKG_BUILD_DIR)/
endef

define Package/addtest/postinst
#!/bin/sh
rm -rf /tmp/luci*
endef

define Build/Configure
endef

define Build/Compile
    $(call Build/Compile/Default)
endef

define Package/$(PKG_NAME)/install
    $(CP) ./files/* $(1)/
    $(INSTALL_DIR) $(1)/bin
    $(INSTALL_BIN)  $(PKG_BUILD_DIR)/addtest  $(1)/bin
endef

$(eval $(call BuildPackage,$(PKG_NAME)))

Makefile的解釋,請參見拙作.我們這里稍作補充.

26~29行由于luci會將模塊加載到/tmp目錄下運行,每次新加載luci模塊后,需要執行$rm -rf /tmp/luci*.這里表示安裝了ipk之后,將會自動執行刪除命令,重新載入.39行$(1)是傳入的參數,表示系統鏡像目錄,你可以將之視為路由器最后的文件系統.所以這句的意思就是將我們files下的內容拷貝到路由器的文件系統中.這也是我們為什么要建立一開始那么復雜的目錄樹的原因.

編譯&安裝

簡直像裹腳布一樣,又臭又長.不要說讀了,我自己寫的都快有點受不了了.讀到這里的人真是辛苦了,下面到了我們收獲果實的時候了.
將文件拷貝到源碼目錄的package目錄下.其余部分,請參考拙作

$cp ~/temp/addtest ~/openwrt/package

把它拷貝到你的開發板中,試試看.

調試方法

我們當然希望可以一次成功,不過世間不如意之事十之八九.我來談談我自己的調試方法.

src部分src文件下有Makefile文件,你可以直接在編譯機上執行$make生成可執行文件addtest,然后在編譯機上src目錄下執行$./addtest 參數1 參數2.最后記得執行$make clean.luci部分將ipk安裝到開發板后,可以通過串口或者ssh的方式登錄開發板,然后直接在開發板中修改文件內容,再執行$rm -rf /tmp/luci*.最后重新載入設備頁面.

、luci-base目錄下包含如下圖幾個文件夾：

1、htdocs(html+docs)：此目錄存放HTML相關文件，主要包含以下兩個目錄，當燒錄到硬件設備后，將拷貝到/www根目錄下

cgi-bin：存放luci啟動腳本
luci-static：存放HTML相關文件，包含CSS、JS及網頁圖片等文件

2、luasrc(lua+src)：此目錄存放系統功能的LUA文件及M（model）、V（view）、C（controller）文件夾，當燒錄到硬件設備后，將拷貝到/usr/lib/lua/luci目錄下

C（controller）：控制器，生成頁面的菜單欄并定義各個頁面的調用方法
M（model）：數據模型，根據底層UCI配置文件生成頁面
V（view）：視圖，HTML頁面

3、po：定義頁面的語言風格

4、root：存放配置文件，該目錄下的所有文件將拷貝到硬件設備根目錄下

5、src：生成所需要的庫文件及LUA腳本

6、Makefile：定義luci-base的編譯方法

二、luci-mod-admin-full目錄

由此可以看出，LUCI的文件框架都是以luci-base目錄為基礎，其他主題及模式都是在此基礎之上進行增減。

三、/www目錄結構

cgi-bin：此文件從luci-base下拷貝過來的，存放luci啟動腳本
index.html ：http請求的主頁面，默認是/www/index.html，這個文件里顯示了登錄時常看見的那句話“LuCI - Lua Configuration Interface”，同時也指定了href鏈接/cgi-bin/luci
luci-static：存放HTML相關文件，包含CSS、JS及網頁圖片等文件。不同主題的htdocs/luci-static都將拷貝到這個目錄下

四、/usr/lib/lua/目錄結構/

　　usr/lib/lua/路徑，顧名思義，存放了與LUA相關的文件，在LUA腳本中，通過require命令引用的腳本及函數，起始路徑都是該目錄。同時，不同模型及主題的luasrc文件夾都拷貝到/usr/lib/lua/luci目錄下，通過/etc/config/luci中的mediaurlbase字段決定當前使用的主題及語言。

果你經常需要從GitHub上Pull一些開源的項目啥的！國外的服務器還好，但是國內的服務器就非常慢了！經常是下不動或者只有 10KB 的速度。

這篇文章就來分享幾個特別簡單的可以加速GitHub 下載的方法，雞肋的方法就不介紹了。

1、利用Gitee加速訪問GitHub倉庫

1.1、關于Gitee

官網：https://gitee.com/

OSCHINA 推出的代碼托管·協作開發平臺，開發者超過 500 萬，托管項目超過 1000 萬，匯聚幾乎所有本土原創開源項目，并于 2016 年推出企業版，提供企業級代碼托管服務，成為開發領域領先的 SaaS 服務提供商。

支持 Git / SVN，個人版免費5G倉庫容量。

1.2、部署流程

1）注冊賬號

2）登陸Gitee賬號，擊右上角新建倉庫的“+”，選擇【從 GitHub / GitLab 導入倉庫】或者【進入https://gitee.com/login注冊】

3）填寫要導入的項目即可（如果之前有人導入過該倉庫，可以直接復用他的倉庫即可）。

4）等待項目成功導入碼云后，直接從碼云將項目 clone 到本地，速度非常快

對比之前github的速度。

2、GitHub代下載服務

1、網址：http://g.widora.cn/

示例1: GitHub主倉庫 https://github.com/aaaa/bbbb.git
示例2: GitHub分支用示例1的鏈接，下載完后到本地用git checkout出任意分支或tag
示例3: Release頁面右鍵復制的鏈接，例如 https://github.com/openwrt/luci/archive/0.10.0.zip
示例4: 其他源碼包的直鏈，例如 https://cdn.kernel.org/pub/linux/kernel/v5.x/linux-5.7.tar.xz

2、網址：https://d.serctl.com/

使用方法和上面一樣，具體看圖：

3、http://toolwa.com/github/

用法和上面類似，這里不在贅述。

3、VPS中轉

前提是你有一臺國外的vps，你把項目git到你的vps上，然后再從自己的vps里面下載項目，速度也會不錯。比如說你安裝了寶塔，可以利用寶塔面板自帶的外鏈分享來實現下載。

4、富強、民主、自由、和諧

前提是有一臺境外的vps，搭建一個工具，然后，設置全局服務，git的速度也是很快的。這個方法這里就不討論了。

5、最后

方法都有缺陷，最好的就是最后一種方法，用Gitee的話，如果是最新版本還需要去github下載。

如果你有自己vps，那么可以先clone到VPS上，然后再拉回來。

利用第三方工具來下載也是個不錯的方法。

還有一種cdn加速方法，就是尋找github的加速地址即可，不過，這個方法有點啰嗦了，不符合簡潔好用的范疇，這里也就不討論了。

如果你有更好的方法，不妨留言分享。

原文鏈接：https://www.haah.net/archives/4103.html

在線咨詢

上一篇：分享5款開源企業級后臺模版，開發項目必備
下一篇：JAVAWEB 文件上傳及下載

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Openwrt LuCI模塊練習詳細步驟

知識準備

源碼編譯及ipk生成

LuCI

正文

準備工作

controller

UCI

Model

init.d

src

View

Makefile

編譯&安裝

調試方法

、luci-base目錄下包含如下圖幾個文件夾：

1、htdocs(html+docs)：此目錄存放HTML相關文件，主要包含以下兩個目錄，當燒錄到硬件設備后，將拷貝到/www根目錄下

2、luasrc(lua+src)：此目錄存放系統功能的LUA文件及M（model）、V（view）、C（controller）文件夾，當燒錄到硬件設備后，將拷貝到/usr/lib/lua/luci目錄下

3、po：定義頁面的語言風格

4、root：存放配置文件，該目錄下的所有文件將拷貝到硬件設備根目錄下

5、src：生成所需要的庫文件及LUA腳本

6、Makefile：定義luci-base的編譯方法

二、luci-mod-admin-full目錄

三、/www目錄結構

四、/usr/lib/lua/目錄結構/

1、利用Gitee加速訪問GitHub倉庫

2、GitHub代下載服務

3、VPS中轉

4、富強、民主、自由、和諧

5、最后

您的項目需求