springboot项目--模拟增删改查

最新推荐文章于 2024-05-25 16:38:23 发布

改变自己2022

最新推荐文章于 2024-05-25 16:38:23 发布

阅读量644

点赞数

分类专栏： spingboot 文章标签： spring boot

本文链接：https://blog.csdn.net/qq_32527287/article/details/105418503

版权

spingboot 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Springboot模拟增删改查功能，目前没有集成数据库：所以主要是以前台逻辑，使用thymeleaf能更加方便处理后台的数据。

查询员工

功能描述：

从侧边栏的员工信息点击之后，从后台查询所有员工并展示：

并且可以添加员工，修改，删除。

1.员工展示页面

对于这样的功能需求：主要是会遍历后台过来的数据。

thymeleaf提供的遍历：th:each

三元表达式：

<!--  thymeleaf的三元表达式-->
 <td th:text="${item.getGender()==0?'女':'男'}">12 May 2017</td>

日期格式转换：

<!--   日期格式转换：  #dates是thymeleaf提供的一个工具，它能帮我们展示想要的日期格式-->
 <td th:text="${#dates.format(item.getBirthday(),'yyyy-MM-dd HH:mm:ss')}">Pending</label></td>

restful风格请求实现：

<!--  在修改的时候,我们需要把员工id传递给后台,后台得到员工的详细信息,之后进入修改页面,这里使用的restful风格. -->
 <a th:href="@{/employee/toUpdatePage/}+${item.getId()}"  class="btn btn-sm btn-primary" th:text="修改" ></a>

遍历具体用法：

   <tr th:each="item:${employeeList}">

整个功能页面代码：

<!DOCTYPE html>
<html   xmlns:th="http://www.thymeleaf.org">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Spica Admin</title>
  <!-- base:css -->
  <link rel="stylesheet" th:href="@{/vendors/mdi/css/materialdesignicons.min.css}">
  <link rel="stylesheet" th:href="@{/vendors/css/vendor.bundle.base.css}">
  <!-- endinject -->
  <!-- inject:css -->
  <link rel="stylesheet" th:href="@{/css/style.css}">
  <!-- endinject -->
  <link rel="shortcut icon" th:href="@{/images/favicon.png}" />
</head>

<body>
  <div class="container-scroller d-flex">
    <nav  class="sidebar sidebar-offcanvas"  th:replace="~{commoms/commoms::sidebar}"></nav>
    <div class="container-fluid page-body-wrapper">
      <div th:insert="~{commoms/commoms::page-header}"></div>
      <div class="main-panel">
        <div class="content-wrapper">
          <div class="row">
            <div class="col-lg-12 grid-margin stretch-card">
              <h4 class="card-title">员工信息</h4>
            </div>
            <div class="col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="col-lg-1"><a class="btn btn-sm btn-success" th:href="@{/employee/management}">新增员工</a></div>
                  <br/>
                  <div class="table-responsive">
<!--                    这里是展示员工的主要逻辑：其他地方都是样式设定，这里用table 展示数据，当后台传递过来数据，利用thymeleaf的遍历功能展示信息-->
                    <table class="table table-bordered table-hover ">
                      <thead>
                      <tr class="tab-header-area table-row-cell">
                        <th>编号</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>性别</th>
                        <th>部门</th>
                        <th>生日</th>
                        <th>操作</th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr th:each="item:${employeeList}">
                        <td th:text="${item.getId()}"></td>
                        <td th:text="${item.getLastName()}"></td>
                        <td th:text="${item.getEmail()}">12 May 2017</td>
<!--                        thymeleaf的三元表达式-->
                        <td th:text="${item.getGender()==0?'女':(item.getGender()==1 ? '男':null)}">12 May 2017</td>
                        <td th:text="${item.getDepartment()!=null?item.getDepartment().getDepartmentName():null}">12 May 2017</td>
<!--   日期格式转换：  #dates是thymeleaf提供的一个工具，它能帮我们展示想要的日期格式-->
                        <td th:text="${#dates.format(item.getBirthday(),'yyyy-MM-dd HH:mm:ss')}">Pending</label></td>
                        <td >
