【SpringBoot】| Thymeleaf 模板引擎

目录

Thymeleaf 模板引擎

1. 第一个例子

2. 表达式

①标准变量表达式

②选择变量表达式(星号变量表达式)

③链接表达式(URL表达式)

3. Thymeleaf的属性

①th:action

②th:method

③th:href

④th:src

⑤th:text

⑥th:style

⑦th:each (重点)

⑧条件判断 if-unless

⑨switch-case 判断语句

⑩th:inline内联

内联 text

内联javascript

4. 字面量

5.字符串连接(重要)

6. 运算符

7. Thymeleaf内置对象

8. Thymeleaf内置工具类对象

9.自定义模板(内容复用)

模板语法

插入模板和包含模板

整个html页面作为模板插入 

图书推荐:《巧用ChatGPT轻松玩转新媒体运营》


Thymeleaf 模板引擎

        Thymeleaf 是一个流行的模板引擎,该模板引擎采用 Java 语言开发。

        模板引擎是一个技术名词,是跨领域跨平台的概念,在 Java 语言体系下有模板引擎,在 C#、PHP 语言体系下也有模板引擎,甚至在 JavaScript 中也会用到模板引擎技术,Java 生态下 的模板引擎有 Thymeleaf 、Freemaker、Velocity、Beetl(国产) 等。

        Thymeleaf 对网络环境不存在严格的要求,既能用于 Web 环境下,也能用于非 Web 环境 下。在非 Web 环境下,他能直接显示模板上的静态数据;在 Web 环境下,它能像 Jsp 一样从 后台接收数据并替换掉模板上的静态数据。它是基于 HTML 的,以 HTML 标签为载体, Thymeleaf 要寄托在 HTML 标签下实现。

        Spring Boot 集成了 Thymeleaf 模板技术,并且 Spring Boot 官方也推荐使用 Thymeleaf 来 替代 JSP 技术,Thymeleaf 是另外的一种模板技术,它本身并不属于 Spring Boot,Spring Boot 只是很好地集成这种模板技术,作为前端页面的数据展示,在过去的 Java Web 开发中,我们 往往会选择使用 Jsp 去完成页面的动态渲染,但是 jsp 需要翻译编译运行,效率低 。

Thymeleaf 的官方网站:Thymeleaf

Thymeleaf 官方手册:Tutorial: Using Thymeleaf

1. 第一个例子

①创建项目,引入web和thymeleaf依赖

【SpringBoot】| Thymeleaf 模板引擎_第1张图片

②pom.xml主要依赖



    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.7.15
         
    
    com.zl
    springboot-myredis
    0.0.1-SNAPSHOT
    springboot-myredis
    springboot-myredis
    
        1.8
    
    
        
        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-devtools
            runtime
            true
        
        
            org.springframework.boot
            spring-boot-configuration-processor
            true
        
        
            org.projectlombok
            lombok
            true
        
        
            org.springframework.boot
            spring-boot-starter-test
            test
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
                
                    
                        
                            org.projectlombok
                            lombok
                        
                    
                
            
        
    


③Controller编写存放数据

package com.zl.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import javax.servlet.http.HttpServletRequest;

@Controller
public class HelloThymeleafController {
    @GetMapping("/hello")
    public String helloThymeleafController(HttpServletRequest request){
        // 添加数据到request域当中,模板引擎可以从request域当中获取
        request.setAttribute("data","第一个Thymeleaf数据");
        // 返回到视图(html)
        return "hello";
    }
}

④视图hello.html取出数据(放到templates中)





    
    Title



想显示的数据

⑤进行访问

【SpringBoot】| Thymeleaf 模板引擎_第2张图片

模板引擎的常用配置

思考:为什么controller返回一个字符串就可以直接找到templates下的对应html呢?这些和模板引擎的默认设置是有关的!

application.properties配置

注:在开发阶段只需要把cache设置为false即可,其它都是默认选项不需要修改!

#开发阶段设置为 false ,上线后设置为 true,默认是true走缓存
spring.thymeleaf.cache=false
# 设置模版文件的路径,前缀,默认就是classpath:/templates/
spring.thymeleaf.prefix=classpath:/templates/ 
# 设置后缀,默认就是 .html
spring.thymeleaf.suffix=.html
#编码方式,默认就是UTF-8,所以中文不会乱码
spring.thymeleaf.encoding=UTF-8
#模板的类型,默认是HTML,模板是html文件
spring.thymeleaf.mode=HTML

