Spring Boot学习笔记-员工管理系统（二）

2024-04-05 07:58:42

Spring Boot学习

官网：https://spring.io/projects/spring-boot#overview

文档：https://docs.spring.io/spring-boot/docs/2.2.6.RELEASE/reference/html/

参考视频：【狂神说Java】SpringBoot最新教程IDEA版通俗易懂_哔哩哔哩_bilibili

项目完整参考代码：lexiaoyuan/SpringBootStudy: My Spring Boot study notes (github.com)、SpringBootStudy: 我的Spring Boot学习笔记 (gitee.com)

接Spring Boot学习笔记-员工管理系统（一）

员工管理系统

@Controller
public class LoginController {
    @RequestMapping("/user/login")
    public String login(
            @RequestParam("username") String username,
            @RequestParam("password") String password,
            Model model) {
        if(!StringUtils.isEmpty(username) && "123456".equals(password)) {
            return "redirect:/main.html";
        } else {
            model.addAttribute("msg", "用户名或密码错误");
            return "index";
        }
    }
}

在index.html的form元素中添加提交的请求

<form class="form-signin" th:action="@{/user/login}" method="post"></form>

在MyMvcConfig.java中增加一个请求转发

@Override
public void addViewControllers(ViewControllerRegistry registry) {
    // 转到index.html
    registry.addViewController("/").setViewName("index");
    registry.addViewController("/index.html").setViewName("index");
    // 转到主页
    registry.addViewController("/main.html").setViewName("dashboard");
}

运行项目，访问：http://localhost:8080/，输入一个不为空的用户名，再输入密码为123456，点击登录，登录成功，跳转到dashboard页面

主页dashboard模板：https://getbootstrap.com/docs/4.0/examples/dashboard/#

如果密码不是123456，则显示：用户名或密码错误！

登录拦截

在config目录下新建一个LoginHandlerInterceptor.java

public class LoginHandlerInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

        Object loginUser = request.getSession().getAttribute("loginUser");

        if (loginUser==null) {
            request.setAttribute("msg", "未登录，请先登录");
            request.getRequestDispatcher("/index.html").forward(request,response);
            return false;
        }
        return true;
    }
}

在MyMvcConfig.java中添加拦截器

// 添加拦截器
@Override
public void addInterceptors(InterceptorRegistry registry) {
    registry.addInterceptor(new LoginHandlerInterceptor())
            .addPathPatterns("/**")
            .excludePathPatterns("/","/index.html", "/user/login","/css/**", "/js/**", "/img/**");
}

测试：未登录时，直接访问：http://localhost:8080/main.html

登录之后再访问：http://localhost:8080/main.html

更改Company name

<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>

再重新Build一下项目即可，不用重新运行。（只修改前端代码，只需要重新Build一下就行）

再访问：http://localhost:8080/main.html

展示员工列表

点击员工管理就展示员工列表，但是顶部导航栏和侧边栏不变，所以要从dashboard.html中抽取公共部分组件来引入。

在templates目录下新建commons目录用于存放公共部分，在commons目录下新建fragment.html用于存放顶部导航栏和侧边栏

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
</head>
<body>
  <!--头部导航栏-->
  <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
    <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]</a>
    <input class="form-control form-control-dark w-100" type="text" placeholder="搜索查询" aria-label="Search">
    <ul class="navbar-nav px-3">
      <li class="nav-item text-nowrap">
        <a class="nav-link" th:href="@{/user/logout}">注销</a>
      </li>
    </ul>
  </nav>
  <!--侧边栏-->
  <nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">
    <div class="sidebar-sticky">
      <ul class="nav flex-column">
        <li class="nav-item">
          <a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/main.html}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
              <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
              <polyline points="9 22 9 12 15 12 15 22"></polyline>
            </svg>
            首页
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file">
              <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
              <polyline points="13 2 13 9 20 9"></polyline>
            </svg>
            订单
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart">
              <circle cx="9" cy="21" r="1"></circle>
              <circle cx="20" cy="21" r="1"></circle>
              <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
            </svg>
            产品展示
          </a>
        </li>
        <li class="nav-item">
          <a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/employeeList}">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
              <circle cx="9" cy="7" r="4"></circle>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
            </svg>
            员工管理
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bar-chart-2">
              <line x1="18" y1="20" x2="18" y2="10"></line>
              <line x1="12" y1="20" x2="12" y2="4"></line>
              <line x1="6" y1="20" x2="6" y2="14"></line>
            </svg>
            报告书
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">
              <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
              <polyline points="2 17 12 22 22 17"></polyline>
              <polyline points="2 12 12 17 22 12"></polyline>
            </svg>
            整合方式
          </a>
        </li>
      </ul>

      <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
        <span>保存的报告</span>
        <a class="d-flex align-items-center text-muted" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="16"></line><line x1="8" y1="12" x2="16" y2="12"></line></svg>
        </a>
      </h6>
      <ul class="nav flex-column mb-2">
        <li class="nav-item">
          <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
              <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
            这个月
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
              <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
            上个季度
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
              <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
            社会参与
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file-text">
              <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
              <polyline points="14 2 14 8 20 8"></polyline>
              <line x1="16" y1="13" x2="8" y2="13"></line>
              <line x1="16" y1="17" x2="8" y2="17"></line>
              <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
            年终大减价
          </a>
        </li>
      </ul>
    </div>
  </nav>
