文档章节

【ssm个人博客项目实战02】easy UI搭建后台管理界面

YuKongA
 YuKongA
发布于 2017/05/16 09:17
字数 1453
阅读 122
收藏 1
点赞 0
评论 1

前面一节我们已经成功搭建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


easyUI布局


其中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


easyUI 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>

现在重新发布一下项目运行一下就可以得到效果图那样了


这里写图片描述

最后特别感谢倪升武大神

© 著作权归作者所有

共有 人打赏支持
YuKongA
粉丝 6
博文 10
码字总数 15504
作品 0
加载中

评论(1)

Xenihack
Xenihack
打开easyui API搜索 layout?是什么意思
ZHENFENGSHISAN/perfect-ssm

Quick Start 项目简介 ssm系列 ssm-demo:Spring+SpringMVC+Mybatis+easyUI整合 perfect-ssm:RESTful API+redis缓存 ssm-cluster:前后端分离+集群部署 ssm-dubbo:dubbo服务化 ssm-micro-se......

ZHENFENGSHISAN
2017/09/18
0
0
Java实现个人博客网站

说明:该项目是实验楼用户“LOU3165780622”发布在实验楼上的项目教程:【Java实现个人博客】,未经允许,禁止转载; 该项目利用 SSM 框架和 Mysql 以及一些简单的前端知识搭建一个自己的个人...

实验楼
2017/12/12
0
0
基于SpringBoot构建个人博客

最近心血来潮,想与大家分享一下SpringBoot应用实战,以一个简单的博客项目来带领大家使用SpringBoot,让大家体会SpringBoot的简单。 本系列视频总共分为8节,会手把手教大家写一个博客系统,...

水门_
2017/12/18
0
0
仿虎扑应用EasySport连带上后台代码

EasySports 声明 本项目部分API来自NBA中文官网与虎扑体育,纯练手之作,个人未从中获取任何利益,其所有内容均可在NBA中文官网与虎扑体育获取。 数据的获取与共享可能会侵犯到NBA中文官网与...

Rayhaha
01/05
0
0
使用 django-blog-zinnia 搭建个人博客

django-blog-zinnia 虽然小巧,但是具备了个人博客应用的全部基础功能,且具有很高的拓展性,并且开箱即用。以下是官方列出的一些特性: 评论 站点地图(用于搜索引擎优化) 文章归档视图(自...

大数据之路
2012/08/21
0
1
sbc(一)SpringBoot+SpringCloud初探

前言 有看过我之前的SSM系列的朋友应该有一点印象是非常深刻的。 那就是需要配置的配置文件非常多,什么、、、之类的配置文件非常多,并且还存在各种版本,甚至有些版本还互不兼容。其中有很...

crossoverJie
2017/06/27
0
0
IDEA使用MAVEN搭建SSM(IDEA+Maven+Spring+Spring MVC+Mybatis)

前几天安装了一个IDEA,之前一直使用是Eclipse和MyEclipse,IDEA我才刚用几天,感觉确实挺好用的。网上评论说IDEA在代码的提示方面比eclipse更加优秀。我也是有感觉的,因为本人目前是.net开...

The_flying_pig
2017/11/23
0
0
121 基于MVC框架下的网上书店系统 001 项目展望

要完成的功能   之前写的在线书店,其实是我用20天写出来的,完成的功能只有个人中心、下单、用户管理等简单的功能此次重启这个项目会尽量模仿当当在线书店,界面可能不会做的那么好看,但...

小代码2016
2016/09/08
66
2
Eova 1.2 正式版,Java Web 快速开发平台

Eova的能量,超乎你的想象,你的思想有多远,Eova就能陪你走多远! --------------------------------------------------------------- [新增]Eova演示功能 [新增]Grid右键导出所有数据为Exc...

Jieven
2015/06/10
11.7K
48
Exrick/xmall-front

XMall-Front 基于Vue开发的XMall商城前台页面 项目已部署,在线Demo 前台商城:http://xmall.exrick.cn/ 后台管理系统:http://xmadmin.exrick.cn/ 感谢 yucccc 的开源 vue-mall 项目提供前端...

Exrick
04/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

SpringBoot | 第十章:Swagger2的集成和使用

前言 前一章节介绍了mybatisPlus的集成和简单使用,本章节开始接着上一章节的用户表,进行Swagger2的集成。现在都奉行前后端分离开发和微服务大行其道,分微服务及前后端分离后,前后端开发的...

oKong
今天
9
0
Python 最小二乘法 拟合 二次曲线

Python 二次拟合 随机生成数据,并且加上噪声干扰 构造需要拟合的函数形式,使用最小二乘法进行拟合 输出拟合后的参数 将拟合后的函数与原始数据绘图后进行对比 import numpy as npimport...

阿豪boy
今天
4
0
云拿 无人便利店

附近(上海市-航南路)开了家无人便利店.特意进去体验了一下.下面把自己看到的跟大家分享下. 经得现场工作人员同意后拍了几张照片.从外面看是这样.店门口的指导里强调:不要一次扫码多个人进入....

周翔
昨天
1
0
Java设计模式学习之工厂模式

在Java(或者叫做面向对象语言)的世界中,工厂模式被广泛应用于项目中,也许你并没有听说过,不过也许你已经在使用了。 简单来说,工厂模式的出现源于增加程序序的可扩展性,降低耦合度。之...

路小磊
昨天
176
1
npm profile 新功能介绍

转载地址 npm profile 新功能介绍 npm新版本新推来一个功能,npm profile,这个可以更改自己简介信息的命令,以后可以不用去登录网站来修改自己的简介了 具体的这个功能的支持大概是在6这个版...

durban
昨天
1
0
Serial2Ethernet Bi-redirection

Serial Tool Serial Tool is a utility for developing serial communications, custom protocols or device testing. You can set up bytes to send accordingly to your protocol and save......

zungyiu
昨天
1
0
python里求解物理学上的双弹簧质能系统

物理的模型如下: 在这个系统里有两个物体,它们的质量分别是m1和m2,被两个弹簧连接在一起,伸缩系统为k1和k2,左端固定。假定没有外力时,两个弹簧的长度为L1和L2。 由于两物体有重力,那么...

wangxuwei
昨天
0
0
apolloxlua 介绍

##项目介绍 apolloxlua 目前支持javascript到lua的翻译。可以在openresty和luajit里使用。这个工具分为两种模式, 一种是web模式,可以通过网页使用。另外一种是tool模式, 通常作为大规模翻...

钟元OSS
昨天
2
0
Mybatis入门

简介: 定义:Mybatis是一个支持普通SQL查询、存储过程和高级映射的持久层框架。 途径:MyBatis通过XML文件或者注解的形式配置映射,实现数据库查询。 特性:动态SQL语句。 文件结构:Mybat...

霍淇滨
昨天
2
0
开发技术瓶颈期,如何突破

前言 读书、学习的那些事情,以前我也陆续叨叨了不少,但总觉得 “学习方法” 就是一个永远在路上的话题。个人的能力、经验积累与习惯方法不尽相同,而且一篇文章甚至一本书都很难将学习方法...

_小迷糊
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部