2. 表达式

表达式是在页面获取数据的一种 thymeleaf 语法。类似 ${key} 。

①标准变量表达式

注意:th:text="${key}" 是 Thymeleaf 的一个属性,用于文本的显示。

语法: ${key} 。

说明:标准变量表达式用于访问容器(tomcat)上下文环境中的变量,功能和 EL 中的 ${} 相 同。Thymeleaf 中的变量表达式使用 ${变量名} 的方式获取 Controller 中 model 其中的数据。 也就是 request 作用域中的数据

准备Student数据

package com.zl.pojo;

public class Student {
    private String name;
    private Integer age;

    public Student(String name, Integer age) {
        this.name = name;
        this.age = age;
    }

    public Student() {
    }

    @Override
    public String toString() {
        return "Student{" +
                "name='" + name + '\'' +
                ", age=" + age +
                '}';
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }
}

欢迎页面index.html放入静态资源static下,不走模板引擎




    
    Title


标准变量表达式

application.properties

#配置端口号
server.port=8082
#开发阶段设置为 false ,上线后设置为 true,默认是true走缓存
spring.thymeleaf.cache=false

controller存放数据,跳转到expression1

package com.zl.controller;

import com.zl.pojo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafExpressionController {
    @GetMapping("/expression1")
    public String expression1(Model model){
        // 添加数据
        model.addAttribute("student",new Student("Jack",18));   
        // 跳转到视图 
        return "expression1";
    }
}

expression1.html接收数据

注:${student.getName()}也能获取到值,底层实际上就是调用对应的Get方法!




    
    expression1


执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第3张图片

②选择变量表达式(星号变量表达式)

语法:*{key} 。

说明:不能单独使用,需要配和 th:object 一起使用。选择变量表达式,也叫星号变量表达式,使用 th:object 属性来绑定对象,选择表达式首先使用 th:object 来绑定后台传来的对象,然后使用 * 来代表这个对象,后面 {} 中的值是此对象中的属性。可以简化上述的开发。

欢迎页面




    
    Title


标准变量表达式
选择变量表达式

controller存放数据

    @GetMapping("/expression2")
    public String expression2(Model model){
        model.addAttribute("student",new Student("Jack",18));
        return "expression2";
    }

expression2.html取出数据:使用th:object +*{key}简化上述的开发




    
    expression2


    
    

③链接表达式(URL表达式)

语法:@{链接 url} 。

说明:主要用于链接、地址的展示,可用于 

⑤th:text

用于文本的显示,该属性显示的文本在标签体中,如果是文本框,数据会在文本框外显示, 要想显示在文本框内,使用 th:value

 

⑥th:style

设置样式

点击我 

例1:

第一步:欢迎页面

模板的属性

第二步:controller准备数据

package com.zl.controller;

import com.zl.pojo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafExpressionController {
    @GetMapping("/property")
    public String useProperty(Model model){
        model.addAttribute("methodAttr","post");
        model.addAttribute("id","123");

        model.addAttribute("userName","Jack");
        model.addAttribute("userValue","lisi");
        
        return "html-property";
    }
}

第三步:html-property.html获取数据




    
    模板的属性


    

F12查看

【SpringBoot】| Thymeleaf 模板引擎_第4张图片

⑦th:each (重点)

这个属性非常常用,比如从后台传来一个对象集合那么就可以使用此属性遍历输出,它与 JSTL 中的类似,此属性既可以循环遍历集合,也可以循环遍历数组及 Map!

例2:循环list集合或数组

第一步:欢迎页面

循环遍历List

第二步:controller准备数据

package com.zl.controller;

import com.zl.pojo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.ArrayList;
@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafExpressionController {
    @GetMapping("/eachList")
    public String eachList(Model model){
        // 准备数据
        ArrayList studentList = new ArrayList<>();
        Student s1 = new Student("zhangsan", 18);
        Student s2 = new Student("lisi", 20);
        Student s3 = new Student("wangwu", 22);
        studentList.add(s1);
        studentList.add(s2);
        studentList.add(s3);
        // 放入域当中
        model.addAttribute("students",studentList);
        return "student-list";
    }

}

