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

目录

【SpringBoot2.0文章汇总目录,java多线程教程文章汇总 长期更新系列

请多多支持

前面一节我们已经成功搭建ssm项目的环境,接下来我们需要做的就是搭建我们后台管理界面的框架。
这搭建完之后的效果图


【ssm个人博客项目实战02】easy UI搭建后台管理界面_第1张图片
这里写图片描述

基于easy UI搭建后台界面

jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。(EasyUI下载地址)

1、导入easy UI相关组件

首先我们在项目的webapp目录下新建一个static文件夹,这个文件夹主要存在我们的一个静态资源文件(js,css等),然后我们在官网下载好easy ui后将下载的文件夹复制到static文件夹下。
结果如图


【ssm个人博客项目实战02】easy UI搭建后台管理界面_第2张图片
这里写图片描述

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" %>







其中我们使用了jstl核心标记库 中的set指令使用简化代码 然后引入了easyUI所需的js css文件

2.2搭建后台框架

从效果图我们可以看出来整个界面分为四个部分分别是 上下左右四个部分 现在我们通过easyui实现这个效果
1、打开easyui API搜索 layout


【ssm个人博客项目实战02】easy UI搭建后台管理界面_第3张图片
easyUI布局

其中region代表位置 除去不要部分就得到了

<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    个人博客后台管理
    <%@include file="../common/head.jspf" %>
    


结果如图


【ssm个人博客项目实战02】easy UI搭建后台管理界面_第4张图片
整体布局

2、打开easyUI API搜索Accordion


【ssm个人博客项目实战02】easy UI搭建后台管理界面_第5张图片
这里写图片描述

我们分类选项实在west中的 所以在west中添加图中代码

Accordion for jQuery

Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.

content2
content3

3、打开easyUI API搜索tabs


【ssm个人博客项目实战02】easy UI搭建后台管理界面_第6张图片
easyUI tabs

由效果看出 我们的tabs是放在center中的
所以在center中添加如图代码

tab1
tab2
tab3
【ssm个人博客项目实战02】easy UI搭建后台管理界面_第7张图片
这里写图片描述

3、具体效果实现

1、这样整个框架已经出来了 接下面我们就完成west中的分类选项卡


【ssm个人博客项目实战02】easy UI搭建后台管理界面_第8张图片
这里写图片描述

我们在west插入如下代码

 

其中icoCls中的icon我们自定义的icon所以大家可能会出现没有图标的现象,大家不要着急easyUI怎么设置自定义icon请看我另一篇博客
easyUI自定义icon
2、center欢迎界面

欢迎使用

3、north south处理
north

south

div region="south" style="height: 25px;padding: 5px" align="center">
    Copyright © 2012-2017 熊平的SSM博客系统 版权所有

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


【ssm个人博客项目实战02】easy UI搭建后台管理界面_第9张图片
这里写图片描述

最后特别感谢倪升武大神

最后大家关注一下我的个人公众号把。关注我公众号即可获取源码


【ssm个人博客项目实战02】easy UI搭建后台管理界面_第10张图片
公众号

你可能感兴趣的:(【ssm个人博客项目实战02】easy UI搭建后台管理界面)

博客后台系统

欢迎:admin