5.7 本章练习
1）创建Spring Boot Web项目，使用Thymeleaf页面模板引擎实现人员管理模块的功能。
答案：
1. 创建人员实体类 创建一个 Person 实体类，用于定义人员属性
package com.example.demo.bean;import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;@Entity
public class Person {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;private String name;private Integer age;private String email;public Person() {}public Person(Long id, String name, Integer age, String email) {this.id = id;this.name = name;this.age = age;this.email = email;}public Long getId() {return id;}public void setId(Long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Integer getAge() {return age;}public void setAge(Integer age) {this.age = age;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}
}
2. 创建控制器 创建 PersonController，用于处理请求：
package com.example.demo.controller;import com.example.demo.bean.Person;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;import java.util.ArrayList;
import java.util.List;@Controller
@RequestMapping("/persons")
public class PersonController {List<Person> personList = new ArrayList<>();public PersonController() {personList.add(new Person(1L, "Alice", 12, "123@163.com"));personList.add(new Person(2L, "Bob", 12, "123@163.com"));}@GetMappingpublic String listPersons(Model model) {model.addAttribute("persons", personList);return "person/list";}@GetMapping("/add")public String addPersonForm(Model model) {model.addAttribute("person", new Person());return "person/add";}@PostMapping("/add")public String savePerson(@ModelAttribute Person person) {person.setId(Long.valueOf(personList.size()) + 1);personList.add(person);return "redirect:/persons";}@GetMapping("/edit/{id}")public String editPersonForm(@PathVariable Long id, Model model) {int personIndex = getPersonIndexUsingPersonId(id);Person person = personList.get(personIndex);model.addAttribute("person", person);return "person/edit";}private Integer getPersonIndexUsingPersonId(Long personId){int personIndex = 0;for (Person personObj : personList) {if (personObj.getId() == personId) {personIndex = personList.indexOf(personObj);}}return personIndex;}@PostMapping("/edit/{id}")public String updatePerson(@PathVariable Long id, @ModelAttribute Person person) {int personIndex = getPersonIndexUsingPersonId(id);personList.set(personIndex, person);return "redirect:/persons";}@GetMapping("/delete/{id}")public String deletePerson(@PathVariable Long id) {int personIndex = getPersonIndexUsingPersonId(id);personList.remove(personIndex);return "redirect:/persons";}}
3. 创建 Thymeleaf 页面模板
在 src/main/resources/templates/person 下创建以下 HTML 文件：
(1) list.html：显示人员列表
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>Person List</title>
</head>
<body>
<h2>Person List</h2>
<a href="/persons/add">Add Person</a>
<table border="1"><tr><th>ID</th><th>Name</th><th>Age</th><th>Email</th><th>Actions</th></tr><tr th:each="person : ${persons}"><td th:text="${person.id}"></td><td th:text="${person.name}"></td><td th:text="${person.age}"></td><td th:text="${person.email}"></td><td><a th:href="@{/persons/edit/{id}(id=${person.id})}">Edit</a> |<a th:href="@{/persons/delete/{id}(id=${person.id})}">Delete</a></td></tr>
</table>
</body>
</html>
(2) add.html：添加人员表单
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>Add Person</title>
</head>
<body>
<h2>Add New Person</h2>
<form action="#" th:action="@{/persons/add}" th:object="${person}" method="post">Name: <input type="text" th:field="*{name}"/><br/>Age: <input type="number" th:field="*{age}"/><br/>Email: <input type="email" th:field="*{email}"/><br/><button type="submit">Save</button>
</form>
</body>
</html>
(3) edit.html：编辑人员表单
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><title>Edit Person</title>
</head>
<body>
<h2>Edit Person</h2>
<form action="#" th:action="@{/persons/edit/{id}(id=${person.id})}" th:object="${person}" method="post">Name: <input type="text" th:field="*{name}"/><br/>Age: <input type="number" th:field="*{age}"/><br/>Email: <input type="email" th:field="*{email}"/><br/><button type="submit">Update</button>
</form>
</body>
</html>
4. 运行项目
启动 Spring Boot 应用程序，访问 http://localhost:8080/persons 即可查看人员管理模块的功能。
2）使用Thymeleaf实现系统的整体布局，包括顶部、底部、左侧菜单栏和右部主区域。
答案：
在templates/layout目录下新建footer.html、header.html、left.html等各区域模板页面。
footer.html的内容如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>footer</title>
</head>
<body><footer th:fragment="footer"><div style="position: fixed;bottom: 0px;background-color: green;width: 100%"><h1 style="text-align: center">我是底部</h1></div></footer>
</body>
</html>left.html的内容如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>left</title>
</head>
<body><left th:fragment="left"><div style="background-color: red;width: 200px;height: 80vh;"><h1 style="margin: 0px;">我是左侧</h1></div></left>
</body>
</html>header.html的内容如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>header</title>
</head>
<body><header th:fragment="header"><div style="background-color: blue;height: 100px;"><h1 style="text-align: center;margin: 0;">我是头部</h1></div></header>
</body>
</html>在templates/layout目录下新建index.html页面，内容如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Layout</title>
</head>
<body style="margin: 0px;"><div><div th:replace="layout/header :: header"></div><div th:replace="layout/left :: left"></div><div th:replace="layout/footer :: footer"></div></div>
</body>
</html>在后端添加访问入口：
@RequestMapping("/layout/index")public String index() {return "layout/index";}运行验证，效果图如下：