</body>

修改dashboard.html，顶部导航栏的代码用下面的代码代替：

<!--顶部导航栏-->
<div th:replace="commons/fragment :: topbar"></div>

侧边栏部分用下面代码代替：

<!--侧边栏-->
<div th:replace="commons/fragment :: sidebar(active='main.html')"></div>

再写业务层（services层），在services目录下新建EmployeeService.java

@Service
public class EmployeeService {

    @Autowired
    private EmployeeDao employeeDao;

    public void addEmployee(Employee employee){
        employeeDao.addEmployee(employee);
    }

    public Collection<Employee> getAll() {
        return employeeDao.getAll();
    }

    public Employee getEmployeeById(Integer id) {
        return employeeDao.getEmployeeById(id);
    }

    public void deleteEmployeById(Integer id) {
        employeeDao.deleteEmployeeById(id);
    }
}

再写控制层（controller层），在controller目录下新建EmployeeController.java

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeService employeeService;

    @GetMapping("/employeeList")
    public String employeeList(Model model) {
        model.addAttribute("employeeList", employeeService.getAll());
        return "employee/list";
    }

}

在templates目录下新建employee目录，用于存放关于员工的一些操作。将list.html放到employee目录下，并修改

<!--顶部导航栏-->
<div th:replace="commons/fragment :: topbar"></div>

<div class="container-fluid">
  <div class="row">
    <!--侧边栏-->
    <div th:replace="commons/fragment :: sidebar(active='list.html')"></div>

    <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
      <h2><a class="btn btn-sm btn-primary text-light">添加员工</a> </h2>
      <div class="table-responsive">
        <table class="table table-striped table-sm">
          <thead>
          <tr>
            <th>编号</th>
            <th>名字</th>
            <th>邮箱</th>
            <th>性别</th>
            <th>部门</th>
            <th>生日</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr th:each="employee:${employeeList}">
            <td th:text="${employee.getId()}"/>
            <td>[[${employee.getLastName()}]]</td>
            <td th:text="${employee.getEmail()}"/>
            <td th:text="${employee.getGender()==0? '女':'男'}"/>
            <td th:text="${employee.department.getDepartmentName()}"/>
            <td th:text="${#dates.format(employee.getBirth(),'yyyy-MM-dd HH:mm:ss')}"/>
            <td>
              <a class="btn btn-sm btn-primary text-light">编辑</a>
              <a class="btn btn-sm btn-danger text-light">删除</a>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </main>
  </div>
</div>

在list.html中的员工管理的标签中添加请求链接th:href="@{/employeeList}"

<li class="nav-item">
  <a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/employeeList}">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
      <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
      <circle cx="9" cy="7" r="4"></circle>
      <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
      <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
    </svg>
    员工管理
  </a>
</li>

写list.html中员工列表

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  <h2><a class="btn btn-sm btn-primary text-light">添加员工</a> </h2>
  <div class="table-responsive">
    <table class="table table-striped table-sm">
      <thead>
      <tr>
        <th>编号</th>
        <th>名字</th>
        <th>邮箱</th>
        <th>性别</th>
        <th>部门</th>
        <th>生日</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="employee:${employeeList}">
        <td th:text="${employee.getId()}"/>
        <td>[[${employee.getLastName()}]]</td>
        <td th:text="${employee.getEmail()}"/>
        <td th:text="${employee.getGender()==0? '女':'男'}"/>
        <td th:text="${employee.department.getDepartmentName()}"/>
        <td th:text="${#dates.format(employee.getBirth(),'yyyy-MM-dd HH:mm:ss')}"/>
        <td>
          <a class="btn btn-sm btn-primary text-light">编辑</a>
          <a class="btn btn-sm btn-danger text-light">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</main>

