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}">