【Spring Boot】Thymeleaf模板引擎

    科技2022-07-10  130

    文章目录

    一、前言二、Thymeleaf模板引擎三、Thymeleaf语法1. th:text&th:utext2.遍历一个集合3.表达式


    一、前言

    为什么要使用模板引擎? SpringBoot是以jar的方式,不是war方式,那么什么是JAR和WAR? JAR(Java Archive,Java 归档文件)是与平台无关的文件格式,它允许将许多文件组合成一个压缩文件。 WAR是一个可以直接运行的web模块,通常用于网站,打成包部署到容器中。以Tomcat来说,将war包放置在其\webapps\目录下,然后启动Tomcat,这个包就会自动解压,就相当于发布了。 SpringBoot用的是嵌入式的Tomcat,默认是不支持jsp,纯静态页面功能太少,我们需要用到模板引擎。什么是模板引擎? 模板引擎是为了使用户界面与业务数据(内容)分离而产生的。

    二、Thymeleaf模板引擎

    官网:https://www.thymeleaf.org/ 使用步骤:

    导入pom <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 创建test.html测试(再/resource/temple下创建)需要导入<html lang="en" xmlns:th="http://www.thymeleaf.org"> <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div th:text="${msg}"></div> </body> </html> Controller类测试: @Controller public class TestController { @RequestMapping("/test") public String test(Model model){ model.addAttribute("msg","This is a test"); return "test"; } } 效果:

    三、Thymeleaf语法

    可以参考官方使用文档:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf 可以看到一些使用规则:我们可以用th:attr来替换HTML中原生属性值

    1. th:text&th:utext

    传递一个内容里面有标签的数据:th:text不会管,th:utext则会转义这个标签

    @RequestMapping("/test") public String test(Model model){ model.addAttribute("msg","<h1>This is a test</h1>"); return "test"; }

    2.遍历一个集合

    Fragment iteration th:each官方文档写道用th:each

    传递一个集合:

    @RequestMapping("/test") public String test(Model model){ model.addAttribute("msg","<h1>This is a test</h1>"); //Arrays.asList()把一个数组转化为一个集合 model.addAttribute("students", Arrays.asList("小明","向辉","小红","李华")); return "test"; }

    test.html:

    <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:tiles="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div th:utext="${msg}"></div> <h2 th:each="student:${students}" th:text="${student}"></h2> <!--或<h2 th:each="student:${students}" >[[ ${student} ]]</h2> --> </body> </html>

    3.表达式

    Simple expressions: 表达式 Variable Expressions: ${…} 普通变量Selection Variable Expressions: *{…} 选择表达式Message Expressions: #{…} 获取国际化内容Link URL Expressions: @{…} 属性是urlFragment Expressions: ~{…}片段引用表达式 Literals字面量 Text literals: ‘one text’ , ‘Another one!’ ,… 单引号Number literals: 0 , 34 , 3.0 , 12.3 ,…Boolean literals: true , falseNull literal: nullLiteral tokens: one , sometext , main ,… Text operations: 文本操作 String concatenation: +Literal substitutions: |The name is ${name}| Arithmetic operations: 数学运算 Binary operators: + , - , * , / , %Minus sign (unary operator): - Boolean operations:布尔运算 Binary operators: and , orBoolean negation (unary operator): ! , not Comparisons and equality: 比较运算 Comparators: > , < , >= , <= ( gt , lt , ge , le )Equality operators: == , != ( eq , ne ) Conditional operators:条件运算:三元运算符 If-then: (if) ? (then)If-then-else: (if) ? (then) : (else)Default: (value) ?: (defaultvalue) Special tokens: No-Operation: _
    Processed: 0.010, SQL: 8