进阶SpringBoot之员工管理系统（5）展示员工列表和添加员工

Employee.java：模拟员工表

package com.demo.web.pojo;

import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.Date;

//员工表
@Data
@NoArgsConstructor
public class Employee {
    private Integer id;
    private String lastName;
    private String email;
    private Integer gender;  //0：女  1：男
    private Department department;
    private Date birthday;

    public Employee(Integer id, String lastName, String email, Integer gender, Department department) {
        this.id = id;
        this.lastName = lastName;
        this.email = email;
        this.gender = gender;
        this.department = department;
        //默认创建日期
        this.birthday = new Date();
    }
}

EmployeeDao.java：模拟员工数据库数据

package com.demo.web.dao;

import com.demo.web.pojo.Department;
import com.demo.web.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

//员工dao
@Repository
public class EmployeeDao {

    //模拟数据库中的数据
    private static Map<Integer, Employee> employees = null;

    //员工所属部门
    @Autowired  //自动装配
    private DepartmentDao departmentDao;

    static {
        employees = new HashMap<Integer, Employee>(); //创建一个员工表

        employees.put(1001,new Employee(1001,"张三1","123@qq.com",1,new Department(101,"研发部")));
        employees.put(1002,new Employee(1002,"张三2","123@qq.com",0,new Department(102,"测试部")));
        employees.put(1003,new Employee(1003,"张三3","123@qq.com",1,new Department(103,"运维部")));
        employees.put(1004,new Employee(1004,"张三4","123@qq.com",0,new Department(104,"产品部")));
    }

    //主键自增
    private static Integer initId = 1005;

    //增加一个员工
    public void save(Employee employee) {
        if(employee.getId()==null){
            employee.setId(initId++);
        }
        employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId()));
        employees.put(employee.getId(),employee);
    }

    //查询所有员工信息
    public Collection<Employee> getAll() {
        return employees.values();
    }

    //通过id查询员工
    public Employee getEmployeeById(Integer id) {
        return employees.get(id);
    }

    //通过id删除员工
    public void delete(Integer id) {
        employees.remove(id);
    }

}

EmployeeController.java：

把模拟数据库的类 @Autowired 自动装配 Bean

调用 EmployeeDao 的方法查询所有员工信息

addAttribute 用于将数据绑定到请求对象中的方法，以便在后续的页面中获取这些数据

返回 emp 目录下的 list.html 页面

import com.demo.web.dao.EmployeeDao;
import com.demo.web.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;

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";
    }
}

list.html：

<div th:insert="~{commons/commons::topbar}"></div>

<div class="container-fluid">
	<div class="row">

		<div th:insert="~{commons/commons::sidebar(active='list.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="@{/emp}">添加员工</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>birthday</th>
						<th>option</th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="emp:${emps}">
						<td th:text="${emp.getId()}"></td>
						<td>[[${emp.getLastName()}]]</td>
						<td th:text="${emp.getEmail()}"></td>
						<td th:text="${emp.getGender()==0?'女':'男'}"></td>
						<td th:text="${emp.getDepartment()}"></td>
						<td th:text="${#dates.format(emp.getBirthday(), 'yyyy-MM-dd HH:mm:ss')}"></td>
						<td>
							<!-- <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.getId()}">编辑</a> -->
							<a class="btn btn-sm btn-primary">编辑</a>
							<a class="btn btn-sm btn-danger">删除</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		</main>
	</div>
</div>

效果如下：

员工列表展示：

1.提取公共页面

th:fragment="sidebar"

th:replace="~{commons/commons::topbar}"

如果要传递参数，直接使用 () 传参，接收判断即可

2.列表循环展示

添加员工：

1.按钮提交

2.跳转到添加页面

3.添加员工成功

4.返回首页

DepartmentDao.java：

package com.demo.web.dao;

import com.demo.web.pojo.Department;
import org.springframework.stereotype.Repository;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

//部门dao
@Repository
public class DepartmentDao {

    //模拟数据库中的数据
    private static Map<Integer, Department> departments = null;
    static {
        departments = new HashMap<Integer,Department>(); //创建一个部门表

        departments.put(101,new Department(101,"研发部"));
        departments.put(102,new Department(102,"测试部"));
        departments.put(103,new Department(103,"运维部"));
        departments.put(104,new Department(104,"产品部"));
    }

    //获取所有部门信息
    public Collection<Department> getDepartments() {
        return departments.values();
    }

    //通过id获取部门信息
    public Department getDepartmentById(Integer id) {
        return departments.get(id);
    }
}

EmployeeController.java：

import com.demo.web.dao.DepartmentDao;
import com.demo.web.dao.EmployeeDao;
import com.demo.web.pojo.Department;
import com.demo.web.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.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import java.util.Collection;

@Controller
public class EmployeeController {
    @Autowired //自动装配
    EmployeeDao employeeDao;
    @Autowired
    DepartmentDao departmentDao;

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

    @GetMapping("/emp")
    public String toAddpage(Model model){
        //查出所有部门信息
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("departments",departments);
        return "emp/add";
    }

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

emp 目录下 add.html：

<div th:insert="~{commons/commons::topbar}"></div>
<div class="container-fluid">
	<div class="row">

		<div th:insert="~{commons/commons::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 class="form-control" placeholder="名字" type="text" name="lastName">
				</div>
				<div class="form-group" ><label>Email</label>
					<input class="form-control" placeholder="123@qq.com" type="email" name="email">
				</div>
				<div class="form-group"><label>Gender</label><br/>
					<div class="form-check form-check-inline">
						<input class="form-check-input" name="gender" type="radio" value="1">
						<label class="form-check-label">男</label>
					</div>
					<div class="form-check form-check-inline">
						<input class="form-check-input" name="gender" type="radio" value="0">
						<label class="form-check-label">女</label>
					</div>
				</div>
				<div class="form-group" ><label>department</label>
					<select class="form-control" name="department.id">
						<option th:each="dept:${departments}" th:text="${dept.getDepartmentName()}" th:value="${dept.getId()}"></option>
					</select>
				</div>
				<div class="form-group" >
					<label>Birthday</label>
					<input class="form-control" placeholder="2024-08-15" type="text" name="birthday">
				</div>
				<button class="btn btn-primary" type="submit">添加</button>
			</form>
		</main>
	</div>
</div>

效果如下：

时间日期格式化：

# 时间日期格式化
spring.mvc.date-format=yyyy-MM-dd

添加成功！