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 -%>

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

       luci自定义之welcome to luci

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

             首先是一些基础的,<%%>看到这个,就知道是引用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这个命令哟,下班了。上一次说了上图了,客官请看↓↓↓

luci自定义之welcome to luci

登录页面

luci自定义之welcome to luci

状态页面





上一篇:iOS开发UI篇—核心动画(转场动画和组动画)


下一篇:iOS开发UI篇—核心动画(UIView封装动画)