JavaWeb学习笔记(二)Thymeleaf

东城丶

于 2024-04-29 12:30:20 发布

阅读量798

点赞数 19

文章标签：学习笔记

本文链接：https://blog.csdn.net/qq_39451737/article/details/138307083

版权

Thymeleaf:

模板引擎

定义：

模板引擎是一种工具，用于将数据和UI模板结合起来，生成最终的HTML内容。

作用：

简化UI渲染过程，通过使用占位符或特定语法，将数据动态注入到预定义的UI模板中，生成最终的HTML页面。

使用:

适用

主要用于在服务器端渲染 HTML 模板并生成最终的 HTML 页面，适用于需要在服务器端生成动态内容的场景，如基于 Spring MVC 的 Web 应用、传统的多页面应用等。

导入

<html xmlns:th="http://www.thymeleaf.org">

基础语法
- 条件渲染：th:if
  - 是在服务器端渲染时执行的，它会根据给定的条件来确定是否在页面中包含该元素。
  - ```
  <div th:if="${condition}">
      
  </div>
```
- ${condition} 是表达式语言的写法，用于在服务器端解析和计算条件的值。
- 循环渲染：th:each
  - 可以遍历集合并为每个元素生成对应的 HTML 元素。它通常与 Thymeleaf 的表达式语法结合使用，可以在遍历过程中动态地获取集合中的元素的属性值。
  - ```
  <ul>
      <li th:each="user : ${users}">
          <span th:text="${user.name}">User Name</span>
      </li>
  </ul>
```
- th:each 属性用于迭代 ${users} 集合，并为每个用户生成一个列表项 <li>，其中 ${user.name} 用于动态获取每个用户的名称并显示在列表中。
- 属性绑定：th:attr
  - 用于动态设置 HTML 元素的属性值。通过 th:attr，你可以根据表达式的值来动态设置 HTML 元素的属性。
  - ```
  <div th:attr="class=${isBold ? 'bold' : ''}">Hello, World!</div>
```
- 当 isBold 的值为 true 时，该 <div> 元素会添加 class="bold" 属性，从而实现加粗显示；当 isBold 的值为 false 时，该属性将为空字符串，不会添加任何 class 属性，因此不会加粗显示。
- 文本内容绑定：th:text
  - 可以将 HTML 元素的文本内容设置为动态值，通常是从后端传递到前端的数据或是 Thymeleaf 表达式计算的结果。
  - ```
  <div th:text="${message}">Default Message</div>
```
- th:text 属性将 ${message} 的值动态地设置为 <div> 元素的文本内容，如果 message 变量不为空，则会显示该消息，否则会显示默认的 "Default Message"
- 事件绑定：th:onclick、th:onchange 等
  - th:onclick: 用于指定元素的点击事件处理程序。
  - th:onchange: 用于指定元素的变化事件处理程序，通常用于表单元素，比如输入框、下拉列表等，当元素的值发生变化时触发。
  - 这两个属性通常与 JavaScript 代码一起使用，可以在其中设置 JavaScript 函数或表达式，以定义元素的行为。
  - ```
  <button th:onclick="submitForm()">Submit</button>
  
  <select th:onchange="updateSelection()">
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
  </select>
```
- th:onclick 属性将点击按钮时执行名为 submitForm() 的 JavaScript 函数，th:onchange 属性将在选择框的选择发生变化时执行名为 updateSelection() 的 JavaScript 函数。
- 样式绑定：th:class、th:style 等
  - th:class: 用于动态设置元素的类。可以将多个类名作为属性值，也可以使用表达式来动态设置类名。
  - th:style: 用于动态设置元素的样式。可以直接指定 CSS 样式字符串，也可以使用表达式来动态设置样式。
  - 这两个属性可以使模板引擎更加灵活地根据数据的变化来改变元素的外观和样式。
  - ```
  <div th:class="${condition} ? 'active' : 'inactive'">Dynamic class</div>
  
  <div th:style="'color:' + ${color} + '; font-size:' + ${fontSize} + 'px'">Dynamic style</div>
```
- th:class 属性根据 ${condition} 表达式的值动态设置元素的类，th:style 属性根据 ${color} 和 ${fontSize} 变量的值动态设置元素的颜色和字体大小。
- ```

<div class="container" th:class="${condition} ? 'active' : 'inactive'">
    Dynamic class
</div>


<div style="color: red; font-size: 16px;" th:style="'color:' + ${color} + '; font-size:' + ${fontSize} + 'px'">
    Dynamic style
</div>
```
- 数据绑定：th:value、th:field 等
  - th:value：用于设置表单元素的值。你可以通过 th:value 属性来动态设置表单元素的值，通常是从后端传递的数据中获取的值。
  - ```
  <input type="text" th:value="${user.name}" />
```
- 会将后端传递过来的 user 对象中的 name 属性的值设置为输入框的默认值。
- th:field: 用于设置表单元素的名称（name属性）和值。th:field 通常用于处理表单的绑定和提交。它会同时设置表单元素的 name 属性和 value 属性。
- ```
<input type="text" th:field="*{user.name}" />
```
  - *{user.name} 表示从后端传递的表单对象中获取 name 属性的值，然后将其设置为输入框的值，并将其设置为输入框的名称（name 属性）。这样，在表单提交时，该输入框的值就会被正确地绑定到后端的 user 对象的 name 属性上
- 片段插入：th:insert、th:replace 等
- th:insert: 用于将指定的 HTML 片段插入到当前元素中。
- ```
<div th:insert="fragments/header :: header"></div>
```
- 会将 fragments/header.html 文件中的 header 片段插入到当前 <div> 元素内部。
- th:replace: th:replace 属性与 th:insert 类似，但它会完全替换当前元素而不是插入到当前元素中。
- ```
<div th:replace="fragments/footer :: footer"></div>
```
- 会将 fragments/footer.html 文件中的 footer 片段完全替换掉当前 <div> 元素。

页面跳转

进行页面跳转通常会导致整个页面重新加载，因为每次跳转都会向服务器发送请求，服务器会返回新的 HTML 页面，浏览器会重新加载并显示新页面。

<li class="menu_01_01"><a onclick="transitionTo('/yemian/yemian1');">页面1</a></li>

@RequestMapping(value = "", params = "transitionTo", method = RequestMethod.POST)
public String transitionTo(Model model, @RequestParam String transitionTo) {
	// 画面数据初期化
	return "redirect:" + transitionTo;
}

请求

使用HTML的<form> 元素来发送 POST 或 GET 请求。
POST 请求将数据放在请求体中发送到服务器，而 GET 请求将数据作为查询参数附加到 URL 上。
POST

<form action="/submit" method="post">
  <input type="text" name="name" placeholder="Enter your name">
  <button type="submit">Submit</button>
</form>

@PostMapping("/submit")
public String submit(@RequestParam("name") String name) {
   // 处理提交请求
   return "Submitted name: " + name;
}

GET

<form action="/search" method="get">
  <input type="text" name="keyword" placeholder="Enter keyword">
  <button type="submit">Search</button>
</form>

@GetMapping("/search")
public String search(@RequestParam("keyword") String keyword) {
    // 处理搜索请求
    return "Searching for: " + keyword;
}

东城丶

关注

19
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb学习笔记(二)Thymeleaf

JavaWeb学习笔记(二)Thymeleaf
复制链接

扫一扫

JavaWeb学习笔记(二)Thymeleaf

Thymeleaf:

模板引擎

定义：

作用：

使用:

适用

导入

基础语法

页面跳转

请求

“相关推荐”对你有帮助么？