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

写在前面

据闻，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的时候要特别注意引入顺序问题。代码如下：

……
	
	
	
	
	
	
	
	
	
	
……

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

<%@ page language="java" pageEncoding="UTF-8"%>






	

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

……
    
……

3、修改web.xml文件

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

	
		default
		*.css
	

	
		default
		*.js
	

在基于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。

实例代码如下：

    
Hello World!

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

4.2 编写 JavaScript 代码来创建

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

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

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

实例代码如下：

	
……
	
……



……
	
Hello World!
	
Dialog Content

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

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