OpenWRT(十一)LuCi开发(一)

简介: OpenWRT教程

OpenWRT版本:17

一、基本概念

LuCi的界面用户目录为/usr/lib/lua/luci,以后的编辑都在这个目录下进行。LuCi是基于MVC架构的,M是已经生成的web控件(lua脚本),V是对外部提供的一些web界面,C控制M和V的显示方式。

先看下面两张图:
1.png

2.png

解析:
上面的/usr/lib/lua/luci/controller/admin目录下存放着各个入口文件,
network.lua、status.lua、system.lua三个文件分别对应web页面上的Status、System、Network三个导航栏。所以要添加一个导航时可以在这里新建一个lua文件。

二、例子

我一直觉得学习的过程不应该总是用抽象的概念和语言来表达。一开始应该要有一种直观的概念,能够看到现象才能激发兴趣。就好像工作要有收获才能更有动力。

OK,接下来开始讲解在System导航下添加一个Helloworld的选项。先看一下做完的效果:
3.png

点击Helloworld出现下面页面
4.png

步骤:

  1. 使用WinSCP登录开发板,进入/usr/lib/lua/luci/controller/admin目录下,打开system.lua文件进行编辑。(也可以使用vi进行编辑)
  2. 添加下面语句:

5.png

3.进入/usr/lib/lua/luci/view/admin_system目录下,新建helloworld.htm文件,内容如下:

<%+header%>
<h1><%: HelloWorld %></h1>
<%+footer%>

4、登录web页面就会出现上面的效果。

看完上面的可能有很多不理解的,没事,先看到效果和知道大概怎么添加,下一节我们会解释!!!

相关文章
|
JSON Linux 开发工具
Linux jq 、vim以及LInux集群安装miniconda并配置虚拟环境(笔记)
Linux jq 、vim以及LInux集群安装miniconda并配置虚拟环境(笔记)
110 0
|
6月前
|
人工智能 Linux 开发工具
【Linux系统编程】开发工具yum和vim--2
【Linux系统编程】开发工具yum和vim--2
|
6月前
|
缓存 Ubuntu Linux
【Linux系统编程】开发工具yum和vim--1
【Linux系统编程】开发工具yum和vim--1
|
11月前
|
Linux 编译器 开发工具
LINUX入门篇【4】开发篇--开发工具vim的使用
LINUX入门篇【4】开发篇--开发工具vim的使用
71 1
|
缓存 IDE NoSQL
【Linux】Linux环境基础工具的基本使用及配置(yum、vim)(上)
【Linux】Linux环境基础工具的基本使用及配置(yum、vim)(上)
|
网络架构
OpenWRT(三)支持Web界面
我们买来的路由器在浏览器输入192.168.1.1(有些是其他地址)就能进入一个web的配置界面。OpenWRT也能添加默认的web界面。OpenWRT的web界面是使用LuCI来构造的。(LuCI自行百度)
|
Linux Shell 程序员
【Linux】Linux环境基础工具的基本使用及配置(yum、vim)(下)
【Linux】Linux环境基础工具的基本使用及配置(yum、vim)(下)
|
JavaScript 前端开发 调度
|
监控 安全 网络协议
OpenWRT好用的插件
OpenWRT好用的插件:
4034 0
OpenWRT好用的插件