Spring Boot开发简单网页（员工管理系统）（七）：展示员工列表

最新推荐文章于 2024-01-18 23:42:52 发布

TanaStudy

最新推荐文章于 2024-01-18 23:42:52 发布

阅读量6.4k

点赞数 2

分类专栏： Spring Boot 文章标签： spring boot java

本文链接：https://blog.csdn.net/weixin_43901865/article/details/116648055

版权

展示员工列表

1、员工管理
2、自定义员工管理页面
2、Fragments 页面复用
4、侧边栏高亮显示
5、员工列表展示

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

最低0.47元/天解锁文章

TanaStudy

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
Spring Boot开发简单网页（员工管理系统）（七）：展示员工列表

展示员工列表1、员工管理2、自定义员工管理页面2、Fragments 页面复用4、侧边栏高亮显示5、员工列表展示1、员工管理我们希望在后台页面中的Customers页面中进行所有员工管理的操作因此，我们修改dashboard.html中显示Customers的部分。样式比较多，建议用ctrl+f搜索Customers，我们将其修改成员工管理<li class="nav-item"> <a class="nav-link" href="http://getbootstrap.co
复制链接

扫一扫