# Springboot-thymeleaf **Repository Path**: salute83/springboot-thymeleaf ## Basic Information - **Project Name**: Springboot-thymeleaf - **Description**: Springboot 整合 thymeleaf - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2022-08-23 - **Last Updated**: 2023-06-03 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 参考网站 1. [Springboot 整合 thymeleaf](https://www.cnblogs.com/rqb0/p/16038378.html#:~:text=SpringBoot%E6%A1%86%E6%9E%B6%E4%B8%AD%E6%8F%90%E4%BE%9B%E4%BA%86%E5%AF%B9Thymeleaf%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8A%A0%E8%BD%BD%E9%85%8D%E7%BD%AE%EF%BC%8C%E5%9C%A8SpringBoot%E7%9A%84%E8%87%AA%E5%8A%A8%E9%85%8D%E7%BD%AE%E7%B1%BB%E5%8C%85%E4%B8%AD%EF%BC%8C%E6%9C%89%E4%B8%80%E4%B8%AA%20org.springframework.boot.autoconfigure.thymeleaf%20%E5%8C%85%EF%BC%8C%E5%AE%9A%E4%B9%89%E7%9A%84ThymeleafProperties%E7%B1%BB%E5%B0%B1%E6%98%AFthymeleaf%E7%9A%84%E8%87%AA%E5%8A%A8%E9%85%8D%E7%BD%AE%E7%B1%BB%EF%BC%8C%E5%85%B6%E4%B8%AD%E6%8C%87%E5%AE%9A%E4%BA%86thymeleaf%E6%A1%86%E6%9E%B6%E7%9A%84%E4%B8%80%E4%BA%9B%E9%BB%98%E8%AE%A4%E5%B1%9E%E6%80%A7%EF%BC%8C%E6%AF%94%E5%A6%82%E6%A8%A1%E6%9D%BF%E7%9A%84%E9%BB%98%E8%AE%A4%E8%B7%AF%E5%BE%84%E5%89%8D%E7%BC%80,classpath%3A%2Ftemplates%2F%20%EF%BC%8C%E4%BB%A5%E5%8F%8A%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6%E6%A0%BC%E5%BC%8F%E5%90%8E%E7%BC%80.html%20%E3%80%82) 2. [SpringBoot系列(六)集成thymeleaf详解版](https://www.cnblogs.com/swzx-1213/p/12726432.html) 3. [springboot中Thymeleaf的使用](https://www.jianshu.com/p/3426794a17cb) 4. [Springboot 整合 thymeleaf](http://docs.tumo.tycoding.cn/#/docs/boot/spring-boot-thymeleaf) ## thymeleaf 是什么 Thymeleaf 是一个跟 Velocity、FreeMarker 类似的模板引擎,它可以完全替代 JSP 。也就是说JSP中的特性在Thymeleaf几乎都有对应的支持。Thymeleaf支持HTML原型,通过Thymeleaf特殊的标签可以基本实现JSP中动态数据的展示效果。 ## Springboot 整合 thymeleaf ## 创建项目 1. 创建 `Springboot - Maven` 项目 2. 项目名称为:`Springboot-thymeleaf` ## 目录结构 ```text ├─main │ ├─java │ │ └─com │ │ └─test │ │ └─springboot │ │ └─thymeleaf │ │ ├─controller │ │ └─pojo │ └─resources │ ├─static │ └─templates └─test └─java └─com └─test └─springboot └─thymeleaf ``` ![image-20220823192513468](http://qiniu.83start.xyz//Images/image-20220823192513468.png) Thymeleaf 支持渲染HTML,因此通常我们使用的页面模板也就是HTML,同时它需要遵循一定的规则: 1. 比如在spring boot项目中,通常我们将Thymeleaf渲染的页面放在`resources/templates`目录下,这样Thymeleaf会默认识别。 2. 若想要在HTML页面中使用Thymeleaf,需要修改 ``为`` 3. 在spring boot项目中`resources/static`目录下的文件可通过浏览器直接访问,而`resources/templates`下的HTML不能通过浏览器直接访问,而需要Spring Mvc这样的框架映射到那个页面地址。 ### 导入依赖 ```xml org.projectlombok lombok org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-web ``` ### 修改配置文件 ```properties spring.thymeleaf.mode = LEGACYHTML5 spring.thymeleaf.encoding=UTF-8 spring.thymeleaf.content-type=text/html spring.thymeleaf.suffix=.html #开发时关闭缓存,不然没法看到实时页面 spring.thymeleaf.cache=false ``` 其中`spring.thymeleaf.mode = LEGACYHTML5`配置thymeleaf的模式,不要使用`spring.thymeleaf.mode = HTML5`,因为严格遵循HTML5规范会对非严格的报错,例如``,``标签没有结束``就会报错。 ### 创建路由控制类 > 在main/java目录下新建RouterController.java ```java package com.test.springboot.thymeleaf.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class RouterController { @GetMapping("/index") public String index(){ return "index"; } } ``` 这个`return "index"`中`index`是`templates`根目录下的`index.html`,如果是`templates/common/main.html`页面,就应该`return "/common/main.html"` ### 创建模板文件 > 在`main/resources/templates`目录下新建`index.html` ```html Title

Index

``` ### 访问页面 执行`main/java/ThymeleafApplication.java`启动类,用浏览器访问`localhost:8080/index` ![](.README_images/8b4a6cf5.png) ## thymeleaf 常用表达式 ### 变量表达式 变量表达式级即OGNL表达式或Spring EL表达式(在Spring术语中也叫做model attributes),例如: ```html ${user.username} ``` **案例:** 1. 修改`RouterController.java` ```java @Controller public class RouterController { @GetMapping("/index") public String index(Model model) { model.addAttribute("demo", "测试"); return "index"; } } ``` 2. 修改index.html ```java Title

Index


`${...}`表达式:
``` ### `*`号表达式 如果`model.addAttribute()`的是一个对象而不是字符串,就可以用`*`表达式分别获取`model`对象中的元素,如: 1. 创建实体类 ```java public class User implements Serializable { private String username; private String password; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } } ``` 2. 修改RouterController.java ```java @Controller public class RouterController { @GetMapping("/index") public String index(Model model) { model.addAttribute("demo", "测试"); User user = new User(); user.setUsername("tycoding"); user.setPassword("123"); model.addAttribute("user", user); return "index"; } } ``` 3. 修改index.html ```html `*{...}`表达式: ``` **注意:** 1. 使用`*{...}`表达式必须保证`*{}`在`th:object="${...}`标签的包裹下,且`*{...}`必须是`${...}`下的一个元素,否则报错。例如这样写是获取不到元素的: ```html `*{...}`表达式: 错误实例: ``` 2. 如果页面需要不在`th:object`包裹下获取对象中的元素,可以使用如下: ```java ``` ### URL 表达式 例如:会自动引入`resources/statis/css/`下的`base.css`文件 ```html ``` 这和JSP页面中使用,是一个道理。 ```java ``` ### 表达式支持的语法 **字面(Literals)** - 文本文字(Text literals): ‘one text’, ‘Another one!’,… - 数字文本(Number literals): 0, 34, 3.0, 12.3,… - 布尔文本(Boolean literals): true, false - 空(Null literal): null - 文字标记(Literal 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, or - 布尔否定(一元运算符)Boolean 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) 所有这些特征可以被组合并嵌套: ```java 'User is of type ' + (${user.isAdmin()} ? 'Administrator' : (${user.type} ?: 'Unknown')) ``` ### 常用的th 标签 img