前面一節我們已經成功搭建ssm項目的環境，接下來我們需要做的就是搭建我們後臺管理界面的框架。
這搭建完之後的效果圖
基於easy UI搭建後臺界面
jQuery EasyUI是一組基於jQuery的UI插件集合體，而jQuery EasyUI的目標就是幫助web開發者更輕鬆的打造出功能豐富並且美觀的UI界面。開發者不需要編寫複雜的JavaScript，也不需要對css樣式有深入的瞭解，開發者需要了解的只有一些簡單的html標籤。（EasyUI下載地址）
1、導入easy UI相關組件
首先我們在項目的webapp目錄下新建一個static文件夾，這個文件夾主要存在我們的一個靜態資源文件(js,css等),然後我們在官網下載好easy ui後將下載的文件夾複製到static文件夾下。
結果如圖
2、搭建easyUI的環境
2.1、抽取公共模塊
1、在webapp界面下面新建admin文件夾，這個文件夾主要存放我們後臺管理的jsp文件，然後在admin界面下面新建common文件，此文件夾主要存放後臺管理jsp文件中的一些公共模塊，比如現在的easyUI的環境
2、在common文件夾中新建head.jspf文件。
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath }" var="blog" />
<!-- 下面是easyui的環境 -->
<link rel="stylesheet" href="${blog }/static/jquery-easyui-1.3.5/themes/icon.css" type="text/css"></link>
<link rel="stylesheet" href="${blog }/static/jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css"></link>
<script type="text/javascript" src="${blog}/static/jquery-easyui-1.3.5/jquery.min.js"></script>
<script type="text/javascript" src="${blog}/static/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${blog}/static/jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js"></script>其中我們使用了jstl核心標記庫 中的set指令使用簡化代碼 然後引入了easyUI所需的js css文件
2.2搭建後臺框架
從效果圖我們可以看出來整個界面分爲四個部分分別是 上下左右四個部分 現在我們通過easyui實現這個效果
1、打開easyui API搜索 layout
其中region代表位置 除去不要部分就得到了
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>個人博客後臺管理</title>
<%@include file="../common/head.jspf" %>
<style type="text/css">
body {
font-family: microsoft yahei;
}
</style>
</head>
<body class="easyui-layout">
<div region="north" style="height: 78px; background-color: #E0ECFF">
</div>
<div region="west" style="width: 200px" title="導航菜單" split="true">
</div>
<div data-options="region:'center'" style="background:#eee;">
</div>
<div region="south" style="height: 25px;padding: 5px" align="center">
</div>
</body>
</html>結果如圖
2、打開easyUI API搜索Accordion
我們分類選項實在west中的 所以在west中添加圖中代碼
<div id="aa" class="easyui-accordion" style="width:300px;height:200px;">
<div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery.
It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">
content2
</div>
<div title="Title3">
content3
</div>
</div> 3、打開easyUI API搜索tabs
由效果看出 我們的tabs是放在center中的
所以在center中添加如圖代碼
<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">
<div title="Tab1" style="padding:20px;display:none;">
tab1
</div>
<div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">
tab2
</div>
<div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">
tab3
</div>
</div>
3、具體效果實現
1、這樣整個框架已經出來了 接下面我們就完成west中的分類選項卡
我們在west插入如下代碼
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="常用操作" data-options="selected:true,iconCls:'icon-item'" style="padding: 10px">
<a href="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">寫博客</a>
<a href="#" 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="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px;">寫博客</a>
<a href="#" 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="#" 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="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-review'" style="width: 150px">評論審覈</a>
<a href="#" 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="#" 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="#" 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>
</div>其中icoCls中的icon我們自定義的icon所以大家可能會出現沒有圖標的現象，大家不要着急easyUI怎麼設置自定義icon請看我另一篇博客
easyUI自定義icon
2、center歡迎界面
<div class="easyui-tabs" fit="true" border="false" id="tabs">
<div title="首頁" data-options="iconCls:'icon-home'">
<div align="center" style="padding-top: 100px"><font color="red" size="10">歡迎使用</font></div>
</div>
</div>3、north south處理
north
<table style="padding: 5px" width="100%">
<tr>
<td width="50%">
<h2>博客後臺系統</h2>
</td>
<td valign="bottom" align="right" width="50%">
<font size="3"> <strong>歡迎：</strong>admin</font>
</td>
</tr>south
div region="south" style="height: 25px;padding: 5px" align="center">
Copyright © 2012-2017 熊平的SSM博客系統 版權所有
</div>現在重新發布一下項目運行一下就可以得到效果圖那樣了
最後特別感謝倪升武大神