Spring Boot员工管理项目（三）— CRUD

最新推荐文章于 2022-10-21 10:18:13 发布

RuiW_97

最新推荐文章于 2022-10-21 10:18:13 发布

阅读量260

点赞数

分类专栏： SpringBoot学习

本文链接：https://blog.csdn.net/qq_39181839/article/details/111497309

版权

SpringBoot学习专栏收录该内容

12 篇文章 1 订阅

订阅专栏

上两篇分别实现了导入静态资源、首页、国际化和登录、登录拦截器

这一篇继续实现员工的增删改查

（四）CRUD

一、查—显示员工列表

1、实现点击Customers跳转

为了在dashboard页面点击Customers 实现跳转，添加请求路径 /emps
在这里插入图片描述
在templates目录下新建一个包emp，用来放所有关于员工信息的页面，将list.html页面移入该包中

添加 EmployeeController 类，处理 /emps 请求

@Controller
public class EmployeeController {

    @Autowired
    EmployeeDao employeeDao;

    @RequestMapping("/emps")
    public String list(Model model){
        Collection<Employee> employees = employeeDao.getAll();
        model.addAttribute("empl", employees);
        return "emp/list";
    }
}

注意到 list.html 和 dashboard.html 页面的侧边栏和顶部栏是相同的，可以抽取出来

2. 抽取页面公共部分

在 templates 目录下新建一个commons包，并新建commons.html。利用th:fragment 标签抽取公共部分（顶部导航栏和侧边栏）

抽取公共片段 th:fragment=“copy”
引入公共片段 th:insert="~{footer :: copy}"
~{templatename::selector}：模板名::选择器
~{templatename::fragmentname}:模板名::片段名

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    
<!--顶部导航栏,利用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" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Company
        name</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/#">Sign out</a>
        </li>
    </ul>
</nav>
    
<!--侧边栏,利用th:fragment提取出来,命名为sidebar-->
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="siderbar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" 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-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>
                    Dashboard <span class="sr-only">(current)</span>
                </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>
                    Orders
                </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>
                    Products
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{/emps}">
                    <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>
                    Customers
                </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>
                    Reports
                </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>
                    Integrations
                </a>
            </li>
        </ul>

        <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
            <span>Saved reports</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>
                    Current month
                </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>
                    Last quarter
                </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>
                    Social engagement
                </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>
                    Year-end sale
                </a>
            </li>
        </ul>
    </div>
</nav>
</html>

并在 list.html 和 dashboard.html 中删除原导航栏、侧边栏代码，利用th:replace="~{}" 标签引入抽取之后的

<!--导航栏-->
<div th:replace="~{common/common::topbar}"></div>
<div class="container-fluid">
    <div class="row">
        <!--侧边栏-->
        <div th:replace="~{commons/commons::siderbar}"></div></div>

3、点击Customers 高亮

在 dashboard.html 的侧边栏标签传递参数active为 main.html

同样在 list.html 的侧边栏标签传递参数 active 为 list.html

在 commons.html 利用thymeleaf接收参数active，利用三元运算符判断决定是否高亮
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210309204029985.png

再次重启即实现点击高亮！

4、显示员工列表

在 EmployeeController 中传入了empl，用 th:each 遍历取出
在list.html 中修改，并添加两个标签编辑和删除
在这里插入图片描述
此时可以正确显示

二、增—实现增加员工

1. 实现页面跳转

在这里插入图片描述
在list.html 增加一个“添加页面”按钮，并在EmployeeController类中处理请求。

使用Restful风格，这里通过get方式提交请求。

 @GetMapping("/emp")
    public String toAddPage(Model model){
        //查出所有部门信息
        Collection<Department> departments = departmentDao.getDepartment();
        //获得所有部门再返回前端
        model.addAttribute("departments", departments);
        return "emp/addEmp";
    }

2. 添加员工页面

点击“添加员工”显示/emp/addEmp.html，在emp包下新建addEmp.html，复制 list.html 的主要内容，并修改部门为显示部门名。
在这里插入图片描述

<!--导航栏-->
<div th:replace="~{common/common::topbar}"></div>

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

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <!--提交表单，点击添加按钮跳转-->
            <form th:action="@{/emp}" method="post">
                <div class="form-group">
                    <label>LastName</label>
                    <input type="text" name="lastName" class="form-control" placeholder="zhangsan">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input type="email" name="email" class="form-control" placeholder="zhangsan@atguigu.com">
                </div>
                <div class="form-group">
                    <label>Gender</label><br/>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender"  value="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">
                        <label class="form-check-label">女</label>
                    </div>
                </div>
                <div class="form-group">
                    <label>department</label>
                <!--这里传入参数是id，与value对应。在controller接收的是一个Employee对象，所以需要提交的是其中的一个属性-->
                    <select class="form-control" name="department.id">
                <!--th:text 显示为部门名 用户接收的是部门id，value为部门id-->
                        <option th:each="dep:${departments}" th:text="${dep.getDepartmentName()}" th:value="${dep.getId()}"></option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Birth</label>
                    <input type="text" name="birth" class="form-control" placeholder="zhangsan">
                </div>
                <button type="submit" class="btn btn-primary">添加</button>
            </form>
        </main>
    </div>
