1、添加thymeleaf框架
2、添加依赖
<!--springboot框架集成thymeleaf依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>3、变量表达式
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>标准变量表达式:${} -> (推荐)</h1>
用户编号:<span th:text="${user.id}"></span><br/>
用户姓名:<span th:text="${user.username}"></span><br/>
用户年龄:<span th:text="${user.age}"></span><br/>
<h1>选择变量表达式(星号表达式):*{} -> (不推荐)</h1>
<!--
*{}必须使用th:object属性来绑定这个对象
在div子标签中使用*来代替绑定的对象${user}
-->
<div th:object="${user}">
用户编号:<span th:text="*{id}"></span><br/>
用户姓名:<span th:text="*{username}"></span><br/>
用户年龄:<span th:text="*{age}"></span><br/>
</div>
<h1>标准变量表达式与选择变量表达式的混合使用(不推荐)</h1>
用户编号<span th:text="*{user.id}"></span><br/>
用户年龄<span th:text="*{user.age}"></span><br/>
用户姓名<span th:text="*{user.username}"></span><br/>
</body>
</html>路径表达式
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>URL路径表达式</title>
</head>
<body>
<h1>URL路径表达式:@{....}</h1>
<h2>a标签中的绝对路径(没有参数)</h2>
<a href="http://www.baidu.com">传统写法:跳转至百度</a><br/>
<a th:href="@{http://www.bjpowernode.com}">路径表达式:路径到动力节点</a><br/>
<a th:href="@{http://localhost:8080/user/detail1}">跳转至:/user/detail1</a><br/>
<a href="http://localhost:8080/user/detail1">传统写法跳转至:/user/detail1</a><br/>
<h2>URL路径表达式,相对路径[没有参数](实际开发中推荐使用的)</h2>
<a th:href="@{/user/detail1}">跳转至:/user/detail1</a><br/>
<h2>绝对路径(带参数)(不推荐使用)</h2>
<a href="http://localhost:8080/test?username='zhangsan'">绝对路径,带参数:/test,并带参数username</a><br/>
<a th:href="@{http://localhost:8080/test?username=zhangsan}">路径表达工写法,带参数:/test,并带参数username</a><br/>
<h2>相对路径(带参数)</h2>
<a th:href="@{/test?username=lisi}">相对路径,带参数</a>
<h2>相对路径(带参数:后台获取的参数值)</h2>
<!--/test?username=1001-->
<a th:href="@{'/test?username='+${id}}">相对路径:获取后台参数值</a>
<h2>相对路径(带多个参数:后台获取的参数值)</h2>
<!--
/test1?id=1001&username=zhaoliu&age=28
-->
<a th:href="@{'/test1?id='+${id}+'&username='+${username}+'&age='+${age}}">相对路径(带多个参数:后台获取的参数值)</a>
<a th:href="@{/test1(id=${id},username=${username},age=${age})}">强烈推荐使用:@{}相对路径(带多个参数:后台获取的参数值)</a><br/>
<a th:href="@{'/test2/'+${id}}">请求路径为RESTful风格</a><br/>
<a th:href="@{'/test3/'+${id}+'/'+${username}}">请求路径为RESTful风格</a><br/>
</body>
</html>常见属性
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>常见属性</title>
</head>
<body>
<form method="get" action="http://localhost:8080/test1">
用户编号:<input type="text" name="id" /><br/>
用户姓名:<input type="text" name="username" /><br/>
用户年龄<input type="text" name="age" /><br/>
<input type="submit" value="submit"/>
</form>
<form th:method="post" th:action="@{/test1}">
用户编号:<input type="text" id="id" th:name="id" /><br/>
用户姓名:<input type="text" th:id="username" th:name="username" /><br/>
用户年龄<input type="text" th:id="age" th:name="age" /><br/>
<input type="submit" value="submit"/>
</form>
<script type="text/javascript">
function test() {
alert("-----");
}
</script>
<button th:onclick="test()">submit111</button>
<button onclick="test()">submit222</button>
</body>
</html>
