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>

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

时间: 2024-12-23 04:02:04

OpenWrt Web界面修改及功能实现实例说明的相关文章

OpenWRT - WEB界面开发思路和基本方法

想要对OpenWRT的WEB界面(*下称界面)进行修改.修改的目标是: 1.修改页面的样式,设计为企业的风格(stylesheet) 2.新建自己的功能,实现 访问页面后,用户就可以对配置文件(也就是系统的一些参数)进行修改. 甚至是与远端服务器交互,实现验证. 一. 几种可行的开发路线: 1.改用PHP.JSP等语言开发 2.修改已有的界面,实现自己的功能 2.1 修改已有样式表 2.2 仍然利用lua开发 第一种比较容易操作,但需要在设备里安装nginx和PHP环境,然后在 /www下放PH

色彩设计在WEB界面应用的功能性详解

今天的世界是互联网的世界.技术的进步,让我们开始关注"信息的品质".在信息技术云集的互联网世界中,一个网站的与众不同和独特的色彩,是在众多网站中脱颖而出的首要条件之一."色彩"它是自然美.生活美.艺术美的重要组成部分.在计算机技术和信息网络科技快速发达的今天,色彩设计的创造力在这一高科技领域也得以延伸.从互联网上五彩缤纷的页面来看,任何一件WEB界面设计作品都离不开色彩设计.商务网络界面要利用色彩设计传达产品形象信息,旅游网络界面要利用色彩设计传达实物风景信息,游戏

ubuntu编译openwrt前端web界面

openwrt是由Cisco放出源代码的开放无线路由平台.由于是基于linux内核,所以可以将很多linux平台下的软件移植到此平台下,然后让无线路由拥有很多意想不到的功能,例如拿来做BT下载器,音乐播放器,小型数据库处理等等. 环境: Ubuntu 10.04,subversion,VMware workstation 7.1.3 首先是得到openwrt的源代码. 在Ubuntu下,首先安装上svn工具: sudo apt-get install subversion 然后装上各种依赖关系包

FileSystemObject组件新建读取添加修改删除功能实例

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>FileSystemObject组件应该实例</title> </head> <

zabbix-基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案

http://www.zabbix.com/ abbix(音同 z?bix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定位/解决存在的各种问题. zabbix由2部分构成,zabbix server与可选组件zabbix agent. zabbix server可以通过SNMP,zabbix agent,ping,端口监视等方法提供对远程服务器/网络状态的监视,

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

各位网友大家好,如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示,相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像. 从本篇文章开始,我将带领大家,手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面.同时实战开发中的案例代码可以作为你项目中的精简框架了. 当你学习完成<CSS3实战开发: 弹性盒模型之响应式WEB界面设计>这个系列教程之后,相信你对目前比较流行的前端轻量级框架 Bootstrap等会有一个深刻的认识. Bootstrap(弹性流体布

k8s之web界面(Dashboard)从安装到应用

web界面(Dashboard) 之前在kubernetes中完成的所有操作都是通过命令行工具kubectl完成的,为了提供更丰富的用户体验,kubernetes还开发了一个基于web的用户界面(Dashboard).用户可以使用Dashboard部署容器化的应用,还可以监控应用的状态,执行故障排查以及管理kubernetes中各种资源. 在kubernetes Dashboard中可以查看集群中应用的运行状态,也能够创建和修改各种kubernetes资源(比如Deployment,Job,Da

基于MVC+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也

基于MVC4+EasyUI的Web开发框架经验总结(2)- 使用EasyUI的树控件构建Web界面

最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采用EasyUI的前端界面处理技术,走MVC的技术路线,在重构完善过程中,很多细节花费不少时间进行研究和提炼,一步步走过来,也积累了不少经验,本系列将主要介绍我在进一步完善我的Web框架基础上积累的经验进行分享,本随笔主要介绍使用EasyUI的树控件构建Web界面的相关经验. 在很多界面设计上,我们可能都需要引入树列表控件,这个控件可以用zTree来实现,也