架构学习（2）集成UI：SpringMVC+Spring+Hibernate+EasyUI

最新推荐文章于 2022-03-18 17:16:23 发布

Liu_desheng

最新推荐文章于 2022-03-18 17:16:23 发布

阅读量544

点赞数

分类专栏： EasyUI SSH框架

本文链接：https://blog.csdn.net/Liu_desheng/article/details/81841444

版权

SSH框架同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

EasyUI

1 篇文章 0 订阅

订阅专栏

写在前面

据闻，EasyUI是比较简单的前端框架，非常适合我这样的前端菜鸟学习使用。当然，也有人说angularjs+bootstrap才是王道。由于只想把前端后端跑通，手里的项目对前端要求也不高，还是决定采用在SSH框架基础上集成EasyUI的方案。这篇文章会随着集成的进度逐步更新。SSH框架基于《架构学习（1）实例分析：Spring5.0.8+SpringMVC+Hibernate5.3.4》实现，EasyUI就是在这个框架的基础上集成。

参考资料

（1）chenqk_123发布的关于EasyUI的系列博文

（2）《SSM框架搭建（Spring+SpringMVC+MyBatis）与easyui集成并实现增删改查实现》

1、导入EasyUI文件系统

（1）访问官网下载EasyUI for jQuery，本文采用的是1.5.5.6版。解压后文件结构如下图。

（2）在原有的框架工程中【src/main/webapp】目录下新建文件夹，命名为【js】。此后项目中的js文件都放在这个目录下。

（3）使用菜单【File】→【Importing...】→【General-File System】导入解压后的EasyUI文件夹，这里勾选了【Create top-level folder】，选择将文件夹一并复制。

导入EasyUI文件系统后，项目的文件结构如下图所示。

2、在JSP文件中引入EasyUI

使用EasyUI之前，需要将其I对应的js文件和样式css文件引入jsp文件，以便我们能在项目中正常的使用它。引入js的时候要特别注意引入顺序问题。代码如下：

<head>
……
	<!-- 引入JQuery -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/jquery-easyui/jquery.min.js"></script>
	<!-- 引入EasyUI -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/jquery-easyui/jquery.easyui.min.js"></script>
	<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
	<!-- 引入EasyUI的样式文件-->
	<link rel="stylesheet"
		href="${pageContext.request.contextPath}/js/jquery-easyui/themes/default/easyui.css"
		type="text/css" />
	<!-- 引入EasyUI的图标样式文件-->
	<link rel="stylesheet"
		href="${pageContext.request.contextPath}/js/jquery-easyui/themes/icon.css"
		type="text/css" />
……
</head>

每个采用EasyUI的jsp文件都需要在<head>……</head>部分加入上述代码。如果项目中的jsp比较多，可以将EasyUI的引用文件放入一个jsp页面，然后其它页面引用该页面，方便统一管理和更换页面风格。例如，在本项目【views】目录中新建文件easyui.jsp，并将上述代码写入该文件中。

<!--easyui.jsp-->
<%@ page language="java" pageEncoding="UTF-8"%>
<!-- 引入JQuery -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-easyui/jquery.min.js"></script>
<!-- 引入EasyUI -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-easyui/jquery.easyui.min.js"></script>
<!-- 引入EasyUI的中文国际化js，让EasyUI支持中文 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
	<!-- 以下部分可以根据需要添加所需要的样式文件 -->
<!-- 引入EasyUI的样式文件-->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/js/jquery-easyui/themes/default/easyui.css"
	type="text/css" />
<!-- 引入EasyUI的图标样式文件-->
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/js/jquery-easyui/themes/icon.css"
	type="text/css" />

同样的，在使用EasyUI的jsp文件的head部分引用该文件，代码如下：

<head>
……
    <jsp:include page="views/easyui.jsp"></jsp:include>
……
</head>

3、修改web.xml文件

在web.xml文件中增加如下代码：

	<servlet-mapping>
		<servlet-name>default</servlet-name>
		<url-pattern>*.css</url-pattern>
	</servlet-mapping>

	<servlet-mapping>
		<servlet-name>default</servlet-name>
		<url-pattern>*.js</url-pattern>
	</servlet-mapping>

在基于Maven和Spring MVC架构下，上述代码是必不可少的，否则EasyUI的样式无法产生应有的效果，困扰了好半天才搞定。感谢《maven项目引入js或css(SpringMVC)》。

4、使用EasyUI样式创建页面组件

在jsp文件中创建和使用EasyUI组件可采取两种方法：一是直接在 HTML 声明组件，二是编写 JavaScript 代码来创建组件。

4.1 在HTML声明组件

使用纯html的方式创建创建EasyUI的Dialog的步骤：

（1）定义一个div；

（2）将div的class样式属性设置成easyui-dialog，这样就可以将普通的div变成EasyUI的Dialog。

实例代码如下：

    <div class="easyui-dialog" id="dd1" title="EasyUI Dialog"
        style="width: 500px; height: 300px;">Hello World!</div>

在Tomcat中运行项目，在浏览器中访问http://localhost:8080/myssh/，执行的效果如下图所示。

4.2 编写 JavaScript 代码来创建

使用JavaScript动态创建EasyUI的Dialog的步骤：

（1）定义一个div，并给div指定一个id

（2）使用Jquery选择器选中该div，然后调用组件构建方法即可。

实例代码如下：

<head>
	<jsp:include page="views/easyui.jsp"></jsp:include>
……
	<script type="text/javascript">
		$(function(){
			$('#dd3').dialog({
				title: '使用JavaScript创建的Dialog',
				width: 400,
				height: 200,
				closed: false,
				cache: false,
				modal: true
			});
		});
	</script>
……
</head>

<body>
……
	<div class="easyui-dialog" id="dd1" title="EasyUI Dialog"
		style="width: 500px; height: 300px;">Hello World!</div>
	<div id="dd2">Dialog Content</div>
</body>

加入代码后运行结果如下图所示：

至此，可以在jsp网页中使用EasyUI组件。但这还没有涉及到数据操作，因此，还不能说实现了与SSH框架的无缝连接。下一篇博文将重点阐述基于EasyUI的前端与后台的互连互通互操作。

Liu_desheng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
架构学习（2）集成UI：SpringMVC+Spring+Hibernate+EasyUI

写在前面据闻，EasyUI是比较简单的前端框架，非常适合我这样的前端菜鸟学习使用。当然，也有人说angularjs+bootstrap才是王道。由于只想把前端后端跑通，手里的项目对前端要求也不高，还是决定采用在SSH框架基础上集成EasyUI的方案。这篇文章会随着集成的进度逐步更新。SSH框架基于《架构学习（1）实例分析：Spring5.0.8+SpringMVC+Hibernate5.3.4...
复制链接

扫一扫

专栏目录