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

最新推荐文章于 2024-07-30 23:05:40 发布

狂飙的yellowcong

最新推荐文章于 2024-07-30 23:05:40 发布

阅读量5.2k

点赞数 3

分类专栏： springboot 文章标签： springboot

本文链接：https://blog.csdn.net/yelllowcong/article/details/79828257

版权

springboot 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

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

目录结构

这里写图片描述

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,可以解决这个问题。

<!-- 导入thymeleaf模版 的依赖-->
      <dependency>
     <groupId>org.springframework.boot</groupId>
     <artifactId>spring-boot-starter-thymeleaf</artifactId>
   </dependency>

    <!-- spring.thymeleaf.mode=LEGACYHTML5 -->
    <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"/>
这样在后面的th标签就不会报错
 -->
<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部分，都有了类容提示了。
这里写图片描述

常见问题

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可以得到一个可能更友好亲切的格式要求。

这里写图片描述

配置LEGACYHTML5

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

<!-- spring.thymeleaf.mode=LEGACYHTML5 -->
<dependency>
    <groupId>net.sourceforge.nekohtml</groupId>
    <artifactId>nekohtml</artifactId>
 </dependency>