SpringBoot创建员工管理系统（四）员工页面设置

最新推荐文章于 2024-05-13 16:42:10 发布

张*

最新推荐文章于 2024-05-13 16:42:10 发布

阅读量1.2k

点赞数

分类专栏： SpringBoot

本文链接：https://blog.csdn.net/qq_40393135/article/details/100046987

版权

SpringBoot 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

设置员工展示页面

在dashboard.html中设置员工地址请求

因为现在没有办法处理请求,所以创建一个处理请求的 EmpController类来处理请求

@Controller
public class EmpController {
    @Autowired
    EmployeeDao employeeDao;
//    查询员工跳转到列表页
    @RequestMapping("/emplist")
    public String emplist(Model model){
        Collection<Employee> employees = employeeDao.getAll();
        model.addAttribute("emps",employees);
        return "emp/list";
    }
}

处理完请求后,还需要对 list.html 员工列表进行处理,

处理完请求之后,导入员工的信息

进行测试就可以看到导入了数据

接下来就可以导入遍历数据,

<tbody>
	<tr th:each="emp:${emps}">
		<td th:text="${emp.id}"></td>
		<td >[[${emp.lastName}]]</td>
		<td th:text="${emp.email}"></td>
		<td th:text="${emp.gender==0?'女':'男'}"></td>
        <td th:text="${emp.department.departmentName}"></td>
		<td th:text="${emp.birth}"></td>
	</tr>
</tbody>

测试结果如下

现在我们可以看到日期格式和我们所想的不同,那么就设置时间内格式

<td th:text="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm:ss')}"></td

这样再次进行测试,就可以看到结果如下

添加操作

<h2><a class="btn btn-sm btn-success" href="">增加员工</a></h2>

<!--操作-->
<td>
	<a class="btn btn-sm btn-primary" th:href="@{/update/}+${emp.id}">编辑</a>
	<a class="btn btn-sm btn-danger"  th:href="@{/delete/}+${emp.id}">删除</a>
</td>

测试,就可以看到增加了操作按钮

员工列表功能

首先将首页的侧边栏Customers改为员工管理；

a链接添加请求；

<a class="nav-link" href="#" th:href="@{/emps}">员工管理</a>

将list放到emp文件夹下：
编写处理请求的controller；

package com.zhang.springboot2.controller;

import com.zhang.springboot2.dao.DepartmentDao;
import com.zhang.springboot2.dao.EmployeeDao;
import com.zhang.springboot2.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 EmpController {
    @Autowired
    EmployeeDao employeeDao;

   
    @RequestMapping("/emplist")
    public String emplist(Model model){
        Collection<Employee> employees = employeeDao.getAll();
//        将结果放到请求中
        model.addAttribute("emps",employees);
        return "emp/list";
    }}

Thymeleaf 公共页面元素抽取

抽取公共的片段，
```
th:fragment="topbar"  定义模板名
```

引入公共片段，

<div th:insert 插入模板名 使用list 列表，抽取头部

<!--提取模板th:fragment="topbar"-->
<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"
       style="color: white;font-weight: bold">[[${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="#" th:href="@{/user/loginOut}">注销</a>
        </li>
    </ul>
</nav>

然后在list页面中引入，可以删除原来的nav
```
<div th:insert="~{commons/bar::topbar}"></div>
```

除了使用insert插入，还可以使用replace替换，或者include包含，三种方式会有一些小区别，可以见名知义；

我们使用replace替换，可以解决div多余的问题

我们发现一个小问题，侧边栏激活的问题，它总是激活第一个；按理来说，这应该是动态的才对！

为了重用更清晰，我们建立一个commons文件夹，专门存放公共页面；

我们去页面中引入一下

<div th:replace="~{commons/bar::topbar}"></div>
<div th:replace="~{commons/bar::sitebar}"></div>

我们先测试一下，保证所有的页面没有出问题！ok！

我们来解决我们侧边栏激活问题！

1.将首页的超链接地址改到项目中

2.我们在a标签中加一个判断，使用class改变标签的值；

 <a class="nav-link active" th:class="${activeUrl=='main.html'?'nav-link active':'nav-link'}" href="#" th:href="@{/main.html}">
其余同理，判断请求携带的参数，进行激活测试

3.修改请求链接

<div th:replace="~{commons/bar::sitebar(activeUrl='main.html')}"></div>
<div th:replace="~{commons/bar::sitebar(activeUrl='emps')}"></div>
其余要用都是同理

遍历我们的员工信息！顺便美化一些页面，增加添加，修改，删除的按钮

<body>
<!--使用提取的模板 "~{templatename：：selector}"-->
<div th:insert="~{commons/bar::topbar}"></div>

<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <div th:insert="~{commons/bar::sidebar(activeUrl='emps.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-success" th:href="@{/toAddPage}">增加员工</a></h2>
            <div class="table-responsive">
                <table class="table table-striped table-sm">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>lastName</th>
                        <th>email</th>
                        <th>gender</th>
                        <th>department</th>
                        <th>birth</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr th:each="emp:${emps}">
                        <td th:text="${emp.id}"></td>
                        <td>[[${emp.lastName}]]</td>
                        <td th:text="${emp.email}"></td>
                        <td th:text="${emp.gender==0?'女':'男'}"></td>
                        <td th:text="${emp.department.departmentName}"></td>
                        <td th:text="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <!--操作-->
                        <td>
                            <a class="btn btn-sm btn-primary" th:href="@{/update/}+${emp.id}">编辑</a>
                            <a class="btn btn-sm btn-danger" th:href="@{/delete/}+${emp.id}">删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </main>
    </div>
</div>

张*

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot创建员工管理系统（四）员工页面设置

设置员工展示页面在dashboard.html中设置员工地址请求因为现在没有办法处理请求,所以创建一个处理请求的EmpController类来处理请求@Controllerpublic class EmpController { @Autowired EmployeeDao employeeDao;// 查询员工跳转到列表页 @Request...
复制链接

扫一扫

专栏目录