（2）模板制作 · 基于ThinkPHP5.0的各項后臺小功能代碼實現

我在這里就不新建模塊了，直接用新的框架的index模塊 - 在index模塊下面新建一個跟controller同級的view文件夾，在view文件夾下面新建一個后臺admin文件夾，一個login文件夾 - 首先在login文件夾下面新建一個login.html文件，代碼（標準的HTML5格式）： ``` <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>新碼萌學登錄</title> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  <link rel="stylesheet" type="text/css" href="{$Think.config.web_root}css/main.css"> </head> <body> <div class="container"> <div class="title"><span class="login">登錄</span></div> <div class="form"> <form action="logining" method="post"> <input type="text" name="name" class="username form-control" placeholder="用戶名"> <input type="password" name="password" class="password form-control" placeholder="密碼"> <div class="captchas"> <input placeholder="請輸入驗證碼" name="captcha" class="captcha form-control"></input> <img src="{:captcha_src()}" alt="captcha" onclick="this.src='{:captcha_src()}'"/> </div> <button type="submit" class="submit">提交</button> </form> </div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html> ``` - 在controller文件夾下面新建一個Login.php的控制器，這里只是先把登錄頁面渲染出來 ``` <?php namespace app\index\controller; use think\Input; use think\Controller; use Captcha; class Login extends Controller { public function login(){ return $this->fetch('login'); } } ``` 訪問http://127.0.0.1/tp5/public/index.php/index/login/login 就能看到登錄頁面了，畫面有點丑，后面再細講樣式優化 - - - - - - 這里強調一下，無論是composer還是在官方下載的框架都不包含驗證碼擴展包，這個需要自行Composer，所以會報錯找不到captcha\_src()，這里我已經composer過了，目錄vendor/tothink/think-captcha就是驗證碼擴展包，在Windows下面Composer官方的擴展包可以看一下這個文檔http://www.thinkphp.cn/code/2192.html - - - - - - #### 還有一個后臺模板 - 步驟跟上面一樣，在view下面新建一個admin文件夾，再在admin下面新建一個admin.html文件，代碼： ` {$Think.session.ext\_user\['admin\_name'\]} `頁面中的這段代碼是session的值，注意寫法 ``` <html lang="zh-CN"> <head> <title>后臺中心</title> <meta charset="UTF-8"> <meta http-equiv="refresh" content="1800"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  <link rel="stylesheet" type="text/css" href="/static/css/admin.css"> </head> <body> <div class="container"> <span class="user">歡迎您：{$Think.session.ext_user['admin_name']}</span> <div class="title"><span class="login">后臺中心</span></div> <div class="content"> <p>沒有登錄訪問不進來哦！記得測試一下session。</p> <p>點擊退出后，你再嘗試輸入http://127.0.0.1/tp5/public/index.php/index/admin/admin，會自動退回到登錄頁面。</p> <div class="button"> <a href="logout" class="btn btn-danger btn-lg active" role="button">退出登錄</a> <a href="changepsw" class="btn btn-success btn-lg active" role="button">修改密碼</a>  </div> </div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html> ``` - 上面既然有修改密碼的功能，這里就要在admin文件夾下面新建一個changepsw.html的文件，代碼： ``` <html lang="zh-CN"> <head> <title>修改密碼</title> <meta charset="UTF-8"> <meta http-equiv="refresh" content="1800"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">  <link rel="stylesheet" type="text/css" href="/static/css/changepsw.css"> </head> <body> <div class="container"> <span class="user">歡迎您：{$Think.session.ext_user['admin_name']}</span> <div class="title"><span class="change">修改密碼</span></div> <div class="form"> <form method="post" action="changepassword"> <div class="row"> <div class="cur col-lg-12"><span>原密碼：</span><input type="password" name="oldpassword" class="form-control" placeholder="請輸入原密碼"></input></div> <div class="cur col-lg-12"><span>新密碼：</span><input type="password" name="newpassword" class="form-control" placeholder="請輸入新密碼"></input></div> <div class="cur col-lg-12"><span>再次輸入新密碼：</span><input type="password" name="newpassword1" class="form-control" placeholder="請再次輸入新密碼"></input></div> </div> <input type="submit" value="提交" class="btn btn-primary btn-lg btn-block"></input> <a href="admin" type="submit" value="返回上一頁" class="btn btn-success btn-lg btn-block">返回上一頁</a> </form> </div> </div> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </body> </html> ``` - 在controller文件夾下面新建控制器Admin.php，代碼（ps：要養成寫注釋的好習慣，從最基本的開始）： ``` <?php namespace app\index\controller; use think\Controller; class Admin extends Controller { /*后臺頁面*/ public function admin() { return $this->fetch(); } /*修改密碼頁面*/ public function changepsw() { return $this->fetch(); } } ``` 訪問`http://127.0.0.1/tp5/public/index.php/index/admin/admin` 就能看到后臺頁面了，這里還沒做session處理，所以能訪問進去，后面再細講session設置，訪問`http://127.0.0.1/tp5/public/index.php/index/admin/changepsw` 就能看到修改密碼頁面，這個也是必須登陸后才能進行的操作，所以也需要session處理 #### 2. 模板樣式的引入和修改 - 我在官網里面搜索了一下\_\_PUBLIC，然后找到一個帖子：<http://www.thinkphp.cn/topic/40122.html> 是講解靜態文件引入的，但是個人認為略繁瑣，不過可以學習一下，每次嘗試都是進步。 - 這是官方資源文件加載的方法：<http://www.hmoore.net/manual/thinkphp5/125020> ，我沒有嘗試成功，后面自己找原因。 - 這里主要講解一下我已經實現的方法：在application/config.php下面加一條配置： ``` <?php /**** @author：1132w11 2016.10.25 14:02; ****/ return [ "web_root" => "/tp5/public/static/", ]; ``` 然后再模板文件里面加一條： ``` <link rel="stylesheet" type="text/css" href="{$Think.config.web_root}css/main.css"> ``` 這樣就成功引入了，也不是很復雜，JS跟images等資源也是同樣引入。 #### 4. 模板中靜態文件中登錄需要注意的事項。這里稍微講一點，就是做登錄的時候，可以加一個驗證碼輸入框之外的隱藏的輸入框用于驗證登錄，也就是所謂的key，雙重驗證 ``` <input type="hidden" name="check"> ``` 另外，對輸入框的各種限制一定要做好，可以用正則，也可以用框架自帶的驗證，（作為開發者，永遠都不要相信用戶輸入的方式） **最保險的驗證方式就是在控制器中檢測提交的內容，符合要求才能入庫驗證登錄信息的正確性。這是必須要做的驗證！就算是js那邊已經做過驗證了，這一步希望你不要省事漏掉。**