4、Spring Boot——整合页面模板

Spring Boot中可以支持前后端分离开发，这个时候就不需要后端页面模板，当然，Spring Boot中也支持直接页面模板，早期的Spring Boot中还支持使用Velocity作用页面模板，现在的Spring Boot已经不支持使用Velocity了，页面模板主要支持Thymeleaf和Freemarker,当然，作为Java最基本的页面模板Jsp,Spring Boot也是支持的，只是使用比较麻烦。

1、整合Thymeleaf
官网：https://www.thymeleaf.org/

相对于Freemarker、Jsp而言，Thymeleaf是一个非常新的页面模板，通常我们称之为前端页面模板因为Thymeleaf模板的后缀是html,不同于Freemarker、Jsp这一类必须服务端解析之后才能显示出来的页面模板，Thymeleay不需要经过服务端解析就能够显示出来。

由于Thymeleaf可以直接被浏览器打开，因此，预览时非常方便。

1.2 整合步骤
Spring Boot中整合Thymeleaf非常容易，只需要创建项目时添加Thymeleaf依赖即可。
创建完成后，pom.xml依赖如下：

 
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
            org.springframework.boot
            spring-boot-starter-web
        

当然Thymeleaf不仅仅能在Spring Boot中使用，也可以使用在其他地方，只不过Spring Boot针对Thymeleaf提供了一整套的配置方案，配置类在org.springframework.boot.autoconfigure.thymeleaf.ThymeleafProperties中。

这个类首先上面加了一个@ConfigurationProperties注解（Spring Boot中的类型安全的属性注入），将application.properties中前缀是spring.thymeleaf的配置和这个类中的属性绑定。（不会绑定在以下的static属性中）
这三个static变量定义了默认的编码格式，视图解析器的前缀、后缀等。

从前三行配置中可以看出来，Thymeleaf模板的默认位置在resources/templates目录下，默认的后缀是html。

这些配置如果开发者不自己提供，则使用默认的，如果自己提供，则在application.properties中以spring.thymeleaf开始相关的配置。

Thymeleaf本身的自动化配置类org.springframework.boot.autoconfigure.thymeleaf.ThymeleafAutoConfiguration

@Configuration
@EnableConfigurationProperties({ThymeleafProperties.class})
@ConditionalOnClass({TemplateMode.class, SpringTemplateEngine.class})
@AutoConfigureAfter({WebMvcAutoConfiguration.class, WebFluxAutoConfiguration.class})

在自动化配置类中，首先导入ThymeleafProperties.
然后@ConditionalOnClass注解表示当前系统中存在
TemplateMode.class和SpringTemplateEngine.class类时，当前的自动化配置类才会生效（即项目中引入Thymeleaf相关依赖时这个配置就会生效）

1.2 创建Controller

@Controller
public class IndexController {

    @GetMapping("/index")
    public String index(Model model){
        List users=new ArrayList<>();
        for (int i=1;i<10;i++){
            User u=new User();
            u.setName("张三"+i);
            u.setId(i);
            u.setAddress("深圳"+i);
            users.add(u);
        }
        model.addAttribute("user",users);
    return "index";
}
}

Thymeleaf文件得后缀就是html，所以创建Thmeleaf文件直接创建html文件就好了。Thymeleaf中的循环th:each。

    
    



    

        
编号
        
姓名
        
地址
    
    

    

    

    

    

启动后页面显示如下：

Thmeleaf还有一个特性：它支持再js中直接获取model中的变量

例如我在Controller中定义了一个
model.addAttribute("username","李四");
这时在页面模板中可以直接在js中获取到这个username变量

2、整合Freemarker
添加页面模板
pom.xml文件中的依赖

 
            org.springframework.boot
            spring-boot-starter-freemarker
        
        
            org.springframework.boot
            spring-boot-starter-web
        

两个配置文件
创建一个Controller

@Controller
public class BookController {
    @GetMapping("/book")
    public String book(Model model){
        List books=new ArrayList<>();
        for (int i=1;i<10;i++){
            Book b=new Book();
            b.setId(i);
            b.setName("三国演义"+i);
            b.setAuthor("罗贯中"+i);
            books.add(b);
        }
        model.addAttribute("books",books);
        return "book";
    }
}

创建一个book.ftl

    
    



    <#list books as book>
        

    

        
编号
        
书名
        
作者
    

            
${book.id}
            
${book.name}
            
${book.author}
        
    

页面显示如下：

3、整合Jsp
整合Jsp相对于要比Thymeleay和Freemarker稍微复杂一点。因为那两个都可以把页面模板放在template,jsp只能放在webapp目录下，针对于jsp,Spring Boot并没有提供相关的自动化配置，jsp只能自己加依赖。

 
        
            jstl
            jstl
            1.2
        
        
            javax.servlet
            javax.servlet-api
        
        
            javax.servlet.jsp
            javax.servlet.jsp-api
            2.3.1
        
        
            org.apache.tomcat.embed
            tomcat-embed-jasper
        

Controller如下：

@Controller
public class UserController {
    @GetMapping("/user")
    public String user(Model model){
        List users=new ArrayList<>();
        for (int i=1;i<10;i++){
            User u=new User();
            u.setId(i);
            u.setUsername("王五"+i);
            u.setAddress("深圳"+i);
            users.add(u);
        }
        model.addAttribute("users",users);
        return "user";
    }
}

jsp需要放在webapp目录下，所以需要在resources目录下创建一个webapp目录

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 豆子
  Date: 2019/5/29
  Time: 0:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    



            

    

        
用户编号
        
用户名
        
地址
    

        

                
${user.id}
                
${user.name}
                
${user.address}
            
        

这时候Spring Boot 是不知道视图在webapp目录下的，要自己创建一个WebMVCConfig配置类，但是不能继承 WebMvcConfigurationSupport类，只能实现一个接口WebMvcConfigurer。因为我现在只想要Spring Boot原来的配置不变的情况下，增加一个视图解析器就可以了，如果采用继承的方法，会导致Spring Boot已经配置好的全部失效。

@Configuration
public class WebMVCConfig implements WebMvcConfigurer {
    @Override
    public void configureViewResolvers(ViewResolverRegistry registry) {
        //前缀和后缀
        registry.jsp("/",".jsp");
    }
}