使用easyui進行前端頁面的開發，使得開發人員不需要編寫複雜的JavaScript代碼，以及各種調試css樣式，隻需懂得一些html标簽的使用，根據easyui的api進行開發。
我先貼上我在這篇部落格中要設計的壓面：
下面進行一步步的制作，顯示引入easyui的包，自行下載下傳，在項目中引入這些資源檔案
編輯一個支援easyui環境的jspf檔案
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css" target="_blank" rel="external nofollow" >
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
使用easyui的ap，看到下圖，不用我說，大家都會使用得。
最後說一下預覽圖圖示的事，圖示我使用的是easyui自帶的。自己要改的話百度，很容易的，就是添加圖示的檔案，編輯引入圖示的.css檔案......
easyui這種東西，你可以百度，很多人都有使用easyui做背景系統頁面，選擇性的複制過來就行了。最後貼上代碼：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>背景管理首頁</title>
<%@include file="../common/head.jspf"%>
</head>
<body class="easyui-layout">
<div region="north" style="height: 80px; background-color: #377aab;">
<table style="padding: 5px" width="100%">
<tr>
<td>
<h1>部落格背景系統</h1>
</td>
<td valign="bottom" align="right"><font size="5"><strong>歡迎：</strong>lailai
</font></td>
</tr>
</table>
</div>
<div region="west" style="width: 250px" title="功能菜單" split="true">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="常用操作" data-options="selected:true,iconCls:'icon-ok'"
style="padding: 10px">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-edit'" style="width: 150px">寫部落格</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-tip'" style="width: 150px">部落格管理</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-tip'" style="width: 150px;">部落格類别管理</a>
</div>
<div title="部落格類别管理" data-options="iconCls:'icon-ok'"
style="padding: 10px">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-tip'" style="width: 150px;">部落格類别管理</a>
</div>
<div title="個人資訊管理" data-options="iconCls:'icon-ok'"
style="padding: 10px">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-mini-edit'"
style="width: 150px;">修改個人資訊</a> <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow"
class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-mini-edit'"
style="width: 150px;">修改密碼</a>
</div>
<div title="部落格管理" data-options="iconCls:'icon-ok'"
style="padding: 10px;">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-edit'" style="width: 150px;">寫部落格</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-tip'" style="width: 150px;">部落格資訊管理</a>
</div>
<div title="評論管理" data-options="iconCls:'icon-ok'"
style="padding: 10px">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-ok'" style="width: 150px">評論稽核</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-tip'" style="width: 150px;">評論資訊管理</a>
</div>
<div title="系統管理" data-options="iconCls:'icon-ok'"
style="padding: 10px">
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-tip'" style="width: 150px">友情連結管理</a>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-reload'"
style="width: 150px;">重新整理系統緩存</a> <a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow"
class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-cancel'"
style="width: 150px;">安全退出</a>
</div>
</div>
</div>
<div data-options="region:'center'" style="background: #4a6c85;">
<div class="easyui-tabs" fit="true" id="tabs">
<div title="首頁" data-options="iconCls:'icon-home'">
<div align="center" style="padding-top: 300px">
<font color="#94c2e3" size="10">歡迎進入天天部落格</font>
</div>
</div>
</div>
</div>
<div region="south"
style="height: 30px; padding: 5px; background-color: #377aab;"
align="center">
<div>
<strong>© CopyRight 2017-XXX cherish_lailai
的部落格系統 版權所有</strong>
</div>
</div>
</body>
</html>
寫到這裡，停頓一下，希望對easyui還不是很熟悉的朋友可以參考一下，這個easyui都被大家給用爛了，都是互相借鑒，網上很多資料，我借鑒的那位朋友還自己搞了圖示。最後希望這篇部落格對讀者有幫助吧！
彩蛋：easyui的其他頁面的編輯，例如添加頁面，展示頁面......