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";
}
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
