luci实例

MTK

使用cbi创建页面（创建SMS页面）

第一步：

lua/luci/model/cbi/admin_sms/cbi_tab.lua （创建cbi_tab.lua文件）

文件内容如下:

-- 利用LUCI的自身机制实现表单的构建及配置的读取
local m, s
m = Map("network", "luci演示", "这里相当于描述。。。。")
--network 指向 etc/config中的network配置文件
​
-- 定义配置文件的第一种数据 使用interface 
--config interface 'first_section'
--  option ifname '1'
--  option type '2'
--  option ipaddr '192.168.145.1'
--  option net '192.168.145.1'
​
-- 第一种
s = m:section(NamedSection, "first_section", "interface", "标题", '这里相当于描述。。。。')
​
-- 定义配置文件的第二种数据
--config 'first_section'
--  option ifname '1'
--  option type '2'
--  option ipaddr '192.168.145.1'
--  option net '192.168.169.1'
​
-- 第二种
-- s = m:section(TypedSection, "first_section", "标题", '这里相当于描述。。。。')
​
​
-- first_section 指向network配置文件中的 first_section
s.addremove = true
s.anonymouse = false
​
ifname = s:option(Value, "ifname", 'translate("ifname: ")')
ifname.datatype = 'string'
​
itype = s:option(Value, "type", translate("Type: "))
itype.datatype = 'string'
​
ipaddr = s:option(Value, "ipaddr", translate("Ipaddr: "))
ipaddr.datatype = 'ipaddr' -- 类型强校验，不是这种类型的参数无法保存
​
net = s:option(Value, "net", translate("Net:"))
net.datatype = 'ipaddr'
return m

net.datatype = 'ipaddr' 这一句是指定option的类型。ip地址类型
​
neg、list、bool（布尔类型）、uinteger、integer（整型）、ufloat、
float（浮点型）、ipaddr（IP地址）、ip4addr（IP4型IP地址）、ip4prefix（IP4前缀）、
ip6addr、ip6prefix、port、portrange、macaddr、hostname、host、network、wpakey、
wepkey、string、directory、file、device、uciname、range、min、max、rangelength、minlength、
maxlength、phonedigit

Openwrt：LuCI之CBI（二）_Jags的博客-CSDN博客_cbi openwrt cbi控件

第二步：

lua/luci/controller/admin/sms.lua （创建sms.lua文件）

文件内容如下:

module("luci.controller.admin.sms", package.seeall) --  对应的是 controller目录下
function index()                
        -- firstchild() ：自动指向该节点的第一个子节点（order最小的那个节点）                             entry({"admin", "sms"}, firstchild(), "New tab", 30).dependent=false  -- 添加顶级标签和默认值到第一个子标签(cbi_tab)                                               
        entry({"admin", "sms"}, cbi("admin_sms/cbi_tab"), "CBI Tab", 1) 
        
end

备注：
1. {"admin", "sms"} 可以理解成路由  admin/sms  
2. cbi("admin_sms/cbi_tab") // 指向 model/cbi/admin_sms/cbi_tab.lua

编写tab（选项卡）

lua/luci/model/cbi/admin_sms/cbi_tab.lua

-- 利用LUCI的自身机制实现表单的构建及配置的读取
local m, s
m = Map("network", "luci演示", "这里相当于描述。。。。")
--network 指向 etc/config中的network配置文件
​
s = m:section(NamedSection, "first_section", "interface", "标题", '这里相当于描述。。。。')
​
-- 配置文件
-- config interface 'first_section'
--  option ifname '1'
--  option type '2'
--  option ipaddr '192.168.156.1'
--  option net '192.168.156.1'
--  option iswrite ''
--  option got ''
​
s:tab("tab1", "Tab1");
s:tab("tab2", "Tab2");
b1=s:taboption("tab1", Value, "ifname", "tab1 Option111");
​
b2=s:taboption("tab2", Value, "type", "tab2 Option222");
​
iswrite = s:taboption("tab1", ListValue, "iswrite", translate("apn Configuration"))
iswrite:value("0", "长得帅")
iswrite:value("1", "跑得快")
iswrite.default = "0" -- 默认显示第一个 -->  长得帅
​
ipaddr_val = s:taboption("tab1", Value, "ipaddr", 'ip地址')
ipaddr_val.datatype = "string"
ipaddr_val.default = ""
ipaddr_val:depends("iswrite", "1") -- 选择第二个才会显示 ->  "跑得快"
​
got = s:taboption("tab1", ListValue, "got", '蔡徐坤爱好')
got:value("0", "唱")
got:value("1", "跳")
got:value("2", "rap")
got:value("3", "篮球")
got.default = "0" -- 默认显示第一个 -> 唱
got:depends("iswrite", "1")

return m

注意点: 可能在lua文件写代码保存之后，页面没有效果，这时使用 rm -rf /tmp/luci* ，清除缓存

使用template创建页面（创建home页面）

第一步：

lua/luci/view/admin_home/view_tab.htm （创建view_tab.htm文件）

文件内容如下:

<%
    local cbi = require 'luci.model.uci'.cursor()
    local ifname = cbi:get("network", "first_section", "ifname")
    local type = cbi:get("network", "first_section", "type")
    local ipaddr = cbi:get("network", "first_section", "ipaddr")
    local net = cbi:get("network", "first_section", "net")
