您的位置：首页 > 产品设计 > UI/UE

基于ssm框架的个人博客（3）--easyui后台管理页面设计

2017-09-29 20:00 876 查看

使用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">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
<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="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-edit'" style="width: 150px">写博客</a>
<a href="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-tip'" style="width: 150px">博客管理</a>
<a href="#" 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="#" 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="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-mini-edit'"
style="width: 150px;">修改个人信息</a> <a href="#"
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="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-edit'" style="width: 150px;">写博客</a>
<a href="#" 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="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-ok'" style="width: 150px">评论审核</a>
<a href="#" 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="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-tip'" style="width: 150px">友情链接管理</a>

<a href="#" class="easyui-linkbutton"
data-options="plain:true,iconCls:'icon-reload'"
style="width: 150px;">刷新系统缓存</a> <a href="#"
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" border="false" 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的其他页面的编辑，例如添加页面，展示页面......

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航