SpringBoot的子项目: 需要依赖包:
<!-- springBoot的亲儿子 thymeleaf 相关四个依赖,可以设置松校验,热部署-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
</dependency>
<dependency>
<groupId>xml-apis</groupId>
<artifactId>xml-apis</artifactId>
</dependency>
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-ext</artifactId>
</dependency>
使用
1.resource目录下 创建 static 存放js css , 创建 templates 存放html
2.配置文件
# thymeleaf的配置
#关闭thymeleaf的缓存,热部署
spring.thymeleaf.cache=false
#松校验
spring.thymeleaf.mode=LEGACYHTML5
3.启动类 不要使用json返回, return 'index' ,会从template下面寻找对应的html文件渲染
@Controller
public class itemController {
@RequestMapping("index")
public String index(ModelMap modelMap){
List<String> arrayList = new ArrayList<>();
for (int i = 0; i < 5; i++) {
arrayList.add("循环数据:" + i);
}
modelMap.put("list",arrayList);
modelMap.put("hello","hello my thymeleaf !!@");
modelMap.put("ifcheck","1");
return "index";
}
}
4.html 文件需要引入thymeleaf 的约束
1.取值 <p th:text="${hello}"><p> 优先使用thymeleaf
2. 循环 <p th:each="str:${list}" th:text="${str}"> </p> 使用th:each把列表每一个赋值给 str 再使用 th:text 取值
3.支持三目运算 th:text="(${ifcheck}=='1')?'checked':''
4.input 勾选状态的判断 <input type="checkbox" th:checked="${ifcheck}==1">
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<h1>wyc !212</h1>
取值
<p th:text="${hello}"><p>
两种循环
<p th:each="str:${list}" th:text="${str}"></p>
<p th:each="str:${list}">
<input th:text="${str}" th:value="${str}" value="111"/>
</p>
判断-
<p th:if="1==2">我在不在</p>
<input type="checkbox" th:checked="${ifcheck}==1">
<input type="checkbox" th:text="(${ifcheck}=='1')?'checked':''">
<!--页面引入-->
<!--传值给java script-->
</body>
</html>
页面效果:
thymeleaf与javascript 传值
普通javascript 函数传一个字符串
<a href="javascript:f('abc')">点我1</a>
<!--页面引入-->
<script type="text/javascript">
function f(a) {
alert("ok !!!!"+a)
}
</script>
th 表示 需要 使用 \' 转义 表示后面 加入一个动态的参数
<button onclick="f()">点我1</button>
<a th:href="'javascript:f(\''+${hello}+'\')'">点我2</a>
<!--页面引入-->
<script type="text/javascript">
function f(a) {
alert("ok !!!!"+a)
}
</script>
th:onclick="'javascript:item(\''+${skuLsInfo.id}+'\')'"
thymeleaf 页面引入
被引入页面 indexinner.htlm :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<h1> 被引入的页面!!!</h1>
</body>
</html>
1.使用 th:include="indexinner" 引入它
<!--页面引入-->
<div th:include="indexinner">引入页面</div>
2.如果只引入部分页面 使用 <div th:fragment="innerPart"> </div> 需要被引入的部分起名:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Title</title>
</head>
<body>
<h1> 被引入的页面!!!</h1>
<div th:fragment="innerPart"> 被引入的部分页面!!!</div>
</body>
</html>
使用 th:include="indexinner :: innerPart" 引入它的部分
<div th:include="indexinner::innerPart">引入页面</div>
页面 不会显示 第一句话
如果还使用 <div th:include="indexinner">引入页面</div> 那么显示两句话
3.th:replace="indexinner"
与th:include="indexinner"类似但是
include只是将 <div th:fragment="innerPart"> 被引入的部分页面!!!</div> 其中的 "被引入的部分页面!!!" 这句话引入
replace 是完全将自己替换为引入的部分 使用replace后 --> <div > 被引入的部分页面!!!</div>