OpenWrt Web界面修改及功能实现实例说明

简介: http://www.cnblogs.com/dwayne/archive/2012/04/21/2460830.html 通过上篇文章的介绍,我们应该了解了Lua语言在OpenWrt Web配置页面的基本对应功能设计方法。

http://www.cnblogs.com/dwayne/archive/2012/04/21/2460830.html

通过上篇文章的介绍,我们应该了解了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>
复制代码

 

这样,一个页面的定制和功能的实现过程就完成了。

目录
相关文章
|
4天前
|
异构计算 Python
30行代码实现一个带UI界面的图片背景移除工具:并附带web网页
人工智能技术正处于蓬勃发展中,移除图片背景的方法众多,涵盖了各式各样的实现途径和模型。然而,这些方法往往在安装和配置环境方面稍显复杂。今天,介绍一种极其简便的方法——大约30行代码,就能实现这一功能。虽然相比之下可能稍显简单,但对于不太苛刻的需求来说,这种方法颇为方便实用。
|
20天前
|
缓存 前端开发 JavaScript
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
【前端性能优化】深入解析重绘和回流,构建高性能Web界面
23 1
|
26天前
|
开发框架 Dart JavaScript
深入探讨Flutter中的Web支持功能,以及如何利用Flutter构建跨平台Web应用的最佳实践
【6月更文挑战第11天】Flutter,Google的开源跨平台框架,已延伸至Web支持,让开发者能用同一代码库构建移动和Web应用。Flutter Web基于Dart转JavaScript,利用WebAssembly和JavaScript在Web上运行。构建Web应用最佳实践包括选择合适项目、优化性能、进行兼容性测试和利用Flutter的声明式UI、热重载等优势。尽管性能挑战存在,Flutter Web为跨平台开发提供了更多机会和潜力。
43 1
|
5天前
|
人工智能 前端开发 API
基于Web Speech API给AI语言模型加上语音功能,距离MOSS又近了一步
基于Web Speech API给AI语言模型加上语音功能,距离MOSS又近了一步
10 0
|
2月前
|
JavaScript
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
js中如何使用工厂方式和构造函数创建对象,web开发项目实例
|
1月前
|
移动开发 Java Maven
基于OSGi的Virgo Server最简单Spring web实例
基于OSGi的Virgo Server最简单Spring web实例
27 0
|
1月前
|
云安全 监控 安全
WEB应用防火墙的作用,云服务器有这个功能吗
Web应用防火墙(Web Application Firewall,简称WAF)是一种安全产品,旨在保护Web应用程序免受网络攻击和恶意数据流量的影响。
|
2月前
|
存储 前端开发 搜索推荐
13:Session机制实现用户登录与注销功能-Java Web
13:Session机制实现用户登录与注销功能-Java Web
108 3
|
2月前
|
安全 前端开发 Java
10:基于Servlet模拟用户登录功能的实现与解析-Java Web
10:基于Servlet模拟用户登录功能的实现与解析-Java Web
118 3
|
2月前
|
移动开发 开发者 HTML5
【专栏】介绍Flexbox和Grid两种现代Web布局技术,它们能帮助开发者创建美观、响应式且兼容性好的界面
【4月更文挑战第27天】本文介绍了Flexbox和Grid两种现代Web布局技术,它们能帮助开发者创建美观、响应式且兼容性好的界面。Flexbox通过主轴和交叉轴实现复杂布局,如垂直居中、响应式和多列布局。Grid布局则利用网格线定义容器和网格项,适用于网格系统和响应式设计。文中以构建响应式Web界面为例,展示了如何结合Flexbox和Grid实现头部、内容区域和底部的布局。