Spring Boot 之整合 EazyUI 打造 Web 應用
阿新 • • 發佈：2019-01-08
Spring Boot 之整合 EazyUI 打造 Web 應用
EazyUI 是一個簡單的使用者介面元件的集合。由於 EazyUI 已經封裝好大部分 UI 基本功能，能幫使用者減少大量的 js 和 css 程式碼。所以，EazyUI 非常適合用於開發簡單的系統或原型系統。
本文示例使用技術點：
- Spring Boot：主要使用了 spring-boot-starter-web、spring-boot-starter-data-jpa
- EazyUI：按需載入，並沒有引入所有的 EazyUI 特性
- 資料庫：為了測試方便，使用 H2
簡介
什麼是 EasyUI？
- easyui 是基於 jQuery、Angular.、Vue 和 React 的使用者介面元件的集合。
- easyui 提供了構建現代互動式 javascript 應用程式的基本功能。
- 使用 easyui，您不需要編寫許多 javascript 程式碼，通常通過編寫一些 HTML 標記來定義使用者介面。
- 完整的 HTML5 網頁框架。
- 使用 easyui 開發你的產品時可以大量節省你的時間和規模。
- easyui 使用非常簡單但功能非常強大。
Spring Boot 整合 EazyUI
配置
application.properties 修改：
spring.mvc.view.prefix = /views/
spring.mvc.view.suffix = .html引入 eazyui
EazyUI 下載地址：http://www.jeasyui.cn/download.html
在 src/main/resources/static 目錄下引入 eazyui。
然後在 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>引入 eazyui 後，需要使用哪種元件，可以檢視相關文件或 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);
}
}使用 EazyUI
接下來，我們要使用前面定義的後臺介面，僅需要在 EazyUI 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/