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这个命令哟,下班了。上一次说了上图了,客官请看↓↓↓

登录页面


状态页面





目录
相关文章
|
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)
379 0
Ubuntu设置apt代理(使用Synaptic Package Manager 新立得软件包管理器、修改 /etc/apt/apt.conf.d/proxy.conf 文件、修改 .bashrc)
|
应用服务中间件 开发工具 nginx
Mac通过Brew安装Nginx的Echo模块
Mac通过Brew安装Nginx的Echo模块
666 0
|
Ubuntu Linux 开发工具
Linux - ubuntu下Vim安装失败,报The following packages have unmet dependencies: vim : Depends: vim-common
Linux - ubuntu下Vim安装失败,报The following packages have unmet dependencies: vim : Depends: vim-common
490 0
|
应用服务中间件 nginx
mac install nginx
下载 Nginx 源码包 下载页: http://nginx.org/en/download.html 当前稳定版本: http://nginx.org/download/nginx-1.8.0.tar.
2100 1
|
关系型数据库 MySQL 数据安全/隐私保护
|
机器学习/深度学习 Linux Shell
|
Web App开发 网络安全 Perl