<!--  在修改的时候,我们需要把员工id传递给后台,后台得到员工的详细信息,之后进入修改页面,这里使用的restful风格. -->
                          <a th:href="@{/employee/toUpdatePage/}+${item.getId()}"  class="btn btn-sm btn-primary" th:text="修改" ></a>
                          <a th:href="@{/employee/delete/}+${item.getId()}" class="btn btn-sm btn-danger" th:text="删除"></a>
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="footer">
          <div class="card">
            <div class="card-body">
              <div class="d-sm-flex justify-content-center justify-content-sm-between py-2">
                <p class="text-center text-sm-left d-block d-sm-inline-block mb-0">Copyright © 2019 <a href="https://www.urbanui.com/" target="_blank">Urbanui</a>. All rights reserved.</p>
                <p class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center mb-0">Hand-crafted & made with <i class="mdi mdi-heart-outline text-muted icon-sm"></i></p>
              </div>
            </div>
          </div>
        </footer>
        <!-- partial -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
</div>


  <!-- container-scroller -->
  <!-- base:js -->
  <script th:src="@{/vendors/js/vendor.bundle.base.js}"></script>
  <!-- endinject -->
  <!-- Plugin js for this page-->
  <!-- End plugin js for this page-->
  <!-- inject:js -->
  <script th:src="@{/js/off-canvas.js}"></script>
  <script th:src="@{/js/hoverable-collapse.js}"></script>
  <script th:src="@{/js/template.js}"></script>
  <!-- endinject -->
  <!-- End custom js for this page-->
</body>

</html>

增加员工

侧边栏的新增员工以及员工信息都可以导航到新增员工页面：利用一个表单，获得需要新增的员工信息，提交给后台完成新增。

新增前台代码：

<!DOCTYPE html>
<html   xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Spica Admin</title>
    <!-- base:css -->
    <link rel="stylesheet" th:href="@{/vendors/mdi/css/materialdesignicons.min.css}">
    <link rel="stylesheet" th:href="@{/vendors/css/vendor.bundle.base.css}">
    <!-- inject:css -->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!-- endinject -->
    <link rel="shortcut icon" th:href="@{/images/favicon.png}" />
</head>

<body>
<div class="container-scroller d-flex">
    <nav  class="sidebar sidebar-offcanvas"  th:replace="~{commoms/commoms::sidebar}"></nav>
    <div class="container-fluid page-body-wrapper">
        <div th:insert="~{commoms/commoms::page-header}"></div>
        <!-- partial -->
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
<!--                                通过一个表单,填写员工之后,提交给后台-->
                                <form class="forms-sample" th:action="@{/employee/management}" method="post">
                                    <div class="form-group">
                                        <label for="exampleInputName1">姓名</label>
                                        <input type="text" class="form-control" name="lastName" id="exampleInputName1" placeholder="姓名">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleSelectDepartment">部门</label>
<!--                                        部门,由于是一个对象,这里传递给后台的是其id,需要后台处理一下.-->
                                        <select class="form-control" name="department.id" id="exampleSelectDepartment">
                                            <option th:each="item:${departmentList}" th:text="${item.getDepartmentName()}" th:value="${item.getId()}">开发部</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleSelectGender">性别</label>
                                        <select class="form-control" name="gender" id="exampleSelectGender">
                                            <option value="1">Male</option>
                                            <option value="0">Female</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputCity1">生日</label>
                                        <input type="text" class="form-control" name="birthday" id="exampleInputCity1" placeholder="出生日期">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputEmail3">邮箱地址</label>
                                        <input type="email" class="form-control" name="email" id="exampleInputEmail3" placeholder="邮箱">
                                    </div>
                                    <button type="submit" class="btn btn-primary mr-2">Submit</button>
                                    <button class="btn btn-light">Cancel</button>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- content-wrapper ends -->
            <!-- partial:../../partials/_footer.html -->
            <footer class="footer">
                <div class="card">
                    <div class="card-body">
                        <div class="d-sm-flex justify-content-center justify-content-sm-between py-2">
                            <p class="text-center text-sm-left d-block d-sm-inline-block mb-0">Copyright © 2019 <a href="https://www.urbanui.com/" target="_blank">Urbanui</a>. All rights reserved.</p>
                            <p class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center mb-0">Hand-crafted & made with <i class="mdi mdi-heart-outline text-muted icon-sm"></i></p>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- partial -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- base:js -->
<script th:src="@{/vendors/js/vendor.bundle.base.js}"></script>
<!-- endinject -->
<!-- inject:js -->
<script th:src="@{/js/off-canvas.js}"></script>
<script th:src="@{/js/hoverable-collapse.js}"></script>
<script th:src="@{/js/template.js}"></script>
<!-- endinject -->
<!-- plugin js for this page -->
<!-- End plugin js for this page -->
<!-- Custom js for this page-->
<script th:src="@{/js/file-upload.js}"></script>
<!-- End custom js for this page-->
</body>

</html>

修改员工

