新聞cms管理系統(三) ------菜單管理

 

1、前期准備工作

（1）模板介紹

添加菜單的模板頁面

 菜單管理首頁：

添加菜單頁面：

 

（2）公共類引入介紹

公共函數文件的引入（位置： Application/Admin/Controller/CommonController.class.php）

1）獲取登錄用戶信息

    public function getLoginUser() {
        return session("adminUser");
    }

2）判斷是否登錄

    public function isLogin() {
        $user = $this->getLoginUser();
        if($user && is_array($user)) {
            return true;
        }

        return false;
    }

3）初始化驗證用戶登錄並處理

    private function _init() {
        // 如果已經登錄
        $isLogin = $this->isLogin();
        if(!$isLogin) {
            // 跳轉到登錄頁面
            $this->redirect('/admin.php?c=login');
        }
        return ;
    }

 

2、菜單添加

（1）菜單管理首頁面添加功能的觸發

1）菜單管理首頁模板頁面處理

 <div>
   <button id="button-add" type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>添加 </button>
</div>

2）添加按鈕的url設置（全局）

<script>
    var SCOPE = {
        'add_url' : '/admin.php?c=menu&a=add'
    }
</script>

3）js點擊事件處理頁面跳轉（位置：Public/js/admin/common.js）

菜單添加、文章添加等添加功能的實現方式相同，為提升代碼復用性，可通過公共文件

$("#button-add").click(function(){
    var url = SCOPE.add_url;
    window.location.href=url;
});

4）將js文件引入到當前項目中（位置：Application/Admin/View/Index/footer.html）

<script src="/Public/js/admin/common.js"></script>

（2）JS獲取表單提交的數據

1）添加模板的頁面處理（form表單）

2）保存提交數據的url、數據保存成功的自動跳轉url設置（全局）

<script> var SCOPE = {
　　　　'save_url' : '/admin.php?c=menu&a=add'， //數據提交url
       'jump_url' : '/admin.php?c=menu'  //菜單添加成功跳轉url
   } 
</script>

 3）數據請求的觸發及處理的邏輯

$("#cms-button-submit").click(function(){
　　// 獲取表單數據並序列化 var data = $("#cms-form").serializeArray();
    postData = {};
   // 遍歷表單數據，並將鍵名和鍵值一一對應的保存到postData中
    $(data).each(function(i){
       postData[this.name] = this.value;
    });
    // 將獲取到的數據post給服務器（ajax異步請求）
    url = SCOPE.save_url;
    jump_url = SCOPE.jump_url;
    $.post(url,postData,function(result){
        if(result.status == 1) {
            //成功並跳轉
            return dialog.success(result.message,jump_url);
        }else if(result.status == 0) {
            // 失敗
            return dialog.error(result.message);
        }
    },"JSON");
});

（3）PHP處理數據交互

1)$_POST接收提交數據(Application/Admin/Controller/MenuController.class.php)

    public function add()
    {
        if ($_POST) {
            print_r($_POST); //測試打印表單提交過來的數據
        }
        $this->display();
    }

2）瀏覽器驗證

3）校驗表單提交數據

if(!isset($_POST['name']) || !$_POST['name']) {
    return show(0,'菜單名不能為空');
}
if(!isset($_POST['m']) || !$_POST['m']) {
    return show(0,'模塊名不能為空');
}
if(!isset($_POST['c']) || !$_POST['c']) {
    return show(0,'控制器不能為空');
}
if(!isset($_POST['f']) || !$_POST['f']) {
    return show(0,'方法名不能為空');
}

 4)校驗通過后將數據插入到menu數據表中（模型層操作數據庫）

（位置：Application/Common/Model/MenuModel.class.php）

public function insert($data = array()) 
{
    if (!$data || !is_array($data)) {
        return 0;
    }
    return $this->_db->add($data);
}

 5）執行添加菜單，提示成功

6）查看數據庫中菜單記錄

select * from cms_menu;

菜單添加成功！

 

 3、菜單列表

