Thymeleaf一篇文章学会使用

Thymeleaf讲解

简介简介：

Thymeleaf 是新一代 Java 模板引擎，与 Velocity、FreeMarker 等传统 Java 模板引擎不同，Thymeleaf 支持 HTML 原型，其文件后缀为“.html”，因此它可以直接被浏览器打开，此时浏览器会忽略未定义的 Thymeleaf 标签属性，展示 thymeleaf 模板的静态页面效果；当通过 Web 应用程序访问时，Thymeleaf 会动态地替换掉静态内容，使页面动态显示。

创建项目再setting的Editor中的File and code Templates中创建，thymeleaf模板，方便以后的调用。

我们再点击新建的时候，就有了这个thymeleaf选项。

编码基础使用代码一（th:text）第一个语法通过，运行结果进行讲解。

代码语言：javascript复制

通过运行结果可以看出，当没有后端给前端发送数据的时候，这个前端显示的信息就是规定的默认信息。

现在加一个后端IndexController

代码语言：javascript复制package com.example.thymeleafdemo.controller;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

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

@Controller

public class IndexController {

@GetMapping("/index")

public String index(Model model){

model.addAttribute("title", "传递的Title");

return "index";

}

}

运行结果

通过运行的结果和观察源码，我们都可以发现，这个后端传递给前端的值，在前端生效了。

代码二（th:content）index.html

代码语言：javascript复制

IndexController

代码语言：javascript复制package com.example.thymeleafdemo.controller;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

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

@Controller

public class IndexController {

@GetMapping("/index")

public String index(Model model){

model.addAttribute("title", "传递的Title");

model.addAttribute("description", "传递的description");

model.addAttribute("keywords", "传递的keywords");

return "index"; // 对于html文件可以不写后缀名

}

}运行结果

通过这个运行结果，我们可以发现，这个content中的内容也更改了。

常用方法这里会演示下面这几个的用法

th:textth:ifth:objectth:eachth:switchUser

代码语言：javascript复制package com.example.thymeleafdemo.Bean;

import lombok.Data;

import java.util.Date;

import java.util.List;

@Data

public class User {

private String username;

private String password;

private Integer sex;

private Boolean isVip;

private Date birthday;

private List hobbys;

}IndexController

代码语言：javascript复制package com.example.thymeleafdemo.controller;

import com.example.thymeleafdemo.Bean.User;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

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

import java.util.ArrayList;

import java.util.Arrays;

import java.util.Date;

@Controller

public class IndexController {

@GetMapping("/index")

public String index(Model model){

model.addAttribute("title", "传递的Title");

model.addAttribute("description", "传递的description");

model.addAttribute("keywords", "传递的keywords");

return "index"; // 对于html文件可以不写后缀名

}

@GetMapping("/UserDemo")

public String UserDemo(Model model){

User user = new User();

user.setUsername("LIHUA");

user.setUsername("123456");

user.setSex(1);

user.setIsVip(true);

user.setBirthday(new Date());

user.setHobbys(Arrays.asList("PHP", "Java", "C++"));

model.addAttribute("user", user);

return "UserDemo";

}

}UserDemo.html

代码语言：javascript复制

会员

运行结果

通过运行结果可以知道，这些用法的具体效果展示。

thymeleaf中js与css的使用创建一个css文件

style.css

代码语言：javascript复制.box{

height: 200px;

width:200px;

background-color: pink;

}UserDemo.html

代码语言：javascript复制

其他效果，让最后一个列表变成红色。

index.html

代码语言：javascript复制

• th:text="${tag}"

  th:classappend="${state.last}?active"

  >

thymeleaf组件的使用第一部分 replace insert id这里演示了thymeleaf中组件的replace与insert的用法，还提到了另一种方式，就是用id替换fragment。

演示代码

component1.html

代码语言：javascript复制

index.html

代码语言：javascript复制

运行结果

从结果可以看出来，第一个是采取的replace的方式，这个方式之下，是直接用组件的内容，替换原来位子的内容的，然后另一个是insert的方式，在这个方式之下，是在原来的组件的前提之下，内部插入一个组件，然后还有一个id的方式，效果和第一个差不多。

传值第一种组件中也可以使用原来文本中数据对象。

代码演示

component1.html

代码语言：javascript复制

index.html

代码语言：javascript复制

运行结果

第二种index.html

代码语言：javascript复制

component1.html

代码语言：javascript复制

运行结果

第三种这种方式需要的是，写一行注释，不然的话会报错的

代码语言：javascript复制