**基于
Thymeleaf的Spring Boot CRUD应用程序实验教学方案**
**实验目的：**
本实验旨在通过构建一个基于
Thymeleaf模板引擎的Spring Boot CRUD应用程序，让学生掌握
Thymeleaf的基本语法、用法及其与Spring Boot的集成。通过该实验，学生将学会如何使用
Thymeleaf来展示
数据、处理表单、实现国际化等功能。
**实验要求：**
1. 掌握Spring Boot支持的视图技术；
2. 掌握
Thymeleaf的基本语法与用法；
3. 能够通过
Thymeleaf展示
数据并进行增删改查操作；
4. 掌握
Thymeleaf的国际化配置，实现不同语言的页面展示。
**实验准备：**
1. 确保已安装JDK、IDE（如IntelliJ IDEA、Eclipse）并设置好Spring Boot开发环境；
2. 熟悉Spring Boot的基本结构，能够创建一个Spring Boot项目；
3. 确保已引入
Thymeleaf依赖，并了解其工作原理。
**实验参考步骤：**
---
### **步骤 1：Spring Boot 支持的视图技术**
1. **目标**：了解Spring Boot支持的视图技术，掌握
Thymeleaf作为默认视图引擎的使用方式。
2. **操作**：
- 在Spring Boot中，`spring-boot-starter-
thymeleaf`是默认集成的视图技术。
- 了解Spring Boot支持的视图技术，如JSP、Freemarker、Mustache等，重点学习
Thymeleaf的优势（如模板语法简洁、与Spring兼容性好）。
- 在`pom.xml`中确认是否已经加入
Thymeleaf依赖：
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-
thymeleaf</artifactId>
</dependency>
```
3. **验证**：
- 创建一个基本的Spring Boot项目，启动应用并访问`/templates`目录下的
Thymeleaf页面。
---
### **步骤 2：
Thymeleaf 基本语法**
1. **目标**：掌握
Thymeleaf的基本语法，能够理解和使用常用的
Thymeleaf标签和表达式。
2. **操作**：
- **变量表达式**：`${}`，从模型中
获取数据并显示。
```html
<h1>Hello, ${name}!</h1>
```
- **条件语句**：`
th:if`、`
th:unless`，进行条件判断。
```html
<div
th:if="${user != null}">
Welcome, ${user.name}!
</div>
<div
th:unless="${user != null}">
Please log in.
</div>
```
- **循环语句**：`
th:each`，遍历集合。
```html
<ul>
<li
th:each="item
: ${items}">${item}</li>
</ul>
```
3. **验证**：
- 创建一个简单页面，展示`
th:if`、`
th:unless`、`
th:each`等语法，检查是否正确渲染条件和循环。
---
### **步骤 3：
Thymeleaf 基本使用**
1. **目标**：掌握
Thymeleaf与Spring Boot的集成，能够使用
Thymeleaf模板引擎来渲染动态
数据。
2. **操作**：
- 创建一个控制器类，返回视图和模型
数据：
```
java
@
Controller
public class Home
Controller {
@GetMapping("/home")
public String home(Model model) {
model.addAttribute("message", "Welcome to Spring Boot wi
th Thymeleaf!");
return "home";
}
}
```
- 创建`home.html`模板：
```html
<html xmlns
:th="http
://www.
thymeleaf.org">
<body>
<h1
th:text="${message}"></h1>
</body>
</html>
```
- 启动应用，访问`/home`，确保页面能够正确显示动态
数据。
3. **验证**：
- 启动应用，访问对应路径，检查页面是否渲染了动态
数据。
---
### **步骤 4：使用
Thymeleaf完成页面的
数据展示**
1. **目标**：掌握如何通过
Thymeleaf展示
数据库中的
数据，并与Spring Boot
后端进行交互。
2. **操作**：
- 创建一个实体类，如`Product`：
```
java
@Entity
public class Product {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String name;
private Double price;
}
```
- 创建一个`Product
Controller`，查询所有产品并显示：
```
java
@
Controller
public class Product
Controller {
@Autowired
private ProductRepository productRepository;
@GetMapping("/products")
public String showProducts(Model model) {
List<Product> products = productRepository.findAll();
model.addAttribute("products", products);
return "product_list";
}
}
```
- 创建`product_list.html`模板，展示所有产品：
```html
<html xmlns
:th="http
://www.
thymeleaf.org">
<body>
<h1>Products</h1>
<ul>
<li
th:each="product
: ${products}">
<span
th:text="${product.name}"></span> - <span
th:text="${product.price}"></span>
</li>
</ul>
</body>
</html>
```
3. **验证**：
- 启动应用，访问`/products`，查看是否能展示所有产品的信息。
---
### **步骤 5：使用
Thymeleaf配置国际化页面**
1. **目标**：理解如何使用
Thymeleaf实现页面的国际化功能，支持不同语言的切换。
2. **操作**：
- 在`application.properties`中配置国际化支持：
```properties
spring.messages.basename=messages
spring.mvc.locale=en_US
spring.mvc.locale-resolver=accept-header
```
- 创建`messages.properties`（默认语言，英文）：
```properties
greeting=Hello, welcome to our site!
```
- 创建`messages_zh.properties`（中文）：
```properties
greeting=你好，欢迎来到我们的网站！
```
- 在
Thymeleaf模板中使用国际化标签：
```html
<html xmlns
:th="http
://www.
thymeleaf.org">
<body>
<h1
th:text="#{greeting}"></h1>
</body>
</html>
```
- 配置语言切换功能，可以通过URL、Cookie或Session切换语言。可以在控制器中添加如下代码：
```
java
@GetMapping("/lang/{lang}")
public String changeLang(@Pa
thVariable String lang, HttpServletRequest request) {
Locale locale = new Locale(lang);
LocaleContex
tHolder.setLocale(locale);
return "redirect
:/";
}
```
3. **验证**：
- 启动应用，访问不同语言的页面，如`/lang/zh`切换到中文，确保页面能够显示相应的语言文本。
---
**实验总结：**
通过本次实验，学生将掌握如何在Spring Boot应用程序中集成和使用
Thymeleaf模板引擎，学会使用
Thymeleaf的基本语法来展示
数据、处理表单和实现国际化功能。实验涵盖了
Thymeleaf与Spring Boot的基本集成、
数据展示、CRUD操作以及国际化配置等核心内容，为后续开发具有动态内容的Web应用程序提供了重要的基础知识。
本文详细介绍了如何在HTML前端通过`th:href`传递多个参数到后端Controller的方法，例如在删除操作中传入ID和用户名。示例中使用了`@RequestParam`注解来接收参数。在实际运行中，网络请求显示参数正确传递，如`http://localhost:8080/cart/delete?id=14&name=root`。这是一个关于前端与后端交互的实用教程。
扫一扫
2920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
