新聞cms管理系統(二) ---- 後臺登陸功能

時間  2020-05-29
標籤 cms 管理 系統 後臺 登陸 功能 欄目 CMS 简体版
原文   原文鏈接

一、頁面準備：php

（1）前端資源的導入：將準備好的頁面添加到項目中，放到Public目錄下（公共的頁面樣式、js、圖片等資源）css

（2）添加登陸的視圖模板html

　　將登陸頁面的視圖放到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）添加登陸的控制器和方法mysql

　　完成代碼實現：（文件位置：Admin>Controller>LoginController.class.php）jquery

<?php namespace Admin\Controller; use Think\Controller; class LoginController extends Controller { public function index(){ $this->display();  //默認加載View>Login>index.html
 } }

 

（3）瀏覽器訪問ajax

　　http://172.17.0.2/index.php?m=admin&c=login&a=indexsql

（4）頁面顯示數據庫

二、數據庫準備json

（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_'   //數據庫前綴名
 );

 

二、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("這是彈出的消息內容")；

 

 

三、數據校驗

(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)瀏覽器運行效果

四、退出登陸（利用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'); }

 

 退出成功後自動跳轉到後臺登陸頁面。

 

後臺登陸功能完成！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程