上一篇完成了後端數據庫，映射和Service 的構建，本篇來完成前端部分。
前端部使用於SpringMVC爲MVC框架，使用ThymeLeaf，首先在pom中增加依賴：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>增加完畢後進行Maven Project Update，應該注意到，所有新增的依賴都沒有指定版本，Spring會自動進行版本適配。
本系列重點不是前端，所以前端採用一個單一頁面，頁面上有一個表格，表格中羅列所有的Person信息，可以直接在表格中修改後保存，也可以刪除和增加聯繫人。
第一步先實現控制器，本文控制器只需要CURD四個接口，控制器比較簡單，就直接和Application類寫在一起，源碼如下：
package com.springBoot.curdDemo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.springBoot.curdDemo.service.PersonService;
@SpringBootApplication
@Controller
public class Application {
@Autowired
PersonService personService;
@RequestMapping(value = "/", method = RequestMethod.GET)
public String index(Model model) {
model.addAttribute("persons", personService.read());
return "index";
}
@RequestMapping(value = "/update", method = RequestMethod.GET)
public String update(Model model, Integer id, String name, String phone) {
personService.update(id, name, phone);
model.addAttribute("persons", personService.read());
return "index";
}
@RequestMapping(value = "/create", method = RequestMethod.GET)
public String create(Model model, String name, String phone) {
personService.create(name, phone);
model.addAttribute("persons", personService.read());
return "index";
}
@RequestMapping(value = "/delete", method = RequestMethod.GET)
public String delete(Model model, Integer id) {
personService.delete(id);
model.addAttribute("persons", personService.read());
return "index";
}
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}代碼比較簡單，簡單也是強大之處，每次將update，create，delete後的列表放入model中，應該可以猜到，thymeleaf可以讀取model中的內容並顯示。
下面構建一個簡單的前端頁面，就是一個可編輯的表格，用來實現對通信錄的CURD操作。說明一下，SpringBoot的靜態資源需要放置在src/main/resources下面的static文件夾中，而ThymeLeaf的文件需要放在templates文件夾中，需要建立如下目錄結構：
爲了格式化顯示，引入了bootstrap和jquery的前端庫。
下面是index.html的代碼：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>通信錄</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>電話</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr th:each="person : ${persons}">
<form th:name="${person.name}+${person.id}" action='/update'
method='get'>
<td th:text="${person.id}"></td>
<td><input name="name" type="text" th:value="${person.name}" /></td>
<td><input name="phone" type="text" th:value="${person.phone}" /></td>
<td><a
th:attr="href=@{javascript:document.}+${person.name}+${person.id}+@{.submit();}">修改</a> <a
th:attr="href=@{/delete?id=}+${person.id}">刪除</a></td>
</form>
</tr>
<tr>
<form name="create" action='/create'
method='get'>
<td></td>
<td><input name="name" type="text" /></td>
<td><input name="phone" type="text" /></td>
<td><a href="javascript:document.create.submit();">新增</a></td>
</form>
</tr>
</tbody>
</table>
</body>
</html>前端頁面中使用ThymeLeaf的標籤th:each對persons中對象實現循環輸出，在列表中讀取person的屬性並顯示，增加3個超鏈接，分別對應更新，刪除和新建操作。
至此，這個基於Spring Boot+JPA+Mysql+ThymeLeaf的具備CURD通信錄就完成了！
最終頁面：
