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

最新推荐文章于 2023-04-05 13:15:44 发布

cherish_lailai

最新推荐文章于 2023-04-05 13:15:44 发布

阅读量2.1k

点赞数

分类专栏：博客系统文章标签：框架博客 easyui ssm javaweb项目

本文链接：https://blog.csdn.net/lys1695227550/article/details/78136936

版权

博客系统专栏收录该内容

11 篇文章 1 订阅

订阅专栏

使用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的其他页面的编辑，例如添加页面，展示页面......