修改员工，从员工信息进入，首先把id给后台，查到该员工之后，进入修改页面，把该员工信息默认填入。修改之后提交给后台。

修改前台代码：

<!DOCTYPE html>
<html   xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Spica Admin</title>
    <!-- base:css -->
    <link rel="stylesheet" th:href="@{/vendors/mdi/css/materialdesignicons.min.css}">
    <link rel="stylesheet" th:href="@{/vendors/css/vendor.bundle.base.css}">
    <!-- inject:css -->
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <!-- endinject -->
    <link rel="shortcut icon" th:href="@{/images/favicon.png}" />
</head>

<body>
<div class="container-scroller d-flex">
    <nav  class="sidebar sidebar-offcanvas"  th:replace="~{commoms/commoms::sidebar}"></nav>
    <div class="container-fluid page-body-wrapper">
        <div th:insert="~{commoms/commoms::page-header}"></div>
        <!-- partial -->
        <div class="main-panel">
            <div class="content-wrapper">
                <div class="row">
                    <div class="col-12 grid-margin stretch-card">
                        <div class="card">
                            <div class="card-body">
                                <form class="forms-sample" th:action="@{/employee/update}" method="post">
                                    <input th:value="${emp.getId()}"  name="id" type="hidden">
                                    <div class="form-group">
                                        <label for="exampleInputName1">姓名</label>
                                        <input type="text" class="form-control" name="lastName" th:value="${emp.getLastName()}" id="exampleInputName1" placeholder="Name">
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleSelectDepartment">部门</label>
                                        <select class="form-control" name="department.id" id="exampleSelectDepartment" >
                                            <option  th:each="item:${departmentList}" th:text="${item.getDepartmentName()}" th:value="${item.getId()}" th:selected="${emp.getDepartment().getId()==item.getId()}">开发部</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleSelectGender">性别</label>
                                        <select class="form-control" name="gender" id="exampleSelectGender" >
                                            <option th:selected="${emp.getGender()==1}" value="1">男</option>
                                            <option th:selected="${emp.getGender()==0}" value="0">女</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="exampleInputCity1">生日</label>
<!--                                        #calendars.format(Date,pattern): 当date是变量，就不需要${}  而是直接对象获取-->
                                        <input type="text" class="form-control" th:value="${#calendars.format(emp.getBirthday(),'yyyy/MM/dd HH:mm:ss')}" name="birthday" id="exampleInputCity1" placeholder="生日">
                                    </div>

                                    <div class="form-group">
                                        <label for="exampleInputEmail3">邮箱地址</label>
                                        <input type="email" class="form-control" th:value="${emp.getEmail()}" name="email" id="exampleInputEmail3" placeholder="Email">
                                    </div>
                                    <button type="submit" class="btn btn-primary mr-2">Submit</button>
                                    <button type="button" class="btn btn-light" >Cancel</button>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <!-- content-wrapper ends -->
            <!-- partial:../../partials/_footer.html -->
            <footer class="footer">
                <div class="card">
                    <div class="card-body">
                        <div class="d-sm-flex justify-content-center justify-content-sm-between py-2">
                            <p class="text-center text-sm-left d-block d-sm-inline-block mb-0">Copyright © 2019 <a href="https://www.urbanui.com/" target="_blank">Urbanui</a>. All rights reserved.</p>
                            <p class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center mb-0">Hand-crafted & made with <i class="mdi mdi-heart-outline text-muted icon-sm"></i></p>
                        </div>
                    </div>
                </div>
            </footer>
            <!-- partial -->
        </div>
        <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
</div>
<!-- container-scroller -->
<!-- base:js -->
<script th:src="@{/vendors/js/vendor.bundle.base.js}"></script>
<!-- endinject -->
<!-- inject:js -->
<script th:src="@{/js/off-canvas.js}"></script>
<script th:src="@{/js/hoverable-collapse.js}"></script>
<script th:src="@{/js/template.js}"></script>
<!-- endinject -->
<!-- plugin js for this page -->
<!-- End plugin js for this page -->
<!-- Custom js for this page-->
<script th:src="@{/js/file-upload.js}"></script>
<!-- End custom js for this page-->
</body>

</html>

删除员工：

删除员工，从员工信息页面进入，不许另外提供页面，传递id给后台，删除之后，再重定向到员工列表即可。

url也是restful风格：

前台拼参数使用‘+’

