在pom.xml中加入如下依赖
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
在新建的html页面的 加入
xmlns:th="http://www.thymeleaf.org"
后端用model返回数据
咱们上面知道Thymeleaf通过特殊的标签来寻找属于Thymeleaf的部分,并渲染该部分内容,而除了上面展示过的th:text
之外还有很多常用标签,并且Thymeleaf也主要通过标签来识别替换对应位置内容,Thymeleaf标签有很多很多,功能也很丰富,这里列举一些比较常用的标签如下:
标签 | 作用 | 示例 |
---|---|---|
th:id | 替换id | <input th:id="${user.id}"/> |
th:text | 文本替换 | <p text:="${user.name}">bigsai</p> |
th:utext | 支持html的文本替换 | <p utext:="${htmlcontent}">content</p> |
th:object | 替换对象 | <div th:object="${user}"></div> |
th:value | 替换值 | <input th:value="${user.name}" > |
th:each | 迭代 | <tr th:each="student:${user}" > |
th:href | 替换超链接 | <a th:href="@{index.html}">超链接</a> |
th:src | 替换资源 | <script type="text/javascript" th:src="@{index.js}"></script> |
引入css
<link rel="stylesheet" th:href="@{index.css}">
引入JavaScript:
<script type="text/javascript" th:src="@{index.js}"></script>
超链接:
<a th:href="@{index.html}">超链接</a>
@GetMapping("index")//页面的url地址 public String getindex(Model model)//对应函数 { user user1=new user("bigsai",22,"一个幽默且热爱java的社会青年"); List<String>userList=new ArrayList<>(); userList.add("zhang san 66"); userList.add("li si 66"); userList.add("wang wu 66"); Map<String ,String>map=new HashMap<>(); map.put("place","博学谷"); map.put("feeling","very well"); //数据添加到model中 model.addAttribute("name","bigsai");//普通字符串 model.addAttribute("user",user1);//储存javabean model.addAttribute("userlist",userList);//储存List model.addAttribute("map",map);//储存Map return "index";//与templates中index.html对应 }
取List集合(each):
因为List集合是个有序列表,里面内容可能不止一个,你需要遍历List对其中对象取值,而遍历需要用到标签:th:each
,具体使用为<tr th:each="item:${userlist}">
,其中item就相当于遍历每一次的对象名,在下面的作用域可以直接使用,而userlist就是你在Model中储存的List的名称。完整的代码为:
<h2>List取值</h2> <table bgcolor="#ffe4c4" border="1"> <tr th:each="item:${userlist}"> <td th:text="${item}"></td> </tr> </table>
直接取Map:
很多时候我们不存JavaBean而是将一些值放入Map中,再将Map存在Model中,我们就需要对Map取值,对于Map取值你可以${Map名['key']}
来进行取值。也可以通过${Map名.key}
取值,当然你也可以使用${map.get('key')}
(java语法)来取值,完整代码如下:
<h2>Map取值</h2> <table bgcolor="#8fbc8f" border="1"> <tr> <td>place:</td> <td th:text="${map.get('place')}"></td> </tr> <tr> <td>feeling:</td> <td th:text="${map['feeling']}"></td> </tr> </table>
遍历Map:
如果说你想遍历Map获取它的key和value那也是可以的,这里就要使用和List相似的遍历方法,使用th:each="item:${Map名}"
进行遍历,在下面只需使用item.key
和item.value
即可获得值。完整代码如下:
<h2>Map遍历</h2> <table bgcolor="#ffe4c4" border="1"> <tr th:each="item:${map}"> <td th:text="${item.key}"></td> <td th:text="${item.value}"></td> </tr> </table>
变量表达式不仅可以写成${…},而且还可以写成*{…}。
但是,有一个重要的区别:星号语法对选定对象而不是整个上下文评估表达式。也就是说,只要没有选定的对象,美元(${…}
)和星号(*{...}
)的语法就完全一样。
什么是选定对象?使用th:object
属性的表达式的结果。就可以选定对象,具体实例如下:
<div th:object="${user}"> <p>Name: <span th:text="*{name}">赛</span>.</p> <p>Age: <span th:text="*{age}">18</span>.</p> <p>Detail: <span th:text="*{detail}">好好学习</span>.</p> </div>
当然*{…}
也可和${…}
混用。上面的代码如果不使用选定对象,完全等价于:
<div > <p>Name: <span th:text="*{user.name}">赛</span>.</p> <p>Age: <span th:text="${user.age}">18</span>.</p> <p>Detail: <span th:text="${user.detail}">好好学习</span>.</p> </div>