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

登录页面

状态页面