ssm个人博客开发（三）左侧导航菜单功能实现

前言

作者介绍：

作者：逍遥Sean
简介：一个主修Java的Web网站\游戏服务器后端开发者

文章介绍：
SSM框架是指Spring+SpringMVC+Mybatis的组合框架。它是一种轻量级的、基于MVC架构的、开源框架。其中，Spring是负责IoC和AOP的容器框架、SpringMVC是基于Spring框架的MVC框架、Mybatis是一款优秀的ORM（对象关系映射）框架。这三者结合使用可以实现前后端分离、实现JavaEE应用程序的快速开发，提高开发效率。SSM框架具有高可扩展性、低耦合性、易于维护和测试等优点，在企业级应用中得到了广泛应用。
前面两节我们已经成功搭建ssm项目的环境、使用EasyUI搭建我们后台管理界面的框架。本节开始开发内容。

先说一下具体的功能就是当我们点击左侧菜单选项时，右侧主界面会显示对应的内容。

功能示意图
也就是说每当我们点击左侧导航菜单就等于打开了一个新的页面只不过它是选项卡的形式显示在center中。

打开easyUI API手册搜索 tabs

1.添加选项卡

由于每一个菜单选项单击一下都会打开一个tab 所以我们可以把这个抽出来作为一个方法

       /**
         * 打开选项卡
         * @param text  选项卡标题
         * @param url   请求打开路径
         * @param icon  选项卡图标
         */
        function openTab(text,url,icon) {
            //判断当前选项卡是否存在
            if($('#tabs').tabs('exists',text)){
                //如果存在 显示
                $("#tabs").tabs("select",text);
            }else{
                //如果不存在 则新建一个
                $("#tabs").tabs('add',{
                    title:text,
                    closable:true,      //是否允许选项卡摺叠。
                    iconCls:icon,    //显示图标
                    content:"<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='${blog}/admin/"+url+"'></iframe>"
                    //url 远程加载所打开的url
                })
            }
        }

2.接下来我们给每一个菜单选项注册这个单击事件

<div title="常用操作" data-options="selected:true,iconCls:'icon-item'" style="padding: 10px">
            <a href="javascript:openTab('写博客','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">写博客</a>
            <a href="javascript:openTab('评论审核','commentReview.jsp','icon-review')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a>
        </div>
        <div title="博客管理" data-options="iconCls:'icon-bkgl'" style="padding:10px;">
            <a href="javascript:openTab('写博客','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px;">写博客</a>
            <a href="javascript:openTab('博客信息管理','blogManage.jsp','icon-bkgl')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-bkgl'" style="width: 150px;">博客信息管理</a>
        </div>
        <div title="博客类别管理" data-options="iconCls:'icon-bklb'" style="padding:10px">
            <a href="javascript:openTab('博客类别信息管理','blogTypeManage.jsp','icon-bklb')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-bklb'" style="width: 150px;">博客类别信息管理</a>
        </div>
        <div title="评论管理" data-options="iconCls:'icon-plgl'" style="padding:10px">
            <a href="javascript:openTab('评论审核','commentReview.jsp','icon-review')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-review'" style="width: 150px">评论审核</a>
            <a href="javascript:openTab('评论信息管理','commentManage.jsp','icon-plgl')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-plgl'" style="width: 150px;">评论信息管理</a>
        </div>
        <div title="个人信息管理" data-options="iconCls:'icon-grxx'" style="padding:10px">
            <a href="javascript:openTab('修改个人信息','modifyInfo.jsp','icon-grxxxg')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-grxxxg'" style="width: 150px;">修改个人信息</a>
        </div>
        <div title="系统管理" data-options="iconCls:'icon-system'" style="padding:10px">
            <a href="javascript:openTab('友情链接管理','linkManage.jsp','icon-link')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-link'" style="width: 150px">友情链接管理</a>
            <a href="#" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-modifyPassword'" style="width: 150px;">修改密码</a>
            <a href="# class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-refresh'" style="width: 150px;">刷新系统缓存</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-exit'"
               style="width: 150px;">安全退出</a>
        </div>

这样我们就完成了左侧菜单功能的实现。
在下一篇博客我会讲解如果通过mybatis实现博客类别的分页实现以及easyUI datagrid使用

3.easyUI是什么怎么用

easyUI是一个基于jQuery的UI组件库，它提供了丰富的UI组件，如表格、表单、对话框、菜单、布局等，帮助开发者快速构建出美观、易用的Web应用程序。

使用easyUI需要先引入jQuery库和easyUI库，可以通过以下代码进行引入：

<link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.8/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.8/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.8.8/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.8.8/jquery.easyui.min.js"></script>

接下来可以通过调用easyUI提供的组件来构建页面，例如：

<div class="easyui-datagrid" 
    data-options="
        url: 'datagrid_data.json',
        method: 'get',
        fitColumns: true,
        singleSelect: true,
        rownumbers: true,
        pagination: true,
        columns: [[
            {field:'name',title:'Name',width:80},
            {field:'gender',title:'Gender',width:80},
            {field:'address',title:'Address',width:150},
            {field:'email',title:'Email',width:150},
            {field:'phone',title:'Phone',width:120}
        ]]
    ">
</div>

上述代码定义了一个easyUI的DataGrid组件，用于展示从datagrid_data.json加载的数据。其中data-options是该组件的配置选项，包括了表格的列数、标题、数据源等信息。

当然，easyUI还提供了许多其他的组件，详见官方文档：http://www.jeasyui.net/documentation/index.php。
————————————————
版权声明：本文为CSDN博主「余空~」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xp541130126/article/details/70174913