1、员工管理
我们希望在主页中的Customers页面中进行所有员工管理的操作,也就是说点击dashboard.html
页面中的Customers跳转到list.html
页面显示所有员工信息
因此,我们修改dashboard.html
中显示Customers的部分。样式比较多,建议用ctrl+f搜索Customers,我们将其修改成员工管理
<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-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>
之后我们对员工的所有操作都将在员工管理这个页面中进行
2、自定义员工管理页面
现在点击员工管理,跳转到的是http://getbootstrap.com/docs/4.0/examples/dashboard/#
,而并不是我们的list.html
页面。需要将其修改成我们的员工管理页面,也就是点击员工管理,应该跳转到后台的一个controller中
我们在com.kuang.controller
包下创建EmployeeController.java
,正常开发中我们通常会把功能页分类,在这里把list.html
放在src\main\resources\templates\emp
目录下,所以我们最后返回的是emp/list
package com.kuang.controller;
import com.kuang.dao.EmployeeDao;
import com.kuang.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Collection;
@Controller
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
@RequestMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
model.addAttribute("emps",employees);
return "emp/list";
}
}
现在,我们修改dashboard.html
,让其点击员工管理时跳转到lIst.html
页面
<li class="nav-item">
<a class="nav-link" th:href="@{/emps}">
员工管理
</a>
</li>
同样,在lIst.html
中我们也需要把Customers修改成员工管理,只需要把上面这段代码复制到lIst.html
中Customers所在的位置即可
现在再点击员工管理,就可以访问到list.html
页面
2、Fragments 页面复用
我们发现这样复制是非常麻烦的,所有页面的侧边栏和顶部导航栏都是相同的,因此我们可以把侧边栏和顶部导航栏抽取出来作为组件,然后在dashboard.html
和list.html
中插入即可,Thymeleaf提供Fragments
来实现这种功能(具体语法见 https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.pdf 的4.5节)。
在src\main\resources\templates
中创建一个文件夹commons
,在其中创建一个commons.html
,作用是页面模板,其他页面通过插入commons.html
中的组件实现代码复用。
我们在commons.html
中将侧边栏和顶部导航栏抽取出来作为组件
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--头部导航栏-->
<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="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">注销</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 class="nav-link active" th:href="@{/index.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=