Spring Boot 之整合 EasyUI 打造 Web 应用
SpringBootTutorial :: Web :: UI :: EasyUI
EasyUI 是一个简单的用户界面组件的集合。由于 EasyUI 已经封装好大部分 UI 基本功能，能帮用户减少大量的 js 和 css 代码。所以，EasyUI 非常适合用于开发简单的系统或原型系统。
本文示例使用技术点：
- Spring Boot：主要使用了 spring-boot-starter-web、spring-boot-starter-data-jpa
- EasyUI：按需加载，并没有引入所有的 EasyUI 特性
- 数据库：为了测试方便，使用 H2
简介
什么是 EasyUI？
- easyui 是基于 jQuery、Angular.、Vue 和 React 的用户界面组件的集合。
- easyui 提供了构建现代交互式 javascript 应用程序的基本功能。
- 使用 easyui，您不需要编写许多 javascript 代码，通常通过编写一些 HTML 标记来定义用户界面。
- 完整的 HTML5 网页框架。
- 使用 easyui 开发你的产品时可以大量节省你的时间和规模。
- easyui 使用非常简单但功能非常强大。
Spring Boot 整合 EasyUI
配置
application.properties 修改：
spring.mvc.view.prefix = /views/
spring.mvc.view.suffix = .html
引入 easyui
EasyUI 下载地址：http://www.jeasyui.cn/download.html
在 src/main/resources/static 目录下引入 easyui。
然后在 html 中引用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
type="text/css"
href="../lib/easyui/themes/bootstrap/easyui.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../lib/easyui/themes/icon.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../lib/easyui/themes/color.css"
/>
<script type="text/javascript" src="../lib/easyui/jquery.min.js"></script>
<script
type="text/javascript"
src="../lib/easyui/jquery.easyui.min.js"
></script>
<script
type="text/javascript"
src="../lib/easyui/locale/easyui-lang-zh_CN.js"
></script>
</head>
<body>
<!-- 省略 -->
</body>
</html>
引入 easyui 后，需要使用哪种组件，可以查看相关文档或 API，十分简单，此处不一一赘述。
实战
引入 maven 依赖
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
<groupId>commons-collections</groupId>
<artifactId>commons-collections</artifactId>
<version>3.2.2</version>
</dependency>
</dependencies>
使用 JPA
为了使用 JPA 技术访问数据，我们需要定义 Entity 和 Repository
定义一个 Entity：
@Entity
public class User {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;
private String firstName;
private String lastName;
private String phone;
private String email;
protected User() {}
public User(String firstName, String lastName, String phone, String email) {
this.firstName = firstName;
this.lastName = lastName;
this.phone = phone;
this.email = email;
}
// 略 getter/setter
}
定义一个 Repository：
public interface UserRepository extends CrudRepository<User, Long> {
List<User> findByLastName(String lastName);
}
使用 Web
首页 Controller，将 web 请求定向到指定页面（下面的例子定向到 index.html）
@Controller
public class IndexController {
@RequestMapping(value = {"", "/", "index"})
public String index() {
return "index";
}
}
此外，需要定义一个 Controller，提供后台的 API 接口
@Controller
public class UserController {
@Autowired
private UserRepository customerRepository;
@RequestMapping(value = "/user", method = RequestMethod.GET)
public String user() {
return "user";
}
@ResponseBody
@RequestMapping(value = "/user/list")
public ResponseDTO<User> list() {
Iterable<User> all = customerRepository.findAll();
List<User> list = IteratorUtils.toList(all.iterator());
return new ResponseDTO<>(true, list.size(), list);
}
@ResponseBody
@RequestMapping(value = "/user/add")
public ResponseDTO<User> add(User user) {
User result = customerRepository.save(user);
List<User> list = new ArrayList<>();
list.add(result);
return new ResponseDTO<>(true, 1, list);
}
@ResponseBody
@RequestMapping(value = "/user/save")
public ResponseDTO<User> save(@RequestParam("id") Long id, User user) {
user.setId(id);
customerRepository.save(user);
List<User> list = new ArrayList<>();
list.add(user);
return new ResponseDTO<>(true, 1, list);
}
@ResponseBody
@RequestMapping(value = "/user/delete")
public ResponseDTO delete(@RequestParam("id") Long id) {
customerRepository.deleteById(id);
return new ResponseDTO<>(true, null, null);
}
}
使用 EasyUI
接下来，我们要使用前面定义的后台接口，仅需要在 EasyUI API 中指定 url 即可。
请留意下面示例中的 url 字段，和实际接口是一一对应的。
<!DOCTYPE html>
<html>
<head>
<title>Complex Layout - jQuery EasyUI Demo</title>
<meta charset="UTF-8" />
<link
rel="stylesheet"
type="text/css"
href="../lib/easyui/themes/bootstrap/easyui.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../lib/easyui/themes/icon.css"
/>
<link
rel="stylesheet"
type="text/css"
href="../lib/easyui/themes/color.css"
/>
<script type="text/javascript" src="../lib/easyui/jquery.min.js"></script>
<script
type="text/javascript"
src="../lib/easyui/jquery.easyui.min.js"
></script>
<script
type="text/javascript"
src="../lib/easyui/locale/easyui-lang-zh_CN.js"
></script>
<style type="text/css">
body {
font-family: microsoft yahei;
}
</style>
</head>
<body>
<div style="width:100%">
<h2>基本的 CRUD 应用</h2>
<p>数据来源于后台系统</p>
<table
id="dg"
title="Custom List"
class="easyui-datagrid"
url="/user/list"
toolbar="#toolbar"
pagination="true"
rownumbers="true"
fitColumns="true"
singleSelect="true"
>
<thead>
<tr>
<th field="id" width="50">ID</th>
<th field="firstName" width="50">First Name</th>
<th field="lastName" width="50">Last Name</th>
<th field="phone" width="50">Phone</th>
<th field="email" width="50">Email</th>
</tr>
</thead>
</table>
<div id="toolbar">
<a
href="javascript:void(0)"
class="easyui-linkbutton"
iconCls="icon-add"
plain="true"
onclick="newUser()"
>添加</a
>
<a
href="javascript:void(0)"
class="easyui-linkbutton"
iconCls="icon-edit"
plain="true"
onclick="editUser()"
>修改</a
>
<a
href="javascript:void(0)"
class="easyui-linkbutton"
iconCls="icon-remove"
plain="true"
onclick="destroyUser()"
>删除</a
>
</div>
<div
id="dlg"
class="easyui-dialog"
style="width:400px"
data-options="closed:true,modal:true,border:'thin',buttons:'#dlg-buttons'"
>
<form
id="fm"
method="post"
novalidate
style="margin:0;padding:20px 50px"
>
<h3>User Information</h3>
<div style="margin-bottom:10px">
<input
name="firstName"
class="easyui-textbox"
required="true"
label="First Name:"
style="width:100%"
/>
</div>
<div style="margin-bottom:10px">
<input
name="lastName"
class="easyui-textbox"
required="true"
label="Last Name:"
style="width:100%"
/>
</div>
<div style="margin-bottom:10px">
<input
name="phone"
class="easyui-textbox"
required="true"
label="Phone:"
style="width:100%"
/>
</div>
<div style="margin-bottom:10px">
<input
name="email"
class="easyui-textbox"
required="true"
validType="email"
label="Email:"
style="width:100%"
/>
</div>
</form>
</div>
<div id="dlg-buttons">
<a
href="javascript:void(0)"
class="easyui-linkbutton c6"
iconCls="icon-ok"
onclick="saveUser()"
style="width:90px"
>Save</a
>
<a
href="javascript:void(0)"
class="easyui-linkbutton"
iconCls="icon-cancel"
onclick="javascript:$('#dlg').dialog('close')"
style="width:90px"
>Cancel</a
>
</div>
</div>
<script type="text/javascript">
var url;
function newUser() {
$('#dlg')
.dialog('open')
.dialog('center')
.dialog('setTitle', 'New User');
$('#fm').form('clear');
url = '/user/add';
}
function editUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$('#dlg')
.dialog('open')
.dialog('center')
.dialog('setTitle', 'Edit User');
$('#fm').form('load', row);
url = '/user/save';
}
}
function saveUser() {
$('#fm').form('submit', {
url: url,
onSubmit: function() {
return $(this).form('validate');
},
success: function(result) {
var result = eval('(' + result + ')');
if (result.errorMsg) {
$.messager.show({
title: 'Error',
msg: result.errorMsg
});
} else {
$('#dlg').dialog('close'); // close the dialog
$('#dg').datagrid('reload'); // reload the user data
}
}
});
}
function destroyUser() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm(
'Confirm',
'Are you sure you want to destroy this user?',
function(r) {
if (r) {
$.post(
'/user/delete',
{ id: row.id },
function(result) {
if (result.success) {
$('#dg').datagrid('reload'); // reload the user data
} else {
$.messager.show({
// show error message
title: 'Error',
msg: result.errorMsg
});
}
},
'json'
);
}
}
);
}
}
</script>
</body>
</html>
完整示例
请参考 源码
运行方式：
mvn clean package -DskipTests=true
java -jar target/
在浏览器中访问：http://localhost:8080/
引用和引申
Spring Boot 之整合 EasyUI 打造 Web 应用的更多相关文章
- Spring Boot Security 整合 JWT 实现 无状态的分布式API接口
简介 JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案.JSON Web Token 入门教程 - 阮一峰,这篇文章可以帮你了解JWT的概念.本文重点讲解Spring Boo ...
- Spring boot Mybatis 整合（完整版）
个人开源项目 springboot+mybatis+thymeleaf+docker构建的个人站点开源项目(集成了个人主页.个人作品.个人博客) 朋友自制的springboot接口文档组件swagge ...
- Spring Boot 应用系列 5 -- Spring Boot 2 整合logback
上一篇我们梳理了Spring Boot 2 整合log4j2的配置过程,其中讲到了Spring Boot 2原装适配logback,并且在非异步环境下logback和log4j2的性能差别不大,所以对 ...
- Spring Boot：整合Spring Security
综合概述 Spring Security 是 Spring 社区的一个顶级项目,也是 Spring Boot 官方推荐使用的安全框架.除了常规的认证(Authentication)和授权(Author ...
- Spring Boot：整合Swagger文档
综合概述 spring-boot作为当前最为流行的Java web开发脚手架,越来越多的开发者选择用其来构建企业级的RESTFul API接口.这些接口不但会服务于传统的web端(b/s),也会服务于 ...
- Spring Boot：整合MyBatis框架
综合概述 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis 可以使用简单 ...
- Spring Boot：整合JdbcTemplate
综合概述 Spring对数据库的操作在jdbc上面做了更深层次的封装,而JdbcTemplate便是Spring提供的一个操作数据库的便捷工具.我们可以借助JdbcTemplate来执行所有数据库操作 ...
- Spring Boot：整合Spring Data JPA
综合概述 JPA是Java Persistence API的简称,是一套Sun官方提出的Java持久化规范.其设计目标主要是为了简化现有的持久化开发工作和整合ORM技术,它为Java开发人员提供了一种 ...
- Spring Boot：整合Shiro权限框架
综合概述 Shiro是Apache旗下的一个开源项目,它是一个非常易用的安全框架,提供了包括认证.授权.加密.会话管理等功能,与Spring Security一样属基于权限的安全框架,但是与Sprin ...
随机推荐
- Android string.xml 添加特殊字符
解决项目中在string.xml 中显示特殊符号的问题,如@号冒号等.只能考虑使用ASCII码进行显示: @号 @ :号 : 空格 以下为常见的ASCII十进制交换编码: --> <- ...
- Android SDK manager里面什么是必须下载的？
最近公司来了位新同事,由于需要配置Android环境,但是在配置的时候却发现sdk很大,很占用空间,想复制给同事也觉得不方便,于是根据下面的图删除了一些不必要的api. 根据官方文档的描述SDK To ...
- Android view层
当屏幕可以装下内容的时候,他们的值相等,只有当view超出屏幕后,才能看出他们的区别:getMeasuredHeight()是实际View的大小,与屏幕无关,而getHeight的大小此时则是屏幕的大 ...
- 利用Selenium爬取淘宝商品信息
一. Selenium和PhantomJS介绍 Selenium是一个用于Web应用程序测试的工具,Selenium直接运行在浏览器中,就像真正的用户在操作一样.由于这个性质,Selenium也是一 ...
- 适配器Adapter
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2019/3/4 22:13 # @Author : ChenAdong # @emai ...
- Java中线程的同步问题
在生活中我们时常会遇到同步的问题,而且大多数的实际问题都是线程的同步问题 我这里以生活中的火车售票来进行举例: 假设现在我们总共有1000张票要进行出售,共有10个出售点,那么当售票到最后只有一张票时 ...
- chmod命令-权限
---··[转] hmod命令:改变文件权限. 一:符号模式: 命令格式:chmod [who] operator [permission] filename who包含的选项 ...
- [20190101]块内重整.txt
[20190101]块内重整.txt --//我不知道用什么术语表达这样的情况,我仅仅一次开会对方这么讲,我现在也照用这个术语.--//当dml插入数据到数据块时,预留一定的空间(pctfree的百分 ...
- 洗礼灵魂，修炼python（64）--爬虫篇—re模块/正则表达式（2）
前面学习了元家军以及其他的字符匹配方法,那得会用啊对吧?本篇博文就简单的解析怎么运用 正则表达式使用 前面说了正则表达式的知识点,本篇博文就是针对常用的正则表达式进行举例解析.相信你知道要用正则表达式 ...
- replace函数使用方法
Replace函数的含义~ 用新字符串替换旧字符串,而且替换的位置和数量都是指定的. replace函数的语法格式 =Replace(old_text,start_num,num_chars,new_ ...