第三步:student-list.html获取数据




    
    eachList



姓名 年龄

补充:实际上完整的遍历格式如下:

循环的状态变量,可以定义也可以不定义,通过该变量可以获取如下信息 :

①index: 当前迭代对象的 index(从 0 开始计算);

②count: 当前迭代对象的个数(从 1 开始计算)这两个用的较多;

③size: 被迭代对象的大小;

④current: 当前迭代变量,stuState.current就相当于循环变量stu;

⑤even/odd: 布尔值,当前循环是否是偶数/奇数(从 0 开始计算);

⑥first: 布尔值,当前循环是否是第一个;

⑦last: 布尔值,当前循环是否是最后一个;

例如:获取当前迭代对象的个数

注意:循环体信息 userStat 也可以不定义,则默认采用迭代变量加上 Stat 后缀,即

userStat。




    
    eachList



序号 姓名 年龄

执行结果

【SpringBoot】| Thymeleaf 模板引擎_第5张图片

例3:循环map集合

以key和value的方式存放数据

    @GetMapping("/eachMap")
    public String eacMap(Model model){
        // 准备数据
        HashMap studentHashMap = new HashMap<>();
        Student s1 = new Student("zhangsan", 18);
        Student s2 = new Student("lisi", 20);
        Student s3 = new Student("wangwu", 22);
        studentHashMap.put("s1",s1);
        studentHashMap.put("s2",s2);
        studentHashMap.put("s3",s3);
        // 放入域当中
        model.addAttribute("studentHashMap",studentHashMap);
        return "student-map";
    }

取出数据

①调用循环变量的key属性拿到Map集合的key;

②调用循环变量的value属性拿到Map集合的value,此时拿到的value是Java对象,可以继续点下去取里面的成员变量属性;




    
    eachList



执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第6张图片

例4:List复杂的List和Map集合的嵌套

存入两个map集合的数据到list集合

    @GetMapping("/eachListMap")
    public String eachListMap(Model model){
        // 准备一个listmap
        List> listmap = new ArrayList<>();
        // 第一个map1数据
        HashMap map1 = new HashMap<>();
        Student s1 = new Student("zhangsan", 18);
        Student s2 = new Student("lisi", 20);
        map1.put("s1",s1);
        map1.put("s2",s2);
        // 第二个map2数据
        HashMap map2 = new HashMap<>();
        Student s3 = new Student("Jack", 22);
        Student s4 = new Student("Rose", 22);
        map2.put("s3",s3);
        map2.put("s4",s4);
        // 把map集合放入list集合当中
        listmap.add(map1);
        listmap.add(map2);
        // 放入域当中
        model.addAttribute("listmap",listmap);
        return "student-listmap";
    }

两层each循环取出数据




    
    eachList



执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第7张图片

⑧条件判断 if-unless

"th:if" : 判断语句,当条件为true,显示html标签体内,反之不显示 没有else语句。 

语法:th:if=”boolean 条件” , 条件为 true 显示体内容 
      th:unless 是 th:if 的一个相反操作,条件为 false 显示体内容  

第一步:index.html

判断语句if-unless

第二步:controller发出请求

    @GetMapping("/ifunless")
    public String ifUnless(Model model){
        // 有正常数据
        model.addAttribute("sex","m");
        // 数据为空字符串
        model.addAttribute("name","");
        // 数据为null
        model.addAttribute("isOld",null);
        return "if-unless";
    }

第三步:前端进行判断




    
    条件判断if-unless


我是男孩子

name是""

isOld是null

isOld是null------

执行结果:

①if是条件为true显示结果,unless是条件为假显示结果;

②空字符串“”会被当做true来处理;

③nulll会被当做fale处理;

【SpringBoot】| Thymeleaf 模板引擎_第8张图片

⑨switch-case 判断语句

语法:类似 java 中的 switch,case;最多只能有一个case匹配成功。

结果1

结果2

默认结果

以上的case只有一个语句执行

