1、整合thymeleaf(官方推荐)
1.1 thymeleaf是什么
java新一代的模板引擎，支持html原型，可以让前端工程师
直接浏览器查看样式，也可以支持后端工程师结合真实数据查看效果。
1.2 整合步骤
- 添加依赖
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>1.5.12.RELEASE</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>1.5.12.RELEASE</version>
</dependency>
</dependencies>
-
配置thymeleaf
ctrl+shift+r全局搜索ThymeleafAutoConfiguration类，这是springboot为thymeleaf提供的配置类。而相关配置属性在ThymeleafProperties这个类中。
image.png
-
修改thymeleaf的默认配置(在application.properties)
部分常见配置
image.png
1.3 实战
- 创建maven工程，不需要选择项目框架
pom文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.ljs</groupId>
<artifactId>thymeleaf</artifactId>
<version>1.0-SNAPSHOT</version>
<name>thymeleaf</name>
<description>Demo project for Spring Boot</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.3.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<!--统一项目字符集编码和java版本-->
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>
</project>
- springboot启动类，使用组合注解
@SpringBootApplication
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
- 实体类和Controller类
public class Book {
private Integer id;
private String name;
private String author;
//省略get和set
@Controller
public class BookController {
@GetMapping("/books")
public ModelAndView Books(){
List<Book> books = new ArrayList<>();
Book book1 = new Book();
book1.setId(1);
book1.setName("springboot");
book1.setAuthor("王松");
Book book2 = new Book();
book2.setId(2);
book2.setName("vue");
book2.setAuthor("王松");
books.add(book1);
books.add(book2);
ModelAndView mv = new ModelAndView();
mv.addObject("books", books);
//视图名为books
mv.setViewName("books");
return mv;
}
}
- 创建模板
在resource下创建templates文件夹，创建books.html
注意第二行导入thymeleaf的名称空间
<!DOCTYPE html>
<html lang="en" xmln:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>图书列表</title>
</head>
<body>
<table border="1">
<tr>
<td>id</td>
<td>书名</td>
<td>作者</td>
</tr>
<tr th:each="book:${books}">
<td th:text="${book.id}"/>
<td th:text="${book.name}"/>
<td th:text="${book.author}"/>
</tr>
</table>
</body>
</html>
-
启动运行
image.png
1.5 更多关于thymeleaf的基础用法，
2、整合FreeMarker
2.1 freemarker
与Thymeleaf不同 FreeMarker 需要经过解析才能够在浏览器中展示出来。 freeMarker不仅可以用来配置HTML页面模板，也可以作为电子邮件模板、配置文件模板以及源码模板等。
2.2 整合步骤
- 添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>
-
配置freemarker
SpringBoot对FreeMarker也提供了自动化配置类 FreeMarkerAutoConfiguration ，相关的配属性在FreeMarkerProperties
ctrl+shift+r全局搜索FreeMarkerProperties类
image.png
-
修改freemarker默认配置(application.properties)
image.png
3.3 实战
-
这次直接创建springboot工程，而不是maven工程
image.png
-
pom文件直接加入上面两个依赖就行
-
实体类和controller和上面一样
-
模板文件
其中先判断model中的books不为空并且有数据，然后再遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图书列表</title>
</head>
<body>
<hr>
<table border="1">
<tr>
<td>图书编号</td>
<td>图书名称</td>
<td>图书作者</td>
</tr>
<#if books ??&&(books?size>0)>
<#list books as book>
<tr>
<td>${book.id}</td>
<td>${book.name}</td>
<td>${book.author}</td>
</tr>
</#list>
</#if>
</table>
</body>
</html>
- 运行
image.png
2.4 更多关于freemarker基础用法
freemarker官网
3 小结
本章介绍了springboot整合视图层技术，如果项目未完全分离可以使用上面两种代替jsp，如果完全分离后端只需提供接口而不需要整合这些。
网友评论