自学内容网 自学内容网
自学内容网 > 正文

《Spring Boot从入门到实战》第五章习题答案

🕗 发布于 2024-11-08 15:14 spring boot  java  数据库  

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"));
    }

    @GetMapping
    public 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";
    }

运行验证，效果图如下：


原文地址：https://blog.csdn.net/weixin_53759045/article/details/143602140

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024