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

最新推荐文章于 2023-01-03 12:27:08 发布

余空~

最新推荐文章于 2023-01-03 12:27:08 发布

阅读量1.7w

点赞数 10

分类专栏：个人博客 ssm项目 easy-ui 文章标签： easyui框架 ssm框架

本文链接：https://blog.csdn.net/xp541130126/article/details/70169785

版权

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

最低0.47元/天解锁文章

余空~

关注

10
点赞
踩
34

收藏

觉得还不错? 一键收藏
15
评论
【ssm个人博客项目实战02】easy UI搭建后台管理界面

前面一节我们已经成功搭建ssm项目的环境，接下来我们需要做的就是搭建我们后台管理界面的框架。这搭建完之后的效果图基于easy UI搭建后台界面jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不需要对css样式有深入的了解，开发者需要了
复制链接

扫一扫