controller存储数据

    @GetMapping("/switchcase")
    public String switchCase(Model model){
        model.addAttribute("a","m");
        model.addAttribute("b","f");
        model.addAttribute("c","mf");
        return "swicth-case";
    }
    

html取出数据并判断




    
    swicth-case条件判断


未知


未知


未知

执行结果:

总结:一旦某个 case 判断值为 true,剩余的 case 则都当做 false,“*”表示默认的case,前面的case 都不匹配时候,执行默认的 case。

【SpringBoot】| Thymeleaf 模板引擎_第9张图片

⑩th:inline内联

th:inline 有三个取值类型 (text, javascript 和 none) !none就表示无的意思。

内联 text

可以让 Thymeleaf 表达式不依赖于 html 标签,直接使用内敛表达式[[表达式]]即可获取动 态数据,要求在父级标签上加 th:inline = “text”属性。 

 controller存储数据

package com.zl.controller;

import com.zl.pojo.Student;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

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

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafExpressionController {
    @GetMapping("/inline/text")
    public String inlineText(Model model){
        model.addAttribute("name","Jack");
        model.addAttribute("age",22);
        return "inline-text";
    }
}

使用内联text取出数据

第一步:父级标签上加 th:inline = “text”;实际上这部分可以省略。

第二步:使用[[${变量的方式}]]。




    
    inline-text



[[${age}]]

成功取出数据

【SpringBoot】| Thymeleaf 模板引擎_第10张图片

内联javascript

就是在 js 中,获取模版中的数据! 

 使用内联javascript取出上述存取的数据

第一步:引入script标签,在标签中引入th:inline = “javascript”;

第二步:在js中取出数据,取出方式和内联text相同;




    
    inline-text






执行结果

【SpringBoot】| Thymeleaf 模板引擎_第11张图片

4. 字面量

①文本字面量,单引号'...'包围的字符串为文本字面量;

②数字字面量;

③boolean字面量;

④null字面量;

 第一步:欢迎页面index.html

字面量

第二步:域中存数据

    @GetMapping("/text")
    public String text(Model model){
        model.addAttribute("sex","m");
        model.addAttribute("isLogin",true);
        model.addAttribute("age",10);
        model.addAttribute("name",null);
        model.addAttribute("city","北京");
        return "text";
    }

第三步:取出数据




    
    字面量



我的城市是[[${city}]]

age>8

登陆了

name是null

执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第12张图片

5.字符串连接(重要)

第一种方式: 使用 单引号括起来字符串 , 使用 + 连接其他的 字符串或者表达式;

 

数据显示

第二种方式:使用双竖线||,例如:|字符串内容|;

显示数据

controllelr存储数据

    @GetMapping("/stringbuf")
    public String stringBuf(Model model){
        model.addAttribute("name","Jack");
        model.addAttribute("age",45);
        model.addAttribute("student",new Student("张三",16));
        return "stringbuf";
    }

进行字符串的拼接




\

字符串的拼接

执行结果

【SpringBoot】| Thymeleaf 模板引擎_第13张图片

6. 运算符

①算术运 算: + ,  - , * , / , %
②关系比较 : > , < , >= , <= ( gt , lt , ge , le )
③相等判断: == , != ( eq , ne )

④三元运算符:表达式  ? true的结果 : false的结果

controller存储数据

    @GetMapping("/data")
    public String data(Model model){
        model.addAttribute("name1",null);
        model.addAttribute("name2","Jack");
        model.addAttribute("age",18);
        model.addAttribute("isLogin",true);
        return "data";
    }

进行数据的运算符比较

注:对于内层嵌套的三元运算符,内层嵌套的不用${}。




    
    运算符的比较


年龄大于10

年龄大于10

name1是null

name2不是null

执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第14张图片

7. Thymeleaf内置对象

模板引擎提供了一组内置的对象,这些内置的对象可以直接在模板中使用,这些对象由#

号开始引用,我们比较常用的内置对象:

①#request 表示 HttpServletRequest ;

②#session 表示 HttpSession 对象; 

③session  本质上是一个Map集合,是#session的简单表示方式,用来获取session中指定的key的值;

#session.getAttribute("loginname") == session.loginname

