在Spring Boot项目中使用Thymeleaf模板引擎结合HTML、CSS、JavaScript和Ajax技术，可以创建动态的Web界面。以下是一个简单的例子，展示了如何使用这些技术。
- 首先，确保你的
pom.xml中包含了Spring Boot和Thymeleaf的依赖：
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>- 创建一个Controller来处理请求并返回Thymeleaf模板：
@Controller
public class MyController {
@GetMapping("/greeting")
public String greeting(Model model) {
model.addAttribute("name", "World");
return "greeting"; // 对应src/main/resources/templates/greeting.html
}
}- 创建Thymeleaf模板
greeting.html，并结合HTML、CSS、JavaScript和Ajax：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Greeting</title>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<div>
<input type="text" id="name" placeholder="Enter your name" />
<button id="greetBtn">Greet</button>
</div>
<div id="greeting" class="hidden">
<p th:text="'Hello, ' + ${name} + '!'"></p>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('#greetBtn').click(function() {
var name = $('#name').val();
$.ajax({
url: '/greeting',
data: { name: name },
type: 'GET',
success: function(data) {
$('#greeting').removeClass('hidden');
}
});
});
});
</script>
</body>
</html>在这个例子中，我们使用了Thymeleaf的th:text来动态插入文本，结合jQuery和Ajax实现了前后端的异步通信。当用户点击按钮时，Ajax会向后端发送一个GET请求，并带上用户输入的名字，后端处理请求后，Thymeleaf会使用响应数据更新页面。