SpringBoot 整合【Thymeleaf模板引擎】

目录 

1. Thymeleaf 是什么？

2. 为什么要使用Thymeleaf?

3. 使用Thymeleaf

3.1 jar包依赖 

3.2 在application.properties中配置thymleaf

4. Thymeleaf语法与案例操作

4.1 源码分析  

4.2 案例

4.2.1  th属性 

   4.2.2 实操

---

前言 

   Spring Boot 【模板引擎】thymeleaf 

• 什么是Thymeleaf ?
• 为什么要使用Thymeleaf ?
• 使用Thymeleaf步骤
• Thymeleaf语法详细
  • 源码分析
  • th属性

---

1. Thymeleaf 是什么？

简单说， Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎，它可以完全替代 JSP 。
从代码层次上讲：Thymeleaf是一个java类库，他是一个xml/xhtml/html5的模板引擎，可以作为mvc的web应用的view层。

2. 为什么要使用Thymeleaf?

使用jsp的弊端 

1. 项目目录结构繁琐
2. 页面不简洁
3. jsp内置错误页面不能覆盖springboot默认的错误页面
4. 只能打成war不能打成jar
5. 内置的jetty服务器不支持jsp

Thymeleaf的优点

1. 开箱即用，它提供标准和spring标准两种方言，可以直接套用模板实现JSTL、 OGNL表达式效果，避免每天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言；
2. Thymeleaf 提供spring标准方言和一个与 SpringMVC 完美集成的可选模块，可以快速的实现表单绑定、属性编辑器、国际化等功能。
3. 有网无网的情况下模版页面都可以执行，美工的页面拿来就可以用，相对jsp减少了额外的标签，页面也更加简洁。

注意：Spring-boot支持FreeMarker、Thymeleaf、jsp、veocity 。但是对freemarker和thymeleaf的支持最好，不推荐使用jsp 

3. 使用Thymeleaf

  3.1 jar包依赖 

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

   3.2 在application.properties中配置thymleaf

#  thymeleaf:
#    #前缀
#    prefix: classpath:/templates/
#    #后缀
#    suffix: .html
#    # 模板格式
#    mode: HTML5
#    encoding: UTF-8
#    servlet:
#      content-type: text/html
#    cache: false
#    check-template-location: true

1. prefix：指定模板所在的目录
2. check-tempate-location: 检查模板路径是否存在
3. cache: 是否缓存，开发模式下设置为false，避免改了模板还要重启服务器，线上设置为true，可以提高性能。
4. encoding&content-type：这个大家应该比较熟悉了，与Servlet中设置输出对应属性效果一致。
5. mode：这个还是参考官网的说明吧，并且这个是2.X与3.0不同。

spring.thymeleaf.mode = LEGACYHTML5

这个配置不是必须的，但是spring.thymeleaf.mode的默认值是HTML5，其实是一个很严格的检查，改为LEGACYHTML5可以得到一个可能更友好亲切的格式要求。

4. Thymeleaf语法与案例操作

4.1 源码分析  

     查看部分源码如下

@ConfigurationProperties(
    prefix = "spring.thymeleaf"
)
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING;
    //规则前缀
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    //规则后缀
    public static final String DEFAULT_SUFFIX = ".html";
	...
}

查看以上源码，thymeleaf的自动配置了规则前缀和后缀，所以只要我们把html页面放在calsspath:/templates/下，thymeleaf就能自动渲染。

4.2 案例

4.2.1  th属性 

html有的属性，Thymeleaf基本都有，而常用的属性大概有七八个。其中th属性执行的优先级从1~8，数字越低优先级越高。 

1. th:text ：设置当前元素的文本内容，相同功能的还有th:utext，两者的区别在于前者不会转义html标签，后者会。优先级不高：order=7
2. th:value：设置当前元素的value值，类似修改指定属性的还有th:src，th:href。优先级不高：order=6
3. th:each：遍历循环元素，和th:text或th:value一起使用。注意该属性修饰的标签位置，详细往后看。优先级很高：order=2
4. th:if：条件判断，类似的还有th:unless，th:switch，th:case。优先级较高：order=3
5. th:insert：代码块引入，类似的还有th:replace，th:include，三者的区别较大，若使用不恰当会破坏html结构，常用于公共代码块提取的场景。优先级最高：order=1
6. th:fragment：定义代码块，方便被th:insert引用。优先级最低：order=8
7. th:object：声明变量，一般和*{}一起配合使用，达到偷懒的效果。优先级一般：order=4
8. th:attr：修改任意属性，实际开发中用的较少，因为有丰富的其他th属性帮忙，类似的还有th:attrappend，th:attrprepend。优先级一般：order=5

使用Thymeleaf属性需要注意点以下五点： 

1. 若要使用Thymeleaf语法，首先要声明名称空间： xmlns:th="http://www.thymeleaf.org"
2. 设置文本内容 th:text，设置input的值 th:value，循环输出 th:each，条件判断 th:if，插入代码块 th:insert，定义代码块 th:fragment，声明变量 th:object
3. th:each 的用法需要格外注意，打个比方：如果你要循环一个div中的p标签，则th:each属性必须放在p标签上。若你将th:each属性放在div上，则循环的是将整个div。
4. 变量表达式中提供了很多的内置方法，该内置方法是用#开头，请不要与#{}消息表达式弄混。
5. th:insert，th:replace，th:include 三种插入代码块的效果相似，但区别很大。

如果在页面引用表达式变量报红色警告的就把下列代码引入该页面头部

   4.2.2 实操

• controller 

package com.jmh.springthymeleaf.conyroller;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * @author 蒋明辉
 * @data 2022/11/15 8:41
 */
@Controller
public class IndexConytroller {
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    class Dog{
        String id;
        String name;
        String sex;
        int age;
    }

    @RequestMapping("/")
    public ModelAndView index(){
        //实例对象modelAndView
        ModelAndView modelAndView=new ModelAndView();
        //1.将字符串保存到作用域里面
        modelAndView.addObject("name","蒋明辉");
        modelAndView.addObject("uname","蒋明辉是个大帅比");
        //2.将对象保存到作用域里面
        modelAndView.addObject("dog",new Dog("1","旺财","公",8));
        //3.将对象集合保存到作用域里面
        List dogs=new ArrayList<>();
        dogs.add(new Dog("1","旺财","公",18));
        dogs.add(new Dog("2","来福","公",28));
        dogs.add(new Dog("3","许杰","母",38));
        modelAndView.addObject("dogs",dogs);
        //4.将map集合保存到作用域里面
        Map map=new HashMap<>();
        map.put("Boss",new Dog("1","旺财","公",8));
        modelAndView.addObject("map",map);
        //5.绑定一个字符串
        modelAndView.addObject("itdragonStr","this is a DEMO");
        //跳转视图
        modelAndView.setViewName("index");
        return modelAndView;
    }
}

•  html

    
    


springboot整合thymeleaf模板引擎




姓名: 
年龄: 
性别: 



    

    

        
编号
        
姓名
        
年龄
        
性别
        
操作
    
    

    

        

        

        

        

        
删除/修改
    
    
    





...

#strings 

    
Old Str : 
    
toUpperCase : 
    
toLowerCase : 
    
equals : 
    
equalsIgnoreCase : 
    
indexOf : 
    
substring : 
    
replace : 
    
startsWith : 
    
contains : 

...

•  实操效果