Thymeleaf使用
系统要求
Java 8+
springBoot2.5 +
创建springBoot项目工程
导入依赖
编写ThymeleafController
package com.xiang.controller;
import org.springframework.http.HttpRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import javax.xml.soap.SAAJResult;
import java.util.Map;
/**
* Created by IntelliJ IDEA.
* User: xiang
* Date: 2021/10/15 17:21
*/
@Controller
public class ThymeleafController {
@RequestMapping("/th")
public String th(HttpServletRequest request, Model model, Map<String, Object> map) {
request.setAttribute("hello", "Hello ThymeleafController");
model.addAttribute("model", "model");
map.put("baidu", "https://www.baidu.com/");
return "thymeleaf";
}
@RequestMapping("/th2")
private String th2() {
return "thymeleaf2";
}
}
编写thymeleaf.html
<!DOCTYPE html>
<!--导入thymeleaf的命名空间 xmlns:th="http://www.thymeleaf.org"-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>thymeleaf</title>
</head>
<body>
<!--修改该标签的文本内容：th:text="内容"-->
<h2 th:text="${hello}"></h2>
<h2 th:text="${model}"></h2>
<h2 th:text="${baidu}"></h2>
<!--修改标签中的属性值：th:属性名=""-->
<a href="" th:href="${baidu}">${baidu} 点击跳转到百度</a>
<br>
<br>
<br>
<!--需要直接写好路径-->
<a th:href="@{https://www.baidu.com/}">点击跳转到百度</a>
<br>
<br>
<br>
<!--直接跳转到另一个页面，前提是页面在static目录中-->
<a th:href="@{/index.html}">@直接跳转到另一个页面,index</a>
<br>
<br>
<br>
<!--前面要写 / ，会跳转到controller层查找数据-->
<a th:href="@{th2}">跳转到thymeleaf2页面</a>
</body>
</html>
编写index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<h2 style="color: red">
index
</h2>
</body>
</html>
编写thymeleaf2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>thymeleaf2</title>
</head>
<body>
<h2 style="color: orangered">
thymeleaf2 页面；
</h2>
</body>
</html>
主程序运行 SpringBootThymeleafApplication
package com.xiang;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class SpringBootThymeleafApplication {
public static void main(String[] args) {
SpringApplication.run(SpringBootThymeleafApplication.class, args);
}
}
运行结果
目录结构
视图解析与模板引擎
试图解析理解：后台处理完请求跳转到某个页面的过程
模板引擎理解：
我们曾经使用jsp页面，好处就是可以用jsp技术在页面轻松实现数据的显示、交互等。
但是，SoringBoot的打包方式是jar包，jsp是不支持jar包的编译方式，也就是说SpringBoot是不支持jsp的。
那么就需要用到其他的模板引擎，来进行页面的渲染
thymeleaf简介
是服务端Java模板引擎
是一个高级语言的模板引擎，语法简单、功能强大
但是比较适合单体应用，不适合高并发的项目
基本语法
表达式
字面量
文本值：'one text' , ,…
数字：0 , 34 , 3.0 , 12.3 ,…
布尔值：true , false
空值：null
变量：one，two，.... 变量不能有空格
文本操作
字符串拼接：+
变量替换: |The name is ${name}|
数学运算
运算符: + , - , * , / , %
布尔运算
运算符：and , or
一元运算：! , not
比较运算
比较：> , < , >= , <= ( gt , lt , ge , le )
等式：== , != ( eq , ne )
条件运算
If-then：(if) ? (then)
If-then-else：(if) ? (then) : (else)
Default：(value) ? : (defaultvalue)
设置属性值
设置单个值
<form action="subscribe.html" th:attr="action=@{/subscribe}">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
</fieldset>
</form>
设置多个值
<img src="../../images/gtvglogo.png" th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
以上两个的代替写法 th:xxxx
<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>
<form action="subscribe.html" th:action="@{/subscribe}">