controller存数据

    @GetMapping("/baseObject")
    public String baseObject(Model model, HttpServletRequest request,
                             HttpSession session){
        model.addAttribute("name","Jack");
        request.setAttribute("requestData","request作用域中的对象");
        session.setAttribute("sessionData","session作用域中的对象");
        return "baseObject";
    }

一:获取作用域中的数据




    
    内置对象


    

执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第15张图片

思考:剖析session对象;实际上session对象本质上是一个Map,存入的数据以key和value的形式存储,所以session.key的方式底层实际上就是调用map.get(key)的方式取出value数据

【SpringBoot】| Thymeleaf 模板引擎_第16张图片

二:使用内置对象的方法

①getRequestURL(),获取完整的地址信息(不包含参数);

②getRequestURI(),获取地址信息(不包含IP地址、端口号、参数);

③getQueryString(),获取参数信息;

④getContextPath(),获取根路径;

⑤getServerName(),获取IP地址;

⑥getServerPort(),获取端口号;




    
    内置对象


    

执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第17张图片

8. Thymeleaf内置工具类对象

①模板引擎提供的一组功能性内置对象,可以在模板中直接使用这些对象提供的功能方法;

②工作中常使用的数据类型,如集合,时间,数值,可以使用 Thymeleaf 的提供的功能性对 象来处理它们;

③内置功能对象前都需要加#号内置工具类对象一般都以 s 结尾

官方手册:Tutorial: Using Thymeleaf

Cat类

package com.zl.vo;

public class Cat {
    private String name;

    public Cat() {
    }

    public Cat(String name) {
        this.name = name;
    }

