虽然现在前后端大多是分离的，而且是使用json数据传输，但是多少我们都要知道一些整合技术的使用。
早些时候，我们使用JSP进行页面数据开发，如今，JSP已经逐渐退下舞台。
对于后端开发工程师，最好的页面交互式使用JSON数据。
本章节作为开发参考。
[TOC]
目录.jpg
JSP的接班
当今企业级的开发中，前后端是分离的，对于视图层技术有专业人士去开发，但是SB中对于视图层也有支持，当即推荐的就是Thymeleaf，以及Freemarker，他们是JSP的的后辈。
Thymeleaf支持HTML原型，方便前端工程师查看样式，方便后端工程师查看效果。
Thymeleaf的使用
是什么
SB推荐的前端模板引擎，支持HTML原型。可以结合HTML，将数据以对象的形式进行显示。
添加依赖
在pom中添加spring-boot-starter-thymeleaf依赖。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
配置Thymeleaf
按理说：自动化配置类ThymeleafAutoConfiguration.class会生成，但是笔者并未看到。
ThymeleafAutoConfiguration.class这个配置类主要是用来进行配置的，如果没有生成，无妨，自己生成即可，但是不推荐这么做，因为我们改配置通常都用properties进行配置。
application.properties中有相关配置（常用）：
# >>>>>>>>>>>>>>>>>>>>>>>>>Thymeleaf config
# 是否开启缓存，默认true
spring.thymeleaf.cache=true
# 模板是否存在，默认true
spring.thymeleaf.check-template=true
#模板未知是否存在，默认true
spring.thymeleaf.check-template-location=true
# 模板文件编码
spring.thymeleaf.encoding=UTF-8
# 模板文件地址
spring.thymeleaf.prefix=classpath:/templates/
# Content-Type配置
spring.thymeleaf.servlet.content-type=text/html; charset=utf-8
# 模板文件后缀
spring.thymeleaf.suffix=.html
配置控制器
创建一个POJO对象：Book：
public class Book {
private Integer id;
private String name,author;
……geter/seter
}
创建一个控制类方法：
@GetMapping("/book")
public ModelAndView books() {
System.out.println(">>>>>>>>>>>>>>>>>>>>s");
Book b = new Book();
b.setId(1);
b.setAuthor("Leon");
b.setName("西行记");
Book b2 = new Book();
b2.setId(1);
b2.setAuthor("Leon");
b2.setName("西行记");
ArrayList<Book> books = new ArrayList<Book>();
books.add(b);
books.add(b2);
ModelAndView mModelAndView = new ModelAndView();
mModelAndView.addObject("books",books); // 定义数据对象
mModelAndView.setViewName("book"); // 跳转到templates中指定页面book.html
return mModelAndView;
}
请注意setViewName方法他的作用是指向页面到resources/templates/book.html
视图显示
在resource下新建templates文件，在里面新建文件book.html
<!DOCTYPE html>
<html lang='en' xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1">
<tr>
<td>编号</td>
<td>名称</td>
<td>作者</td>
</tr>
<tr th:each="book:${books}">
<td th:text="${book.id}"></td>
<td th:text="${book.name}"></td>
<td th:text="${book.author}"></td>
</tr>
</table>
</body>
</html>
运行即可显示。
FreeMarker
配置方式方法跟Thymeleaf类似，在视图显示的时候会有稍许不同。
请各位看官自行百度即可。
网友评论