上一篇完成了后端数据库，映射和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通信录就完成了！
最终页面：
