luci自定义之welcome to luci

简介:           终于有空了,又可以偷偷写博了,这一次是写登录页面还有状态页面。          首先说一下登录页面,登录页面是最容易改的,因为我们不需要重构页面,只要修改样式就可以了。

          终于有空了,又可以偷偷写博了,这一次是写登录页面还有状态页面。

          首先说一下登录页面,登录页面是最容易改的,因为我们不需要重构页面,只要修改样式就可以了。

           下面就开始吧,首先要找到登录页面所在的位置。登录页面是放在了/usr/lib/lua/luci/view,那个sysauth.htm就是了。

           登录页面仅仅只是一个htm页面,所以很容易就可以修改了,好了,我们打开代码页面,会发现大部分都是样式和一点lua。其实这些都可以不要,只要保留以下的核心代码,然后再自己重写样式就可以了。

           核心代码如下:↓↓↓

          <form method="post" action="<%=pcdata(luci.http.getenv("REQUEST_URI"))%>">

                     <input type="text" name="username" placeholder="请输入用户名" class="form-control input-lg" value="<%=duser%>">

                    <input type="password" name="password" placeholder="请输入密码" class="form-control input-lg">

                   <button type="submit" class="loginBtn">登录</button>

           </form>

           很容易看出,这是一个表单,提交项就提交给/cgi-bin/luci这里,认证通过之后,就会去到index.lua这里,然后就会跳转到指定页面。我们这里是跳转到admin_mypage/poindex.htm,这个在上期说的index.lua这里修改。

          但是这样就算密码错了也不会有提示的,所以要在表单里面加上

                    <%- if fuser then %>
                             <div class="error" style="color:#FF0000;"><%:Invalid username and/or password! Please try again.%></div>
                            <br />
                    <% end -%>

          这一小段代码就会使交互变得更加友好了。

       

             不知不觉又到了下班时间,由于状态页面要写的也比较多,所以这里只写一小部分,其他的就放在后面有空写咯

             首先是一些基础的,<%%>看到这个,就知道是引用lua语言啦。这里主要分为几种;

             第一种是<% %>,这个一般是在开头,里面完全使用lua语句,在这里一般是用来获取系统的基本信息之类的。

             第二种是<%=ssid%>,这个是获取lua变量ssid的值,

             第三种就就像是上面登录错误信息显示那样<%-     %><%       -%>这种是拆分使用lua语言的,也就是在两个lua语句直接嵌入html。

            第四种也是跟上面的登录信息一样的<%:%>这个是用来显示国际化的哈,遇到英文显示英文,遇到中文显示中文,但是也是有预设才行,如<%:Invalid username and/or password! Please try again.%>在中文环境就会显示上面图片红色的中文。

             主要示例如下:

             <%
                      require 'luci.sys'

                      require 'luci.common'

                      require 'luci.http'

                      local ssid = luci.common.trim(luci.sys.exec('uci get wireless.@wifi-iface[0].ssid'))

               %><!--用于获取2.4GHz的SSID>

                    <h3>无线状态</h3>
                        <div class="col-md-6">
                            <h5>2.4GHz无线概况</h5>
                            <dl class="dl-horizontal">
                                <dt>WIFI名称(SSID):</dt>
                                <dd><%=ssid%></dd><!--用于显示2.4GHz的SSID,也就是显示上面获取到的lua变量>
                            </dl>
                        </div>

                对了,还要了解uci get这个命令哟,下班了。上一次说了上图了,客官请看↓↓↓

登录页面


状态页面





目录
相关文章
|
12月前
|
数据库 开发者
ovirt实用脚本
翻译自:https://www.ovirt.org/develop/developer-guide/db-issues/helperutilities.html#taskcleaner
78 0
|
Ubuntu
Ubuntu设置apt代理(使用Synaptic Package Manager 新立得软件包管理器、修改 /etc/apt/apt.conf.d/proxy.conf 文件、修改 .bashrc)
Ubuntu设置apt代理(使用Synaptic Package Manager 新立得软件包管理器、修改 /etc/apt/apt.conf.d/proxy.conf 文件、修改 .bashrc)
390 0
Ubuntu设置apt代理(使用Synaptic Package Manager 新立得软件包管理器、修改 /etc/apt/apt.conf.d/proxy.conf 文件、修改 .bashrc)
|
关系型数据库 开发工具 存储
mogilefs 安装与配置
安装步骤 配置yum 的epel源 yum install perl-Sys-Syslog perl-IO-AIO perl-Net-Netmask -y # 安装依赖的包 取得mogilefs的rpm包 MogileFS-Server-2.
966 0
|
Ubuntu 关系型数据库 MySQL
How to Install and Configure Icinga2 Monitoring Tool on Ubuntu 16.04
In this tutorial, we will explore how to install Docker on Alibaba Cloud and learn some important Docker commands to help you deploy and manage your container services.
3013 0
How to Install and Configure Icinga2 Monitoring Tool on Ubuntu 16.04
|
JavaScript 关系型数据库 MySQL
|
关系型数据库 MySQL 数据安全/隐私保护
|
机器学习/深度学习 Linux Shell