解决只有当前选中的导航项高亮，即点击首页时，首页高亮，点击员工管理时，员工管理高亮。

在dashboard.html中通过引入组件的方式访问首页时携带参数(active='main.html')

<!--侧边栏-->
<div th:replace="commons/fragment :: sidebar(active='main.html')"></div>

在fragment.html中的首页链接添加判断th:class="${active=='main.html'?'nav-link active':'nav-link'}"

<a th:class="${active=='main.html'?'nav-link active':'nav-link'}" th:href="@{/main.html}">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
    <polyline points="9 22 9 12 15 12 15 22"></polyline>
  </svg>
  首页
</a>

在list.html中通过引入组件的方式访问首页时携带参数(active='list.html')

<!--侧边栏-->
<div th:replace="commons/fragment :: sidebar(active='list.html')"></div>

在fragment.html中的员工管理链接添加判断th:class="${active=='list.html'?'nav-link active':'nav-link'}"

<a th:class="${active=='list.html'?'nav-link active':'nav-link'}" th:href="@{/employeeList}">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
    <circle cx="9" cy="7" r="4"></circle>
    <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
  </svg>
  员工管理
</a>

登录成功，默认访问：http://localhost:8080/main.html

点击员工管理，默认访问：http://localhost:8080/employeeList

ok，展示员工列表应该是已经完成了！

增加员工

首先在员工列表上面添加一个添加员工的按钮

<h2>
    <a class="btn btn-sm btn-primary text-light" th:href="@{/addEmployee}">添加员工</a>
</h2>

在employee目录下新建一个添加员工的页面add.html，其他部分和list.html一样，下面只给出表单部分

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
    <h3>添加员工</h3>
    <form th:action="@{/addEmployee}" method="post">
        <div class="form-group">
            <label>姓名</label>
            <input type="text" name="lastName" class="form-control" placeholder="姓名" required>
        </div>
        <div class="form-group">
            <label>邮箱</label>
            <input type="email" name="email" class="form-control" placeholder="邮箱" required>
        </div>
        <div class="form-group">
            <label>性别</label><br/>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" value="1" checked>
                <label class="form-check-label">男</label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" value="0">
                <label class="form-check-label">女</label>
            </div>
        </div>
        <div class="form-group">
            <label>部门选择</label>
            <select class="form-control" th:name="department.id">
                <option th:each="department : ${departments}" th:text="${department.getDepartmentName()}" th:value="${department.getId()}"/>
            </select>
        </div>
        <div class="form-group">
            <label>出生日期</label>
            <input type="text" name="birth" class="form-control" placeholder="yyyy-MM-dd" required>
        </div>
        <button type="submit" class="btn btn-primary">添加</button>
    </form>
</main>

在部门选择的表单中，当跳转到这个页面时，就要查询出所有的部门并显示出来。所以，在services目录下新建一个DepartmentService.java

@Service
public class DepartmentService {
    @Autowired
    private DepartmentDao departmentDao;

    public Collection<Department> getDepartments() {
        return departmentDao.getDepartments();
    }

    public Department getDepartmentById(Integer id) {
        return departmentDao.getDepartmentById(id);
    }
}

在EmployeeController.java中添加跳转到添加员工的请求

@Autowired
private DepartmentService departmentService;
@GetMapping("/addEmployee")
public String toAddEmployee(Model model) {
    model.addAttribute("departments", departmentService.getDepartments());
    return "employee/add";
}

在添加员工的add.html的form表单中添加action属性

<form th:action="@{/addEmployee}" method="post">
...
</form>

在EmployeeController.java中添加一个处理添加员工的请求

@PostMapping("/addEmployee")
public String addEmployee(Employee employee) {
    employeeService.addEmployee(employee);
    return "redirect:/employeeList";
}

登录成功后，点击添加员工按钮

输入信息

注意，这里的日期格式，必须要这么输入，这个格式是后台默认允许的接收格式，用/分隔

点击添加，可以看到，添加成功

修改日期的接收格式，在application.properties中配置

