1、頁面准備：
（1）前端資源的導入：將准備好的頁面添加到項目中，放到Public目錄下（公共的頁面樣式、js、圖片等資源）
（2）添加登錄的視圖模板
將登錄頁面的視圖放到Amin>View>Login>index.html中
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=""> <!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其后！ --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href=""> <title>新聞cms內容管理平台</title> <!-- Bootstrap core CSS --> <link href="/Public/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="signin.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <![endif]--> </head> <body> <style> .s_center { margin-left: auto; margin-right: auto; } </style> <div class="s_center container col-lg-6 "> <form class="form-signin" enctype="multipart/form-data" method="post"> <h2 class="form-signin-heading">請登錄</h2> <label class="sr-only">用戶名</label> <input type="text" class="form-control" name="username" placeholder="請填寫用戶名" required autofocus> <br /> <label class="sr-only">密碼</label> <input type="password" name="password" id="inputPassword" class="form-control" placeholder="密碼" required> <br /> <button class="btn btn-lg btn-primary btn-block" type="button" onclick="login.check()">登錄</button> </form> </div> <!-- /container --> <script src="/Public/js/jquery.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> </body> </html>
（3）添加登錄的控制器和方法
完成代碼實現：（文件位置：Admin>Controller>LoginController.class.php）
<?php namespace Admin\Controller; use Think\Controller; class LoginController extends Controller { public function index(){ $this->display(); //默認加載View>Login>index.html } }
（3）瀏覽器訪問
http://172.17.0.2/index.php?m=admin&c=login&a=index
（4）頁面顯示
2、數據庫准備
（1）數據庫恢復： >mysql : source /var/www/html/cms.sql
（2）數據庫配置：（位置：Common>Conf>config.php和db.php）
1)config.php配置 //允許加載其他配置文件，其文件名為（多個文件的文件名用逗號隔開） 'LOAD_EXT_CONFIG' => 'db' 2）db.php數據庫配置 <?php return array( 'DB_TYPE' => 'mysql', 'DB_HOST' => '127.0.0.1', //數據庫服務器主機ip地址 'DB_USER' => 'root', //數據庫用戶名 'DB_PWD' => '', //數據庫用戶密碼 'DB_PORT' => 3306, //數據庫端口號 'DB_NAME' => 'cms', //數據庫名 'DB_CHARSET' => 'utf8', //數據庫編碼 'DB_PREFIX' => 'cms_' //數據庫前綴名 );
2、layer插件
(1）layer插件准備：
官方下載地址: http://layer.layui.com
官方教程： www.layui.com/doc/modules/layer.html
layer插件包括extend目錄、skin目錄和layer.js文件
完整文件放到項目下的dialog目錄(位置: Public>js>dialog)
（2）插件二次封裝：
為便於在此項目中使用，再對項目需要的彈出層進行二次封裝，命名為dialog.js(位置：Public>js>dailog.js)
（3）常用彈出層：
1）錯誤彈出層
// 錯誤彈出層 error: function(message) { layer.open({ content:message, icon:2, title : '錯誤提示', }); },
2）成功彈出層
// 成功彈出層 success : function(message,url) { layer.open({ content : message, icon : 1, yes : function(){ location.href=url; }, }); },
3）確認彈出層
// 確認彈出層 confirm : function(message, url) { layer.open({ content : message, icon:3, btn : ['是','否'], yes : function(){ location.href=url; }, }); }
4）無須跳轉彈出層
//無需跳轉到指定頁面的確認彈出層 toconfirm : function(message) { layer.open({ content : message, icon:3, btn : ['確定'], }); }
（4）彈出層的調用：
1）引入本系統的類庫dialog.js文件 （在Amin>View>Login>index.html中引入）
<script src="/Public/js/dialog.js"></script>
2）引入第三方插件layer.js文件（在Amin>View>Login>index.html中引入）
<script src="/Public/js/dialog/layer.js"></script>
3）調用（js文件）
dialog.error("這是彈出的消息內容")；
3、數據校驗
(1)數據提交的兩種方式：
1）同步提交數據：頁面跳轉（體驗不好）
2）異步提交數據：通過js的ajax請求，頁面不跳轉，異步請求地址
(2)異步請求的實現：
1）jquery框架的ajax實現手冊 http://jquery.cuishifeng.cn/
2）$.ajax()、 $.get()、 $.post()三種方式的理解
(3)前端登錄的業務處理:
1）js校驗：(位置: Public>js>admin>login.js)
/** * 前端登錄業務類 */ var login = { check : function() { // 獲取登錄頁面中的用戶名 和 密碼 var username = $('input[name="username"]').val(); var password = $('input[name="password"]').val(); if(!username) { dialog.error('用戶名不能為空'); } if(!password) { dialog.error('密碼不能為空'); } var url = "/index.php?m=admin&c=login&a=check"; var data = {'username':username,'password':password}; // 執行異步請求 $.post $.post(url,data,function(result){ if(result.status == 0) { return dialog.error(result.message); } if(result.status == 1) { return dialog.success(result.message, '/index.php?m=admin&c=index'); } },'JSON'); } }
2）html表單觸發（Amin>View>Login>index.html文件）
<button class="btn btn-lg btn-primary btn-block" type="button" onclick="login.check()">登錄</button>
3)login.js文件引入（在Amin>View>Login>index.html中引入）
<script src="/Public/js/admin/login.js"></script>
3）瀏覽器運行效果
(4)后端php業務處理:
1)check方法的數據校驗：
$username = $_POST['username']; $password = $_POST['password']; if(!trim($username)) { return show(0,'用戶名不能為空'); } if(!trim($password)) { return show(0,'密碼不能為空'); }
前端的數據校驗是js實現的，其在瀏覽器中是可視的，用戶是可看到的，為避免用戶對修改js文件規避數據校驗,所以必須在服務器端再次校驗
show()公共方法的封裝：（多處地方要用到，所以作為公共函數封裝到Common/Common/function.php文件）
/**展示數據 * @param $status 狀態碼 * @param $message 展示的消息內容 * @param array $data */ function show($status, $message,$data=array()) { $result = array( 'status' => $status, 'message' => $message, 'data' => $data, ); exit(json_encode($result)); }
2）數據校驗通過的數據處理一-------用戶不存在（登錄失敗）（check方法）
$ret = D('Admin')->getAdminByUsername($username); //查詢admin表中是否存在該用戶 if(!$ret || $ret['status'] !=1) { return show(0,'該用戶不存在'); } if($ret['password'] != getMd5Password($password)) { return show(0,'密碼錯誤'); }
判斷用戶是否存在----操作數據庫查詢數據（Application/Common/Model/adminModel.class.php）
<?php namespace Common\Model; use Think\Model; class AdminModel extends Model { private $_db = ''; public function __construct() { $this->_db = M('admin'); //實例化admin表 } public function getAdminUsername($username) { $ret = $this->_db->where('username="'.$username.'"')->find(); return $ret; } }
對用戶輸入的密碼進行md5加密（Application/Common/Common/function.php）
function getMd5Password($password) { return md5($password . C('MD5_PRE')); // C('MD5_PRE')訪問配置文件中'MD5_PRE'配置項的設置值 }
注：直接md5加密也不是太安全，所以配置一個自定義的前綴，然后再進行md5加密，相對更安全
MD5_PRE配置（Application/Common/Conf/config.php）
'MD5_PRE' => 'my_cms',
3）數據校驗通過的數據處理二-------用戶存在（登錄成功）（check方法）
//將用戶信息保存到session中 session('adminUser', $ret); return show(1,'登錄成功');
(5)瀏覽器運行效果
4、退出登錄（利用session失效）
(1)設置訪問后台頁面時的session判斷
public function index() { if(session('adminUser')) { $this->redirect('/iindex.php?m=admin&c=index'); } $this->display(); //默認加載View>Login>index.html }
(2)后台首頁面退出登錄的請求
<li> <a href="/index.php?m=admin&c=login&a=logout"><i class="fa fa-fw fa-power-off"></i> 退出</a> </li>
(3)添加logout控制器方法處理退出登錄
public function logout() { session('adminUser', null); $this->redirect('/index.php?m=admin&c=login&a=index'); }
退出成功后自動跳轉到后台登錄頁面。
后台登錄功能完成！