系統登錄的實現 · Thinkphp5工具箱

登錄功能，是我們幾乎開發每個系統都必須的模塊。 ## 登錄功能設計思路 1. 用戶輸入網址展示登錄頁面 1. 用戶輸入用戶名，密碼等點擊登錄進行信息校驗 1. 校驗通過之后，記錄用戶登錄信息，跳轉指定頁面 1. 用戶校驗失敗，提示失敗信息 ## 下面功能相關的目錄和文件 ![](https://box.kancloud.cn/1c8e62de39b466b68e43712d7aab4274_292x805.jpg) ## 具體功能實現 1. 登錄頁面的設計為了快速搭建可用、美觀的頁面，我們采用一個比較成熟的前端框架 Bootstrap。下面我們到 Bootstrap的官網 [Bootsrap官網](http://v3.bootcss.com/)下載 bootstrap。本案例下載 v3.3.7。下載完成之后，放到 public\static 下改名為 bootstrap。在 application\index\controller 下新建 Login.php ~~~ <?php namespace app\index\controller; use think\Controller; class Login extends Controller { public function index() { return $this->fetch(); } } ~~~ 在 application\index\view 新建 login 文件夾，然后在其內新建 index.hml ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登錄系統</title> <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> </head> <body class="gray-bg"> <div class="container"> <div class="row"> <div class="col-sm-7"> <div class="ibox float-e-margins"> <div class="ibox-content"> <div class="row"> <div class="col-sm-6 b-r"> <h3 class="m-t-none m-b">登錄</h3> <p>歡迎登錄本站(⊙o⊙)</p> <form role="form" action="{:url('login/dologin')}" method="post"> <div class="form-group"> <label>用戶名</label> <input type="text" placeholder="請輸入用戶名" class="form-control"> </div> <div class="form-group"> <label>密碼</label> <input type="password" placeholder="請輸入密碼" class="form-control"> </div> <div> <button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登錄</strong> </button> </div> </form> </div> </div> </div> </div> </div> </div> </div> <script src="/static/js/jquery.min.js?v=2.1.4"></script> <script src="/static/bootstrap/js/bootstrap.min.js"></script> </body> </html> ~~~ 訪問 www.phper.com/index/login 頁面效果如下： ![](https://box.kancloud.cn/2a62f211c2a71110d9300a69b3503b26_847x413.jpg) ## 數據庫的設計展示用戶登陸的頁面有了，那么我們現在來設計一下，存儲用戶信息的表。首先，我們通過 Navicat，新建一個數據庫 phper 并設計編碼為 UTF8，然后新建用戶表 users： ~~~ DROP TABLE IF EXISTS `users`; CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '用戶id', `user_name` varchar(155) NOT NULL COMMENT '用戶名', `user_pwd` varchar(50) NOT NULL COMMENT '用戶密碼', PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8; ~~~ 在數據庫中新建一條數據： ~~~ insert into users(`user_name`,`user_pwd`) value('admin','21232f297a57a5a743894a0e4a801fc3'); ~~~ 下面我們就可以用過這個 admin 進行后面的登錄了。密碼的明文是： admin.。然后我們配置一下 thinkphp5 的數據庫設置。在application 下面的 database.php 進行的配置： >[info] 配置這個數據庫文件，那么前臺模塊和后臺模塊都能用到這個數據庫配置。同樣，我們還可以在 admin 和 index 模塊下面的 database.php 進行配置，這樣可以單獨對 index 和 admin 模塊起作用。 ~~~ // 數據庫類型 'type' => 'mysql', // 服務器地址 'hostname' => '127.0.0.1', // 數據庫名 'database' => 'phper', // 用戶名 'username' => 'root', // 密碼 'password' => 'root', // 端口 'hostport' => '3306', ~~~ ## 登錄功能的具體實現我們在頁面設計的時候可以看到，我給 form 表單的提交地址填寫的地址是 login控制的 dologin。因此，我們在 Login.php 中新建 doLogin 方法： ~~~ // 處理登錄邏輯 public function doLogin() { $param = input('post.'); if(empty($param['user_name'])){ $this->error('用戶名不能為空'); } if(empty($param['user_pwd'])){ $this->error('密碼不能為空'); } // 驗證用戶名 $has = db('users')->where('user_name', $param['user_name'])->find(); if(empty($has)){ $this->error('用戶名密碼錯誤'); } // 驗證密碼 if($has['user_pwd'] != md5($param['user_pwd'])){ $this->error('用戶名密碼錯誤'); } // 記錄用戶登錄信息 cookie('user_id', $has['id'], 3600); // 一個小時有效期 cookie('user_name', $has['user_name'], 3600); $this->redirect(url('index/index')); } ~~~ 其中可以看到，登錄成功之后，跳轉到 index.php 的 index方法，下面我們設計一下 index.php 的 index 方法： ~~~ <?php namespace app\index\controller; class Index { public function index() { echo "您好： " . cookie('user_name') . ', <a href="' . url('login/loginout') . '">退出</a>'; } } ~~~ 可見：您好： admin, 退出 ## 退出功能的實現退出的設計邏輯，就是清除 cookie中的用戶登錄信息，跳轉到登錄頁面即可。Login.php 的 loginOut 方法： ~~~ // 退出登錄 public function loginOut() { cookie('user_id', null); cookie('user_name', null); $this->redirect(url('login/index')); } ~~~ ## 結語好了，到此一個簡單的登錄系統到此就完成了。當然，這個功能非常的簡單。從代碼中可見，我是通過 cookie 存儲登錄后的用戶信息的。因此，通過判斷 cookie 中是否有用戶id 或者用戶名就可以判斷用戶是否處于登錄狀態。我們可以通過這系統給的函數去判斷 cookie 中是否有指定的 key 值。 ~~~ Cookie::has('name'); ~~~ 雖然這個功能實現了，但是看起來很是簡陋，而且系統默認的錯誤提示很丑陋。下面的章節，我將對著部分功能進行美化。 >[danger] 此處我查詢數據庫采用的數據庫方法，當然，你也可以采用模型對數據庫進行操作。