    @Override
    public String toString() {
        return "Cat{" +
                "name='" + name + '\'' +
                '}';
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

Dog类

package com.zl.vo;

public class Dog {
    private String name;

    public Dog() {
    }

    public Dog(String name) {
        this.name = name;
    }

    @Override
    public String toString() {
        return "Dog{" +
                "name='" + name + '\'' +
                '}';
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

Zoo类

package com.zl.vo;

public class Zoo {
    private Cat cat;
    private Dog dog;
    public Zoo() {
    }

    public Zoo(Cat cat, Dog dog) {
        this.cat = cat;
        this.dog = dog;
    }

    @Override
    public String toString() {
        return "Zoo{" +
                "cat=" + cat +
                ", dog=" + dog +
                '}';
    }

    public Cat getCat() {
        return cat;
    }

    public void setCat(Cat cat) {
        this.cat = cat;
    }

    public Dog getDog() {
        return dog;
    }

    public void setDog(Dog dog) {
        this.dog = dog;
    }
}

 controller存数据

package com.zl.controller;

import com.zl.pojo.Student;
import com.zl.vo.Cat;
import com.zl.vo.Dog;
import com.zl.vo.Zoo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.security.PublicKey;
import java.util.*;

@Controller
@RequestMapping("/thymeleaf")
public class ThymeleafExpressionController {
    @GetMapping("/utilObject")
    public String utilObject(Model model){
        model.addAttribute("mydate",new Date());
        model.addAttribute("number",32.636);
        model.addAttribute("str","hello");
        List list = Arrays.asList("Jack","Rose","King");
        model.addAttribute("list",list);
        
        Cat cat = new Cat("小猫");
        Dog dog = new Dog("二哈");
        zoo.setCat(cat);
        // zoo.setDog(dog);
        model.addAttribute("zoo",zoo);
        
        return "utilObject";
    }
}
  

一:#dates---处理日期的




    
    内置工具类对象


日期工具类对象#dates

执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第18张图片

二:#numbers---处理数字的




    
    内置工具类对象


数字工具类对象#dates

执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第19张图片

三:#strings---处理字符串的




    
    内置工具类对象


字符串工具类对象#strings

执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第20张图片

四:#lists---处理集合的




    
    内置工具类对象


集合工具类对象#lists

list集合包含Rose

执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第21张图片

五:null处理

正常取出数据




    
    内置工具类对象


处理null

 执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第22张图片

思考:如果此时对于cat没有赋上值

【SpringBoot】| Thymeleaf 模板引擎_第23张图片

此时会出现500错误(服务器内部错误)

【SpringBoot】| Thymeleaf 模板引擎_第24张图片

实际上是出现了空引用,如何避免呢?

在引用的后面使用问号?,如果引用存在就可以向下取属性;如果当前引用为空,直接不显示结果!

 执行结果:

【SpringBoot】| Thymeleaf 模板引擎_第25张图片

9.自定义模板(内容复用)

自定义模板是复用的行为;可以把一些内容,多次重复使用!

模板语法

对于一个自定义模板的使用,主要包括两部分:

定义模板

模板定义语法:th:fragment="模板自定义名称"

大连

www.dlu.com

使用模板

引用模板语法: ~{templatename :: selector} 或者 templatename :: selector

①其中templatename:  文件名称,selector: 自定义模板名称;

②对于使用模板:有包含模板(th:include), 插入模板(th:insert);

插入模板和包含模板

注:对于插入模板可以理解为整体的插入,对于包含模板可以理解为整体的替换!

第一步:模板的定义

head.html




    
    Title


www.baidu.com

百度官网

第二步:欢迎页面index.html

自定义模板

第三步:controller跳转到customtpl页面

    @GetMapping("/customtpl")
    public String customtpl(){
        return "customtpl";
    }

 第四步:customtpl页面使用插入模板和包含模板

①插入模板




    
    Title


插入模板insert


执行结果:成功插入原来html页面的内容

【SpringBoot】| Thymeleaf 模板引擎_第26张图片

F12打开前端代码分析:嵌套进去

【SpringBoot】| Thymeleaf 模板引擎_第27张图片

②包含模板

包含模板include


F12打开前端代码分析:完全替换

【SpringBoot】| Thymeleaf 模板引擎_第28张图片

整个html页面作为模板插入 

 footer.html




    
    Title


footer.html @www.baidu.com

此时把整个footer.html页面插入到 customtpl页面

注:前面主要是将某一个代码片段引入到其它页面,这里讲解的是将整个html页面引入到其它页面。

语法格式:

省略后缀名




    
    Title


引入整个footer.html到此页面

成功引入:

【SpringBoot】| Thymeleaf 模板引擎_第29张图片

思考:以上是同级目录下的整个html页面的引入,如果是其它目录呢? 

在templates目录下有一个common目录,common目录下有一个left.html

【SpringBoot】| Thymeleaf 模板引擎_第30张图片

left.html 




    
    Title


 

我是一个标签

引入其它目录下的页面到此页面




    
    Title


引入其它目录下的页面到此页面

执行结果:成功引入

【SpringBoot】| Thymeleaf 模板引擎_第31张图片

图书推荐:《巧用ChatGPT轻松玩转新媒体运营》

本次送书 2本! 
活动时间:截止到 2023-10-12 00:00:00。

抽奖方式:利用程序进行抽奖。

参与方式:关注博主(只限粉丝福利哦)、点赞、收藏,评论区随机抽取,最多三条评论!

关键点

★超实用 通过80多个实战案例和操作技巧,使读者能够快速上手并灵活运用ChatGPT技术及提高运营能力。

★巨全面 涵盖10多个新媒体领域,文案写作+图片制作+社交媒体运营+爆款视频文案+私域推广+广告策划+电商平台高效运营等。

★真好懂 以通俗易懂的语言解释ChatGPT的原理及应用,轻松提高新媒体运营能力。

★高回报 学习本书,全面提升运营能力,大大提高工作效率,促进职业发展,实现自我价值。

内容简介

本书从ChatGPT的基础知识讲起,针对运营工作中的各种痛点,结合实战案例,如文案写作、图片制作、社交媒体运营、爆款视频文案、私域推广、广告策划、电商平台高效运营等,手把手教你使用ChatGPT进行智能化工作。此外,还介绍了通过ChatGPT配合Midjourney、D-ID等AI软件的使用,进一步帮助提高运营工作的效率。

本书内容通俗易懂,案例丰富,实用性较强,特别适合想要掌握ChatGPT对话能力的读者和各行各业的运营人员,如互联网运营人员、自媒体运营人员、广告营销人员、电商运营人员等。 另外,本书也适合作为相关培训机构的教材使用。

【SpringBoot】| Thymeleaf 模板引擎_第32张图片

当当网链接:当当图书

京东的链接:京东安全

你可能感兴趣的:(第五步:互联网分布式,spring,boot,后端,java)