终于有空了,又可以偷偷写博了,这一次是写登录页面还有状态页面。
首先说一下登录页面,登录页面是最容易改的,因为我们不需要重构页面,只要修改样式就可以了。
下面就开始吧,首先要找到登录页面所在的位置。登录页面是放在了/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这个命令哟,下班了。上一次说了上图了,客官请看↓↓↓
登录页面
状态页面