新闻cms管理系统(三) ------菜单管理

时间:2022-09-19 15:47:36

 

1、前期准备工作

(1)模板介绍

添加菜单的模板页面

新闻cms管理系统(三) ------菜单管理

 菜单管理首页:新闻cms管理系统(三) ------菜单管理

添加菜单页面:

新闻cms管理系统(三) ------菜单管理

 

(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)浏览器验证

新闻cms管理系统(三) ------菜单管理

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)执行添加菜单,提示成功

新闻cms管理系统(三) ------菜单管理

6)查看数据库中菜单记录

select * from cms_menu;

新闻cms管理系统(三) ------菜单管理

菜单添加成功!

 

 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>

新闻cms管理系统(三) ------菜单管理

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)效果

新闻cms管理系统(三) ------菜单管理

 

(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

新闻cms管理系统(三) ------菜单管理

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)

 新闻cms管理系统(三) ------菜单管理

5)添加分页导航条

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

默认显示的样式如下:

首页:                                                                                                                                           末页:

新闻cms管理系统(三) ------菜单管理新闻cms管理系统(三) ------菜单管理

 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;
}

以文字形式显示:

新闻cms管理系统(三) ------菜单管理

 

 

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)通过模板引擎将数据分配到编辑菜单表单的相应位置

新闻cms管理系统(三) ------菜单管理

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

新闻cms管理系统(三) ------菜单管理

修改成功

新闻cms管理系统(三) ------菜单管理

自动跳转到菜单首页

新闻cms管理系统(三) ------菜单管理

 

 5、菜单删除

菜单删除是通过status进行状态标记,进行逻辑上的删除,而并非实际性的删除

(1)删除的js弹出提示

点击删除icon

新闻cms管理系统(三) ------菜单管理

 弹出提示窗口

新闻cms管理系统(三) ------菜单管理

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)实现效果(删除成功,并自动跳转)

新闻cms管理系统(三) ------菜单管理