Springboot之Thymeleaf 入门（环境搭建）|第一章-yellowcong

刺骨的言语ヽ痛彻心扉 2022-05-28 12:37 252阅读 0赞

> Thymeleaf 这个模版引擎是Springboot推荐的，而以前我们使用的jsp，人家Springboot已经不推荐使用了，相对于Thymeleaf ，jsp的效率低一些。搭建Thymeleaf 的环境步骤：1、配置pom.xml配置文件，添加`spring-boot-starter-thymeleaf`和`nekohtml`两个依赖包；2、配置poperites ;3、创建控制器类；4、创建模板文件；5、访问测试。

## 代码地址 ##

https://gitee.com/yellowcong/springboot-thymeleaf/tree/master/chapter1

### 目录结构 ###

![这里写图片描述][SouthEast]

## Springboot推荐的模版引擎 ##

Spring Boot提供了默认配置的模板引擎主要有以下几种：

1、Thymeleaf  
2、FreeMarker  
3、Velocity  
4、Groovy  
5、Mustache

Spring Boot建议使用这些模板引擎，避免使用JSP，若一定要使用JSP将无法实现Spring Boot的多种特性，具体可见后文：支持JSP的配置

当你使用上述模板引擎中的任何一个，它们默认的模板配置路径为：`src/main/resources/templates`。当然也可以修改这个路径，可以通过配置`spring.thymeleaf.prefix=classpath:/templates/`，设定模板的路径。

## 搭建Thymeleaf ##

### 1、配置pom.xml ###

这个地方导入了`spring-boot-starter-thymeleaf`和`nekohtml`两个依赖包,`nekohtml` 这个依赖包是为了解决默认的HTML5模版要求严格的问题，修改默认模版`spring.thymeleaf.mode=LEGACYHTML5`,可以解决这个问题。

<dependency>
         <groupId>org.springframework.boot</groupId>
         <artifactId>spring-boot-starter-thymeleaf</artifactId>
       </dependency>
    
        
        <dependency>
          <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
       </dependency>

### 2、配置application.properties ###

这个地方，我们需要注意`spring.thymeleaf.mode=LEGACYHTML5`和`spring.thymeleaf.cache=false` 这两个地方的配置。这两个不是默认的配置，而是修改过的。解决界面缓存和html检查严格的问题。

#日志地址
    logging.file=logs/config/demo-xx.log
    info.name=入门案例‹
    
    #端口号
    server.port=80
    #访问路径
    server.context-path=/
    
    ##############################################
    #配置Thymeleaf 
    #thymeleaf start
    spring.thymeleaf.mode=LEGACYHTML5
    #编码
    spring.thymeleaf.encoding=UTF-8
    #返回模板类型
    spring.thymeleaf.content-type=text/html
    #开发时关闭缓存,不然没法看到实时页面
    spring.thymeleaf.cache=false
    # 在构建URL时预先查看名称的前缀 （默认就是这个）
    spring.thymeleaf.prefix=classpath:/templates/
    # 构建URL时附加查看名称的后缀.（默认就是 html的结尾的）
    spring.thymeleaf.suffix=.html
    #thymeleaf end
    ##############################################

### 3、配置控制器 ###

package com.yellowcong.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.ModelMap;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    /** * 创建日期:2018年4月5日<br/> * 代码创建:黄聪<br/> * 功能描述:管理员<br/> */
    @Controller
    public class IndexController { 
    
        /** * 创建日期:2018年4月5日<br/> * 代码创建:黄聪<br/> * 功能描述:首页模版<br/> * @return */
        @RequestMapping("/index")
        public String index(ModelMap map){
            //单个数据
            map.put("username", "入门案例");
            return "admin/index";
        }
    }

### 4、添加模板 ###

我们需要在`/resources/templates`这个目录下，建立对应的模板文件。

<!DOCTYPE html>
    
    <html xmlns:th="http://www.thymeleaf.org">
    <head lang="en">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title th:text="${username}">xx</title>
    </head>
    <body>
    <h1 th:text="${username}">Hello World</h1>
    </body>
    </html>

### 5、访问测试 ###

可以看到，访问后，我们的title部分，和body部分，都有了类容提示了。  
![这里写图片描述][SouthEast 1]

## 常见问题 ##

### 1、Whitelabel Error Page ###

导致这个问题的一般原因，就是html的模板，没有严格遵循html5的标准，导致了报错，你可能会发现在默认配置下，thymeleaf对.html的内容要求很严格，比如`<meta charset="UTF-8" />`，  
如果少最后的标签封闭符号/，就会报错而转到错误页。也比如你在使用Vue.js这样的库，然后有`<div v-cloak></div>`这样的html代码，  
也会被thymeleaf认为不符合要求而抛出错误。

解决问题的方式有两种：1、严格遵循html5；2、添加依`nekohtml`赖包,配置application.properties 设置`spring.thymeleaf.mode = LEGACYHTML5`  
spring.thymeleaf.mode的默认值是HTML5，其实是一个很严格的检查，改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。

![这里写图片描述][SouthEast 2]

#### 配置LEGACYHTML5 ####

配置这个的时候，还需要添加依`nekohtml`赖包，然后配置application.properties 设置`spring.thymeleaf.mode = LEGACYHTML5`

<dependency>
        <groupId>net.sourceforge.nekohtml</groupId>
        <artifactId>nekohtml</artifactId>
     </dependency>

## 参考文章 ##

[https://www.thymeleaf.org/documentation.html][https_www.thymeleaf.org_documentation.html]  
[https://www.codercto.com/a/3110.html][https_www.codercto.com_a_3110.html]  
[http://blog.didispace.com/categories/Spring-Boot/][http_blog.didispace.com_categories_Spring-Boot]

[SouthEast]: /images/20220528/2e4a8796fd4946edbab55442eccae426.png
[SouthEast 1]: /images/20220528/a14a50046700480ca5287e2539e930e3.png
[SouthEast 2]: /images/20220528/523a276b3c6e4b48a0657509c096f421.png
[https_www.thymeleaf.org_documentation.html]: https://www.thymeleaf.org/documentation.html
[https_www.codercto.com_a_3110.html]: https://www.codercto.com/a/3110.html
[http_blog.didispace.com_categories_Spring-Boot]: http://blog.didispace.com/categories/Spring-Boot/