%>
 /* 引入uci,可以用uci拿到配置文件的数据 etc/config/network  中的 first_section
    config interface 'first_section'
        option ifname '1'
        option type '2'
        option ipaddr '192.168.156.1'
        option net '192.168.156.1'
  */
​
<%+header%>
    
    <div id="home">
        <form
              enctype="multipart/form-data"
              class="layui-form" 
              autocomplete="off"
              action="<%=luci.dispatcher.build_url("admin", "home", "clock_status", "123")%>"
              method="post"
              name="cbi"
            >
            <div><label>Ifname1: </label><span><input type="text" name="ifname" value="<%=ifname%>" id="ifname"/></span></div>
            <div><label>Type: </label><span><input type="text" name="type" value="<%=type%>" id="type" /></span></div>
            <div><label>ipaddr: </label><span><input type="text" name="ipaddr" value="<%=ipaddr%>" id="ipaddr" /></span></div>
            <div><label>Net: </label><span><input type="text" name="net" value="<%net%>"  id="net" /></span></div>
            <button type="submit" class="layui-btn layui-btn-primary layui-border-green" id="formcommit">提交</button>
        </form>
    </div>
    
<%+footer%>

    
    注意：
   /* action="<%=luci.dispatcher.build_url("admin", "home", "clock_status", "123")%
     意思就是跳转到  admin/home/clock_status  这个路由，并且传值123，并且去触发call方法实现保存表单方法，怎么去触发call方法往下看  */
                 

第二步：

lua/luci/controller/admin/home.lua （创建sms.lua文件）

文件内容如下:

-- Copyright 2008 fulinux <fulinux@sina.com>
-- Licensed to the public under the Apache License 2.0.
​
module("luci.controller.admin.home", package.seeall) --  对应的是 controller目录下
function index()                
        -- firstchild() ：自动指向该节点的第一个子节点（order最小的那个节点）                                                                                                    
        entry({"admin", "home"}, firstchild(), "New tab", 30).dependent=false
        entry({"admin", "home"}, template("admin_home/view_tab"), "HOME", 2)
        entry({"admin", "home", "clock_status"}, call("saveForm"), nil).leaf = true
    
end
​
-- action="<%=luci.dispatcher.build_url("admin", "home", "clock_status")%>" 
-- call 触发 saveForm 保存表单方法
function saveForm(params)
    -- params 就是 123，传过来的值
        local cbi = require 'luci.model.uci'.cursor()
        local h = require 'luci.http'
        local dsp = require 'luci.dispatcher'
        
        -- 拿到home页面提交表单的字段
        local ifname = h.formvalue("ifname")
        local in_type = h.formvalue("type")
        local in_ipaddr = h.formvalue("ipaddr")
        local in_net = h.formvalue("net")
    
        cbi:delete("network", "first_section")
        cbi:section("network", "interface", "first_section", {
            ifname = ifname,
            type = in_type,
            ipaddr = in_ipaddr,
            net = in_net
        })
        cbi:save("network")   -- 保存
        cbi:commit("network")   -- 提交到配置文件
        h.redirect(dsp.build_url("admin", "home")) -- 重定向到 admin/home 
        
 end

-- https://blog.csdn.net/zsl_WebEngineer/article/details/123273681    讲解uci

使用call触发方法创建页面

entry({"admin", "sms"}, call("action_syslog"), "SMS", 2)
​
function action_syslog()
    
    luci.template.render("admin_sms/view_tab", {syslog='123'})
​
end

​
​
htm: <%= syslog%>  // 123

请求poll，get

// REQUEST_URI：当前页面路由 
// 解析后：/cgi-bin/luci/;stok=705ff248d54c3a4f6b60aca6a0e55c2b/admin/wlan/settings
// <%=luci.dispatcher.build_url("admin", "status", "overview")%>
XHR.poll(5, '<%=REQUEST_URI%>', { status: 1 },
        function(x, info)
        {
            
        }
);
​
XHR.get('<%=luci.dispatcher.build_url("admin", "mtk", "multi_ap", "get_runtime_topology")%>', null, 
        function(x)
        {
​
        }
);

​

在htm调试

输出到文件

现在vscode终端输入： #tail -f /tmp/luci.output

<% 
    local log = require 'luci.log'
    local test = '123'
%>
<% log.print(test) %>

在tmp/luci.output 查看

注意：不要使用 rm -rf /tmp/luci* ，会把luci.output文件清除

如果你想查看request（table类型）

<% 
    local request = luci.dispatcher.context.request 
%>
​
<% for k, v in pairs(request) do %>
    <%= k%>:
    <%= v%>
<% end %>

OpenWrt达人教程之 LuCI2开发入门指南 - OpenWrt开发者之家 讲解cbi

openwrt luci学习记录2 -- cbi模块_小虎是小蜗牛的博客-CSDN博客 讲解cbi

openwrt 关于 luci - it610.com 讲解cbi

luci cbi 模块函数详解_希哈科技的博客-CSDN博客 讲解cbi

二、Luci中的UCI API的使用_zsl_WebEngineer的博客-CSDN博客 讲解uci

Openwrt：LuCI之CBI（二）_Jags的博客-CSDN博客_cbi openwrt cbi控件

OpenWrt Luci编写小技巧 - 开发者知识库 luci编写小技巧

Lua 5.3 参考手册 - 目录 lua参考手册

Reference luci 官网 api文档