<!--  在修改的时候,我们需要把员工id传递给后台,后台得到员工的详细信息,之后进入修改页面,这里使用的restful风格. -->
<a th:href="@{/employee/toUpdatePage/}+${item.getId()}"  class="btn btn-sm btn-primary" th:text="修改" ></a>
<a th:href="@{/employee/delete/}+${item.getId()}" class="btn btn-sm btn-danger" th:text="删除"></a>

后台控制器代码：

由于目前没有集成数据库，此处，再controller层，构造两个静态list模拟数据库表。

package com.wang.controller;


import com.sun.org.apache.xpath.internal.operations.Mod;
import com.wang.pojo.Department;
import com.wang.pojo.Employee;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.websocket.server.PathParam;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.Date;
import java.util.List;
import java.util.function.UnaryOperator;

@Controller
public class EmployeeController {
        static List<Employee>  listEmployee ;
        static List<Department> listDepartment ;
    static {
        Department department1 = new Department(0,"开发部");
        Department department2 = new Department(1,"测试部");
        Department department3 = new Department(2,"人事部");

        Employee employee = new Employee(1,"wangzhpan1","ang@qo.com",0,department1,new Date());
        Employee employee1 = new Employee(2,"wangzhpan2","ang@qo.com",1,department2,new Date());
        Employee employee2 = new Employee(3,"wangzhpan3","ang@qo.com",0,department3,new Date());
        Employee employee3 = new Employee(4,"wangzhpan4","ang@qo.com",0,department1,new Date());

        listEmployee = new ArrayList<>();
        listEmployee.add(employee);
        listEmployee.add(employee1);
        listEmployee.add(employee2);
        listEmployee.add(employee3);

        listDepartment = new ArrayList<>();
        listDepartment.add(department1);
        listDepartment.add(department2);
        listDepartment.add(department3);
    }

    @RequestMapping("/table")
    public String goTable(Model model){
        //    实现所有员工信息返回给前台
        model.addAttribute("employeeList",listEmployee);
        return "basic-table";
    }

//    部门信息查询,返回给前台,当需要新增一个员工时,部门是下拉选择,所以需要提前得到
    @RequestMapping("/employee/management")
    public String manangeEmployee(Model model){
        model.addAttribute("departmentList",listDepartment);
        return "add-employee";
    }


//    新增员工:
//    由于没有数据库,我在这个controller类中预制了员工和部门的list,模拟数据表
    //当前台新增时，会传递过来对应的信息过来。我这里需要定义id,以及补全部门信息，因为前台传过来的时部门id
    @PostMapping("/employee/management")
    public String addEmployee(Employee employee,Model model){
        System.out.println(employee);
        employee.setId(listEmployee.get(listEmployee.size()-1).getId()+1);
        employee.setDepartment(listDepartment.get(employee.getDepartment().getId()));
        listEmployee.add(employee);
//        数据存储完成，重定向到展示所有员工的controller url
        return "redirect:/table";
    }


//    修改员工，跳转到修改页面，需要查出员工给前台
    @GetMapping("/employee/toUpdatePage/{empId}")
    public String directToUpdatePage(@PathVariable(value = "empId") int id, Model model){
        Employee employee = null;
        for (Employee employee1 : listEmployee) {
            if (employee1.getId() == id) {
                employee = employee1;
            }
        }
        model.addAttribute("emp",employee);
        model.addAttribute("departmentList",listDepartment);
        return "modify-employee";
    }

//    后端修改逻辑
    @PostMapping("/employee/update")
    public String updateEmployee(Employee employee){
        employee.setDepartment(listDepartment.get(employee.getDepartment().getId()));
//        遍历list,修改对应的员工
        for (int i=0;i<listEmployee.size() ;i++) {
            if (listEmployee.get(i).getId() == employee.getId()) {
                listEmployee.set(i,employee);
            }
        }
        return "redirect:/table";
    }


    //    删除逻辑
    @GetMapping("/employee/delete/{empId}")
    public String deleteEmployee(@PathVariable(value = "empId") int id, Model model){
        for (int i=0;i<listEmployee.size() ;i++) {
            if (listEmployee.get(i).getId() == id) {
                listEmployee.remove(i);
            }
        }
        return "redirect:/table";
    }

}

改变自己2022

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
springboot项目--模拟增删改查

Springboot模拟增删改查功能，目前没有集成数据库：所以主要是以前台逻辑，使用thymeleaf能更加方便处理后台的数据。查询员工功能描述：从侧边栏的员工信息点击之后，从后台查询所有员工并展示：并且可以添加员工，修改，删除。1.员工展示页面对于这样的功能需求：主要是会遍历后台过来的数据。thymeleaf提供的遍历：th:each三元表...
复制链接

扫一扫