</div>

3. 添加员工

点击“添加”按钮，进行表单提交，发出Post请求，路径仍是"/add"，重新跳转到/emps 页面展示全部员工信息。
在这里插入图片描述
在EmployeeController中处理请求。

@PostMapping("/emp")
    public String addEmp(Employee employee){
        //调用底层业务方法保存员工信息
        employeeDao.addEmployee(employee);
        return "redirect:/emps";
    }

添加之后：
在这里插入图片描述
注意在添加日期时要注意日期格式，在 application.properties 中进行时间配置

spring.mvc.date-format=yyyy-MM-dd

三、改—修改员工信息

1. 实现页面跳转

在list.html 增加一个“编辑”按钮，选择需要修改的员工id。

<a class="btn btn-sm btn-primary" th:href="@{/emp/update/}+${em.id}">编辑</a>

在EmployeeController类中处理请求，跳转到修改员工页面。@PathVaribale 获取url中的数据即传入前端选择的员工id。

@GetMapping("/emp/update/{id}")
    public String toUpdateEmp(@PathVariable("id") Integer id, Model model){
        //查出原来的参数
        Employee employee = employeeDao.getEmpById(id);
        model.addAttribute("emp", employee);
//        //查出所有部门信息
        Collection<Department> departments = departmentDao.getDepartment();
        //获得所有部门再返回前端
        model.addAttribute("departments", departments);
        return "emp/update";
    }

2. 修改员工页面

点击“编辑”显示/emp/addEmp.html，在emp包下新建update.html，复制 addEmp.html 的主要内容，并添加 th:value 或 th:checked 或 th:selected取出员工信息。

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

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
            <!--提交表单，点击添加按钮跳转-->
            <form th:action="@{/emp/update}" method="post">
                <!--指定修改人的id-->
                <input type="hidden" name="id" th:value="${emp.getId()}">

                <div class="form-group">
                    <label>LastName</label>
                    <input type="text" name="lastName" class="form-control" placeholder="zhangsan" th:value="${emp.getLastName()}">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input type="email" name="email" class="form-control" placeholder="zhangsan@atguigu.com"  th:value="${emp.getEmail()}">
                </div>
                <div class="form-group">
                    <label>Gender</label><br/>
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="gender"  value="1" th:checked="${emp.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="${emp.getGender()==0}">
                        <label class="form-check-label">女</label>
                    </div>
                </div>
                <div class="form-group">
                    <label>department</label>
                <!--这里传入参数是id，与value对应。在controller接收的是一个Employee对象，所以需要提交的是其中的一个属性-->
                    <select class="form-control" name="department.id">
                <!--th:text 显示为部门名 用户接收的是部门id，value为部门id-->
                        <option th:each="dep:${departments}" th:text="${dep.getDepartmentName()}" th:value="${dep.getId()}"  th:selected="${emp.getDepartment().getId()==dep.getId()}"></option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Birth</label>
                    <input type="text" name="birth" class="form-control" placeholder="zhangsan"  th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd')}">
                </div>
                <button type="submit" class="btn btn-primary">修改</button>
            </form>
        </main>
    </div>
</div>

如修改 101 员工，修改页面显示为：
在这里插入图片描述

3. 修改员工

点击“修改”按钮，进行表单提交，发出Post请求，路径仍是"/emp/update"，重新跳转到/emps 页面展示修改后的全部员工信息。
在这里插入图片描述
在EmployeeController中处理请求，将修改后的员工信息提交给后台。

@PostMapping("/emp/update")
    public String updateEmp(Employee employee){
        employeeDao.addEmployee(employee);
        return "redirect:/emps";
    }

修改后返回"/emps"，已成功修改。
在这里插入图片描述

四、删—删除员工

在list.html 增加一个“删除”按钮，选择需要删除的员工id。

<a class="btn btn-sm btn-danger" th:href="@{/emp/delete/}+${em.id}">删除</a>

在 EmployeeController 类中处理请求，根据传入id删除员工。

@GetMapping("/emp/delete/{id}")
    public String deleteEmp(@PathVariable("id") Integer id){
        employeeDao.delete(id);
        return "redirect:/emps";
    }

进行删除操作，显示更新后的员工信息。
在这里插入图片描述

RuiW_97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
Spring Boot员工管理项目（三）— CRUD

CRUD-员工列表实验要求：1）、RestfulCRUD：CRUD满足Rest风格；URI： /资源名称/资源标识 HTTP请求方式区分对资源CRUD操作普通CRUD（uri来区分操作）RestfulCRUD查询getEmpemp—GET添加addEmp?xxxemp—POST修改updateEmp?id=xxx&xxx=xxemp/{id}—PUT删除deleteEmp?id=1emp/{id}—DELETE2）、
复制链接

扫一扫