(1）添加條件搜索功能

1）模板添加搜索框

<!--搜索表單-->
<div class="row">
    <form action="/admin.php" method="get">
        <div class="input-group">
            <span class="input-group-addon">類型</span>
            <select class="form-control" name="type" >
                <option value='' >請選擇類型</option>
                <option value="1">后台菜單</option>
                <option value="0">前端導航</option>
            </select>   
            <input type="hidden" name="c" value="menu"/>
            <input type="hidden" name="a" value="index"/>
            <span class="input-group-btn">
                <button id="sub_data" type="submit" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
            </span>
        </div>
    </form>
</div>

2）通過下拉菜單選擇的選項的type值，添加查詢條件（index方法）

if (isset($_REQUEST['type']) && in_array($_REQUEST['type'], array(0,1))) {
    $data['type'] = intval($_REQUEST['type']);
}

3）點擊搜索顯示后，保持下拉菜單選擇狀態（默認會恢復到未選擇）

1.將搜索的篩選條件傳入模板中
if (isset($_REQUEST['type']) && in_array($_REQUEST['type'], array(0,1))) {
    $data['type'] = intval($_REQUEST['type']);
    $this->assign('type', $data['type']);
}else{
    $this->assign('type', -1);
}

2.通過對$data['type']的值進行判斷，設置相應的選項為選中狀態
<select class="form-control" name="type" >
    <option value='' >請選擇類型</option>

    <option value="1" <if condition="$type eq 1">selected="selected"</if>>后台菜單</option>
    <option value="0" <if condition="$type eq 0">selected="selected"</if>>前端導航</option>
</select>  

4）效果

 

（2）獲取菜單列表

1）根據頁碼獲取當前頁菜單記錄（標記為未刪除）（通過菜單模型Application/Common/Model/MenuModel.class.php）

public function getMenus($data,$page,$pageSize=10)
{
　　// 獲取未被刪除的數據（用status標記記錄時候被刪除）
    $data['status'] array('neq', -1);
    $offset = ($page-1) * $pageSize;
    $list = $this->_db->where($data)->order('menu_id desc')->limit($offset,$pageSize)->select();
　　return $list;
} 

2）獲取所有菜單記錄條數（標記為未刪除）（通過菜單模型Application/Common/Model/MenuModel.class.php）

public function getMenusCount($data = array())
{
    $data['status'] = array('neq', -1);
    $menuCount = $this->_db->where($data)->count();
    return $list;
}

 

(3)菜單分頁功能

1）分頁參數設置

2）調用ThinkPHP框架自帶的分頁類進行分頁處理

$res = new \Think\Page($menusCount, $pageSize);
$pageRes = $res->show(); 

框架分頁類所在位置如下：ThinkPHP/Library/Think/Page.class.php

3）使用模板引擎，將獲取到的數據顯示到頁面（Application/Admin/Controller/MenuController.class.php）

$this->assign('pageRes', $pageRes);
$this->assign('menus', $menus);

4）模板中使用參數顯示相應數據（ThinkPHP自帶的模板引擎）

<volist name="menus" id="menu">
    <tr>
        <td>{$menu.menu_id}</td>
        <td>{$menu.name}</td>
        <td>{$menu.m}</td>
        <td>{$menu.type}</td>
        <td>{$menu.status}</td>
        <td><span class="glyphicon glyphicon-edit" aria-hidden="true" id="cms-edit" attr-id="{$menu.menu_id}"></span>  &nbsp;&nbsp;<a href="javascript:void(0)" attr-id="{$menu.menu_id}" id="cms-delete"  attr-a="menu" attr-message="刪除"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span></a></td>
    </tr>
</volist> 

 （設置每頁顯示記錄數為3）

 

5）添加分頁導航條

<nav>
    <ul class="pagination">
        {$pageRes}
    </ul>
</nav>

默認顯示的樣式如下：

首頁：                                                                                                                                           末頁：

 6）對顯示的菜單列表狀態和類型進行處理，使更直觀

<td>{$menu.type|getMenuType}</td>
<td>{$menu.status|getMenuStatus}</td>

 添加公共函數（位置：Application/Common/Common/function.php）

function getMenuType($type=''){
    return $type == 1 ? "后台菜單" : "前端導航";
}

function getMenuStatus($status=''){
    if ($status == 0) {
        $str = "關閉";
    }elseif ($status == 1) {
        $str = "正常";
    }elseif ($status == -1) {
        $stt = "刪除";
    }

    return $str;
}

以文字形式顯示：

 

 

4、菜單修改

（1）修改模板添加

1）添加控制器中的edit方法和edit視圖模板

public function edit($data) {
    $this->display();
}

 

2）通過菜單顯示頁面編輯功能設置鏈接，添加傳遞參數menu_id，通過該id獲取該條記錄的具體信息，並顯示到相應位置

1.edit.html定義url
<script>
    var SCOPE = {
        'edit_url' : '/admin.php?c=menu&a=edit'
    }
</script>

2.common.js文件設置url跳轉
$('.cms-table #cms-edit').on('click',function(){
    var id = $(this).attr('attr-id');
    url = SCOPE.edit_url + '&id='+id;
    window.location.href=url;
});

 

3）通過url傳遞的id值獲取該條記錄

public function getMenuById($id)
{
　　 if(!$id || !is_numeric($id) {
         return array();
    }
    return $this->_db->where("menu_id=".$id)->find();
}

 

 

4）控制器實現功能

public function edit() {
    $id = $_GET['id'];
    $menuInfo = D('Menu')->getMenuById($id);

    $this->assign('menuInfo', $menuInfo);
    $this->display();
}

 

5）通過模板引擎將數據分配到編輯菜單表單的相應位置

6）實現修改處理並保存修改到數據庫

1.設置修改提交的url和處理完成后自動跳轉的url

<script>
    var SCOPE = {
        save_url' : '/admin.php?c=menu&a=add',
        'jump_url' : '/admin.php?c=menu'
     } 
</script>

2.add方法的條件判斷
if ($_POST['menu_id']) {
　　// 轉到save方法處理更新 return $this->save($_POST);
}
//修改操作添加該條記錄的menu_id, 創建數據時沒有該數據項

3.save()處理更新
public function save($data) {
    $menuId = $data['menu_id'];
    unset($data['menu_id']);

    try {
        $id = D('Menu')->updateMenuById($menuId, $data);
     
        if ($id === false) {
            return show(0,"更新失敗");
        }

        return show(1,"更新成功");
    }catch (Exception $e) {
        return show(0,$e->getMessage());
    }
}

4.菜單模板將數據更新到數據庫
public function updateMenuById($id, $data)
{
    if (!$id || !is_numeric($id)) {
        throw_exception('ID不合法！');
    }
    if (!$data || !is_array($data)) {
        throw_exception('更新的數據不合法！');
    }
    return $this->_db->where("menu_id=".$id)->save($data);
}

 7）查看效果

新建一條記錄，將其菜單名修改為666

修改成功

自動跳轉到菜單首頁

 

 5、菜單刪除

菜單刪除是通過status進行狀態標記，進行邏輯上的刪除，而並非實際性的刪除

（1）刪除的js彈出提示

點擊刪除icon

 彈出提示窗口

1）設置刪除處理的url

'set_status_url' : '/admin.php?c=menu&a=setStatus'

 

2）js邏輯

$('.cms-table #singcms-delete').on('click',function(){
    var id = $(this).attr('attr-id');
    var a = $(this).attr("attr-a");
    var message = $(this).attr("attr-message");
    var url = SCOPE.set_status_url;

    data = {};
    data['menu_id'] = id;
    data['status'] = -1;

    layer.open({
        type : 0,
        title : '是否提交？',
        btn: ['確定', '取消'],
        icon : 3,
        closeBtn : 2,
        content: "是否確定"+message,
        scrollbar: true,
        yes: function(){
            // 執行相關跳轉
            todelete(url, data);
        }
    });
});

// 確認刪除后執行ajax請求 function todelete(url, data) {
    $.post(
        url,
        data,
        function(s){
            if(s.status == 1) {
                return dialog.success(s.message,'');
                // 跳轉到相關頁面
            }else {
                return dialog.error(s.message);
            }
        }
    ,"JSON");
}

 

 3）ajax請求的后台處理

public function setStatus() {
    try {
        if ($_POST) {
            $id = $_POST['menu_id'];
            $status = $_POST['status'];
            $res = D('Menu')->setMenuStatus($id, $status);
            if ($res) {
                return show(1, "刪除成功");
            }
        }
    }catch (Exception $e) {
        return show(0, $e->getMessage());
    }
    return show(0,'沒有提交數據,刪除失敗');

}

 

 4）菜單模塊操作數據庫更新狀態

public function setMenuStatus($id, $status)
{
    if (!$id || !is_numeric($id)) {
        throw_exception('ID不合法！');
    }
    if (!$status || !is_numeric($status)) {
        throw_exception('狀態不合法！');
    }
    
    $data['status'] = $status;
    return $this->_db->where("menu_id=".$id)->save($data);
}

 

 5）實現效果（刪除成功，並自動跳轉）