图片.png
1、基于“置顶-SpringBoot-最终整合”进行
2、在 webapp 目录下新建 css 目录，然后新建 style.css 文件
div.showing{
width:80%;
margin:20px auto;
border:1px solid grey;
padding:30px;
}
.even{
background-color: red;
}
.odd{
background-color: green;
}
3、在 webapp 目录下新建 js 目录，然后新建 thymeleaf.js 文件
function testFunction(){
alert("test Thymeleaf.js!");
}
3、控制器
package com.llhc.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/system")
public class TestThymeleafController {
/**
*
* Thymeleaf
* @author 开发者
*
*/
@RequestMapping("thy")
public String thy(Model model){
model.addAttribute("host","Thymeleaf");
return "hello";
}
}
4、在resources下的templates文件夹，创建hello.html
<!DOCTYPE HTML>
<!-- 声明当前文件是Thymeleaf，可以用th开头 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Thymeleaf</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="all" href="../../webapp/static/css/style.css" th:href="@{/static/css/style.css}"/>
<script type="text/javascript" src="../../webapp/static/js/thymeleaf.js" th:src="@{/static/js/thymeleaf.js}"></script>
<script>
testFunction();
</script>
</head>
<body>
<div class="showing">
<!-- 这种写法就是ONGL，与EL表达式一样 -->
<p th:text="${host}"></p>
<!-- 这种是用+号拼接 -->
<p th:text="'Hello' + ${host}"></p>
<!-- 这种是|拼接 -->
<p th:text="|Hello ${host}|"></p>
</div>
</body>
</html>
5、访问：http://localhost:8080/system/thy
图片.png
网友评论