写在前面
据闻,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的前端与后台的互连互通互操作。