1. 快速入门
-
导入依赖
//jquery依赖
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.5.1</version>
</dependency>引用：
<script type="text/javascript" th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>-----------------------------------------------------------------------------------
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>配置 application.properties 文件
spring.thymeleaf.cache=false
#默认HTML
spring.thymeleaf.mode=HTML
#前缀
spring.thymeleaf.prefix=classpath:/templates/
#后缀
spring.thymeleaf.suffix=.htmlresources -> templates -> index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我的第一个thymeleaf程序</h1>
<p th:text = "${name}"></p>
</body>
</html>编写 Controller 控制器
@Controller
public class HelloController {
@RequestMapping("/index")
public String query(Model model){
model.addAttribute("name","威哥");
return "index";
}
}
2. 表达式
@{}
//控制器的路径
<a th:href="@{/index}">main</a>文本表达式
info = "天气真好"
<p th:text="'今天'+${info}"></p>
今天天气真好
---------------------------------
info = "天气真好"
info = ",我也是说"
<p th:text="'今天'+${info},{info2}"></p>
今天天气真好,我也是说数字表达式
num1 = 100 ; num2 = 50
<p th:text = "${num1}-${num2}"></p>
页面输出 50布尔表达式
<----- >
<----- <
<p th:if = "${num1} > ${num2}">显示或者不显示</p>
---------------------比较Null---------------------
<p th:if = "${num1} == null">null</p>
<p th:if = "${num1} eq null">null</p>三元运算符
<p th:text = "${num1} > 10000?'大于5':'小于10000'"></p>布尔设置
model.addAttribute("user",true);
-------------------------------------
<p><input type="checkbox" value="游泳" th:checked="${user}">游泳</p> //选中标签体文本
model.addAttribute("mes","<b>你好</b>");
<p th:utext="${mes}"></p> //会编译html代码3. each 循环使用
@RequestMapping("/index")
public String query(Model model){
List<Student> list = new ArrayList<>();
list.add(new Student("刘备",18,"男"));
list.add(new Student("关羽",22,"男"));
list.add(new Student("张飞",26,"男"));
model.addAttribute("student",list);
return "index";
} <tr th:each="stu,lo:${student}">
<td th:text="${lo.count}"></td> //排序 从1开始
<td th:text="${stu.name}"></td>
<td th:text="${stu.age}"></td>
<td th:text="${stu.sex}"></td>
</tr>解决红色波浪线
<!DOCTYPE html>
<!--suppress ALL-->5. js获取后台数据
//控制器
model.addAttribute("name","天津");
----------------------------------------------
<script type="text/javascript" th:inline="javascript">
var s = [[${name}]]
alert(s);
console.log(s);
</script>
//对象方式 遍历
model.addAttribute("student",student);
<script type="text/javascript" th:inline="javascript">
var s = [[${student}]]
for (var i = 0;i<s.length;i++){
var stu = s[i];
console.log(stu.name+" "+stu.sex+" "+stu.age);
}
</script>6. 内联方式获取后台数据
-
内联标签
直接可以打印输出到前台页面 [ [ $ { } ] ]
<P>内联方式获取数据:[[${name}]]</P>-
内联方式使用 utext 标签 [ ( $ { } ) ]
//后台还是一样的 model.addAttribute("name","<b>天津<b/>"); //前台直接输出 <P>内联方式获取数据:[(${name})]</P> -
日期格式 [ [ ${ #dates.format(参数值,'yyyy-MM-dd HH:mm:ss') } ] ]
格式日期:[[${#dates.format(name,'yyyy-MM-dd HH:mm:ss')}]]
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