# 配置日期格式
spring.mvc.date-format=yyyy-MM-dd

这样前端就可以按yyyy-MM-dd格式输入，用-分隔，注意：配置后就只能采用这种格式输入，否则会报错

重新运项目，登录并添加员工

如果输入的日期格式错误，就会报错

ok，增加员工的功能完成！

修改员工信息

首先修改编辑按钮的链接，请求updateEmployee，并携带参数，即当前要修改的id

<a class="btn btn-sm btn-primary text-light" th:href="@{/updateEmployee/{id}(id=${employee.getId()})}">编辑</a>

在EmployeeController.java中写方法来接受这个请求

@GetMapping("/updateEmployee/{id}")
public String toUpdateEmployee(@PathVariable("id") Integer id, Model model) {
    model.addAttribute("employee", employeeService.getEmployeeById(id));
    model.addAttribute("departments", departmentService.getDepartments());
    return "employee/update";
}

在employee目录下新建update.html，内容和add.html基本一样，只需要修改表单部分

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
  <h3>编辑信息</h3>
  <form th:action="@{/updateEmployee/{id}(id=${employee.getId()})}" method="post">
    <div class="form-group">
      <label>姓名</label>
      <input type="text" name="lastName" class="form-control" placeholder="姓名" required th:value="${employee.getLastName()}">
    </div>
    <div class="form-group">
      <label>邮箱</label>
      <input type="email" name="email" class="form-control" placeholder="邮箱" required th:value="${employee.getEmail()}">
    </div>
    <div class="form-group">
      <label>性别</label><br/>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="gender" value="1" th:checked="${employee.getGender() == 1}">
        <label class="form-check-label">男</label>
      </div>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="gender" value="0" th:checked="${employee.getGender() == 0}">
        <label class="form-check-label">女</label>
      </div>
    </div>
    <div class="form-group">
      <label>部门选择</label>
      <select class="form-control" th:name="department.id">
        <option
                th:each="department : ${departments}"
                th:text="${department.getDepartmentName()}"
                th:value="${department.getId()}"
                th:selected="${employee.getDepartment().getId() == department.getId()}"/>
      </select>
    </div>
    <div class="form-group">
      <label>出生日期</label>
      <input type="text" name="birth" class="form-control" placeholder="yyyy-MM-dd" required th:value="${#dates.format(employee.getBirth(), 'yyyy-MM-dd')}">
    </div>
    <button type="submit" class="btn btn-primary">修改</button>
  </form>
</main>

再在EmployeeController.java中写一个接受修改的请求

@PostMapping("/updateEmployee/{id}")
public String updateEmployee(@PathVariable("id") Integer id, Employee employee) {
    employee.setId(id);
    employeeService.addEmployee(employee);
    return "redirect:/employeeList";
}

再运行项目，并登录，点击员工管理，再在员工列表中点击修改按钮。

ok，修改员工已经成功！

删除员工

在list.html中的删除按钮上添加删除请求th:href="@{/deleteEmployee/{id}(id=${employee.getId()})}"

<a class="btn btn-sm btn-danger text-light" th:href="@{/deleteEmployee/{id}(id=${employee.getId()})}">删除</a>

在EmployeeController.java中增加一个删除请求

@GetMapping("/deleteEmployee/{id}")
public String deleteEmployee(@PathVariable("id") Integer id) {
    employeeService.deleteEmployeeById(id);
    return "redirect:/employeeList";
}

重新运行项目，登录成功后，点击员工管理，在员工列表中点击删除按钮，可以看到，删除成功

OK。删除功能完成

注销

在fragment.html中添加注销请求

<a class="nav-link" th:href="@{/user/logout}">注销</a>

在LoginController.java中添加方法接受注销请求

@GetMapping("/user/logout")
public String logout(HttpSession session) {
    session.invalidate();
    return "redirect:/index.html";
}

重新运行项目，登录成功后，点击员工管理，再点击注销按钮

重新回到登录页面，再直接访问：http://localhost:8080/main.html ，被拦截，需要登录

OK，注销功能也完成了！

配置404页面

只需要在templates目录下新建error目录，并将404.html页面放到error目录下，就可以了，会自动访问

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>404</title>
</head>
<body>
<h1>404</h1>
</body>
</html>

类似的，500.html，400.html，等等都是放到error目录下，就可以自动识别

访问一个错误的地址：http://localhost:8080/123

ok，404页面也配置好了！

码农公寓