Spring Boot控制器如何将特定数据映射到HTML视图
在Spring Boot Web开发中，控制器负责处理业务逻辑并将数据传递给视图层进行渲染。本文将详细介绍几种主流的方式来实现控制器到HTML视图的数据映射。
1. 使用Model接口
Model是Spring MVC中最基础的数据传递方式，它本质上是一个Map，用于存储键值对数据。
实现步骤：
在控制器方法中添加Model参数
使用addAttribute方法添加数据
返回逻辑视图名称
@Controller
public class UserController {
@GetMapping("/user")
public String getUser(Model model) {
// 添加单个属性
model.addAttribute("username", "张三");
model.addAttribute("age", 25);
// 添加对象
User user = new User("李四", 30);
model.addAttribute("user", user);
// 添加集合
List<String> hobbies = Arrays.asList("读书", "运动", "音乐");
model.addAttribute("hobbies", hobbies);
return "user"; // 对应templates/user.html
}
}Thymeleaf模板中使用数据：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>用户信息</title>
</head>
<body>
<h1>欢迎，<span th:text="${username}"></span></h1>
<p>年龄：<span th:text="${age}"></span></p>
<div th:object="${user}">
<p>姓名：<span th:text="*{name}"></span></p>
<p>年龄：<span th:text="*{age}"></span></p>
</div>
<h3>爱好：</h3>
<ul>
<li th:each="hobby : ${hobbies}" th:text="${hobby}"></li>
</ul>
</body>
</html>2. 使用ModelAndView对象
ModelAndView将模型数据和视图信息封装在一个对象中，提供了更灵活的控制方式。
实现示例：
@Controller
public class ProductController {
@GetMapping("/product/{id}")
public ModelAndView getProduct(@PathVariable Long id) {
ModelAndView mav = new ModelAndView();
// 设置视图名称
mav.setViewName("product");
// 添加模型数据
Product product = productService.findById(id);
mav.addObject("product", product);
mav.addObject("currentTime", new Date());
return mav;
}
}3. 使用@ModelAttribute注解
@ModelAttribute用于将方法返回值自动添加到模型中，或者将请求参数绑定到模型对象。
作为方法级注解：
@Controller
public class CommonController {
// 该方法会在每个控制器方法执行前调用，添加公共数据
@ModelAttribute
public void addCommonAttributes(Model model) {
model.addAttribute("appName", "我的应用");
model.addAttribute("version", "1.0.0");
}
// 也可以直接返回对象，Spring会自动将其添加到模型
@ModelAttribute("categories")
public List<Category> loadCategories() {
return categoryService.findAll();
}
}作为参数注解：
@PostMapping("/user/save")
public String saveUser(@ModelAttribute User user,
BindingResult result,
Model model) {
if (result.hasErrors()) {
model.addAttribute("errors", result.getAllErrors());
return "user-form";
}
userService.save(user);
return "redirect:/users";
}4. 使用Map或ModelMap
除了Model接口，还可以使用Map或ModelMap作为参数类型，它们提供了类似的功能。
@GetMapping("/info")
public String getInfo(Map<String, Object> map) {
map.put("message", "Hello World");
map.put("timestamp", System.currentTimeMillis());
return "info";
}
@GetMapping("/details")
public String getDetails(ModelMap modelMap) {
modelMap.addAttribute("detail", "详细信息");
return "details";
}5. 在Thymeleaf中访问数据
Thymeleaf提供了丰富的方式来访问和操作模型数据：
基本表达式：
${...}：变量表达式，用于获取模型属性
*{...}：选择表达式，配合th:object使用
#{...}：消息表达式，用于国际化
@{...}：链接URL表达式
常用操作示例：
<!-- 条件判断 -->
<div th:if="${user != null}">
<p th:text="'用户名：' + ${user.name}"></p>
</div>
<!-- 循环遍历 -->
<table>
<tr th:each="item : ${items}">
<td th:text="${item.id}"></td>
<td th:text="${item.name}"></td>
</tr>
</table>
<!-- 内联JavaScript -->
<script th:inline="javascript">
var user = /*[[${user}]]*/ {};
console.log(user.name);
</script>6. 完整示例：用户管理页面
下面是一个完整的用户管理控制器示例：
@Controller
@RequestMapping("/users")
public class UserManagementController {
private List<User> users = new ArrayList<>();
// 初始化一些测试数据
public UserManagementController() {
users.add(new User(1L, "张三", "zhangsan@ippipp.com"));
users.add(new User(2L, "李四", "lisi@ippipp.com"));
}
// 显示用户列表
@GetMapping
public String listUsers(Model model) {
model.addAttribute("users", users);
model.addAttribute("totalUsers", users.size());
return "user-list";
}
// 显示添加用户表单
@GetMapping("/add")
public String showAddForm(Model model) {
model.addAttribute("user", new User());
model.addAttribute("action", "add");
return "user-form";
}
// 处理添加用户请求
@PostMapping("/add")
public String addUser(@ModelAttribute User user, Model model) {
user.setId(System.currentTimeMillis()); // 简单的ID生成
users.add(user);
model.addAttribute("message", "用户添加成功");
return "redirect:/users";
}
// 显示编辑用户表单
@GetMapping("/edit/{id}")
public String showEditForm(@PathVariable Long id, Model model) {
User user = users.stream()
.filter(u -> u.getId().equals(id))
.findFirst()
.orElse(null);
model.addAttribute("user", user);
model.addAttribute("action", "edit");
return "user-form";
}
// 处理编辑用户请求
@PostMapping("/edit")
public String editUser(@ModelAttribute User user, Model model) {
for (int i = 0; i < users.size(); i++) {
if (users.get(i).getId().equals(user.getId())) {
users.set(i, user);
break;
}
}
model.addAttribute("message", "用户更新成功");
return "redirect:/users";
}
}总结
Spring Boot提供了多种灵活的方式将数据从控制器传递到HTML视图：
Model接口：最常用和简单的方式
ModelAndView：当需要同时控制模型和视图时使用
@ModelAttribute：用于自动添加公共数据或参数绑定
Map/ModelMap：提供类似Model的功能
选择合适的数据传递方式取决于具体的业务需求和开发场景。在实际项目中，Model接口通常是最常用的选择，因为它简洁明了且功能完善。