Thymeleaf模板引擎的使用

• 一、简介
• 二、使用
• • 2.1 准备工作
  • 2.2 使用步骤

一、简介

thymeleaf的简介可以到官网上详细查看 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-is-thymeleaf

这里只摘录下来一部分： 什么是thymeleaf ?

Thymeleaf是一个现代服务器端Java模板引擎，适用于Web和独立环境，能够处理HTML，XML，JavaScript，CSS甚至纯文本。

Thymeleaf从一开始就考虑到了Web标准 - 特别是HTML5 - 允许您在需要时创建完全验证的模板。

特点 ： Thymeleaf选用 html 作为模板页，这是任何一款其他模板引擎做不到的！ Thymeleaf使用html通过一些特定标签语法代表其含义，但并未破坏html结构 ，即使无网络、不通过后端渲染也能在浏览器成功打开，大大方便界面的测试和修改。

二、使用

2.1 准备工作

使用的前提是 你已经下载了一些html页面(当然了你也可以选择自己纯手工写) ，我这里就选择下载一些，就比如我这里，已经成功的从bootstrap素材库中下载了一些前端的页面，这里只拿 index.html 这一个页面来举例说明。

2.2 使用步骤

1、导入依赖

        

        
            org.thymeleaf
            thymeleaf-spring5
        

        
        org.thymeleaf.extras
        thymeleaf-extras-java8time
        

2、将下载好的 html页面 导入到 templates 包下

3、在html页面(我这里以index.html为例)中 添加thymeleaf的命名空间
xmlns:th="http://www.thymeleaf.org"

4、根据thymeleaf模板引擎的要求来对html中的内容进行修改，进而实现静态资源在页面上的呈现
thymeleaf模板引擎的要求可以参考官网 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#what-is-thymeleaf



下面以修改其中的 link标签 超链接 为例，做一个简单的演示

5、 templates 包下的内容，是不能直接识别到的，必须通过controller跳转跳转来实现。

1. 编写 controller 来实现向 index.html 首页的跳转

   package com.kuang.controller;

   import org.springframework.stereotype.Controller; import org.springframework.stereotype.Repository; import org.springframework.web.bind.annotation.RequestMapping;

   @Controller public class IndexController {

   @RequestMapping({"/","/index.html"})
   public String index(){
       return "index";
   }

   }

2、向 index.html 跳转也可以通过 运用MVC扩展 部分的知识来实现
创建 config 包，并且在下面实现MVC扩展

MyMcConfig

package com.kuang.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {

//添加视图控制   根目录下的东西在这里配置会好一点 也可以在controller层进行视图的跳转
    @Override
    public void addViewControllers(ViewControllerRegistry registry){
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
}

6、启动项目，查看静态资源呈现出来的页面，全部呈现出来了，就表明成功