【技术栈】【SpringBoot】基于SpringBoot的员工管理系统（简易版）

第一步：员工管理系统：准备工作 

一、创建SpringBoot项目，导入静态资源

其中首页、404、登录页面、员工列表放在templates目录下，css，图片，js资源放在静态目录下

二、导入maven依赖

一共需要两个maven依赖

lombok

一个是lombook，用于编写实体类的时候偷工减料

<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

thymeleaf 

还有一个是thymeleaf，必须导入，用于页面跳转，如果不加入，则无法正常完成页面跳转

<dependency>
    <groupId>org.thymeleaf.extras</groupId>
    <artifactId>thymeleaf-extras-java8time</artifactId>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
</dependency>

 三、编写pojo层，模拟数据库

 Employee

@AllArgsConstructor
@NoArgsConstructor
@Data
public class Employee {
    private Integer ID;
    private String name;
    private Integer sex;
    private Department department;

}

Department

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Department {
    private Integer departmentID;
    private String departmentName;
}

四、编写Dao层实现功能

注意事项：

        1.该项目算是Dao层与Service层合并，所以每个Dao层一定都要配置到Spring中，以便后期自动装配的使用

DepartmentDao

静态代码用于模拟数据库

获取所有部门的方法，直接返回map.values()

根据部门返回ID方法，返回map.get（id）

@Repository
public class DepartmentDao {

    private static Map<Integer, Department> departmentMap=null;
    static {
        departmentMap = new HashMap<>();
        departmentMap.put(1001,new Department(1001,"科研部"));
        departmentMap.put(1002,new Department(1002,"学习部"));
        departmentMap.put(1003,new Department(1003,"后勤部"));
        departmentMap.put(1004,new Department(1004,"计算部"));
        departmentMap.put(1005,new Department(1005,"金融部"));
    }
    //获取所有部门
    public Collection<Department> getDepartments(){
        return departmentMap.values();
    }

    //根据ID返回部门
    public Department getDepartmentByID(int ID){
        return departmentMap.get(ID);
    }
}

EmployeeDao

静态代码段用于注入数据

新增员工方法，首先先判断员工的id是不是null，如果是则让模拟的主键赋值给传入的对象并自增，然后将employee对象完善后放入模拟的数据库中

查找员工方法，传入员工id，map.get员工id

删除员工方法，传入员工id，map.remove员工id

查找所有员工，同DempartmentDao的方法一样

@Repository
public class EmployeeDao {
    @Autowired
    private DepartmentDao departmentDao;
    private static Map<Integer, Employee> employeeMap=null;
    private static DepartmentDao department = new DepartmentDao();
    static{
        employeeMap = new HashMap<>();
        employeeMap.put(1001,new Employee(1001,"AA",1,department.getDepartmentByID(1001)));
        employeeMap.put(1002,new Employee(1002,"BB",0,department.getDepartmentByID(1002)));
        employeeMap.put(1003,new Employee(1003,"CC",1,department.getDepartmentByID(1003)));
        employeeMap.put(1004,new Employee(1004,"DD",0,department.getDepartmentByID(1005)));
        employeeMap.put(1005,new Employee(1005,"EE",1,department.getDepartmentByID(1004)));
    }
    private static Integer PRIMARY=1006;
    
    //增加一个员工
    public void addEmployee(Employee employee){
        if(employee.getID()==null){
            employee.setID(PRIMARY++);
        }
        employee.setDepartment(departmentDao.getDepartmentByID(employee.getDepartment().getDepartmentID()));
        employeeMap.put(employee.getID(),employee);
    }
    //查找一个员工
    public Employee findEmployee(int ID){
        return employeeMap.get(ID);
    }
    //删除一个员工
    public void deleteEmployee(int ID){
        employeeMap.remove(ID);
    }
    //查找所有员工
    public Collection<Employee> findEmployees(){
        return employeeMap.values();
    }
}

 此处要单独说明一下添加员工的操作

因为后期从前端传来的部门数据只有部门的ID，但是部门的名称是null，所以添加的employee需要先根据ID来获取department的所有信息，然后再插入到虚拟数据库Map中

自此，准备工作完成

第二步：员工管理系统：首页实现

 一、创建首页链接

首先在config文件夹下创建一个MyMvcConfig类，并继承WebMvcConfiger接口用于扩展SpringMvc，然后在类中重写视图解析器，并在重写的方法中添加 "/" "/index"的url，让这两个url访问时都转到本地的index.html文件中，具体流程图如下

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("index");
        registry.addViewController("/index").setViewName("index");
        registry.addViewController("/index.html").setViewName("index");
    }
}

这里在maven中引入thymeleaf依赖的作用就体现了，如果不引入，此处setViewName的目标路径将会找不到，一启动服务器就回404

还有就是@Configuration一定要加，否则这些额外的配置将不会生效

成功运行后

发现css等静态资源没有被导入，查看首页的html代码

首页的图片无法被加载，这就需要thymeleaf的支持了

第一步，在html中引入thymeleaf依赖

xmlns:th="http://www.thymeleaf.org"

 然后将本地图片的href前面加上th:，然后将地址改为@{目标目录}

 重新运行后，首页的图片信息就可以显示了

 而且不管访问localhost:8080/或者localhost:8080/index都可以返回到首页

然后将剩下三个页面的href也修改了，保证图片信息可以正常显示

第三步：员工管理系统：登录功能实现

一、具体流程

 熟悉流程后，开始代码实现

 二、需要做的步骤为

        1.在前段index.html页面中找到输入用户名和密码的form表单

        2.将前端输入的用户名和密码作为变量存储

        3.提交后将表单数据返回到后端的Controller层

        4.Controller层调用Service层（当然这个项目并没有Service层，而且登录功能在Dao层也没有实现，就是MVC三层架构思想，此处直接写判断就可以）判断输入的用户名和密码是否正确。

        正确则将用户信息存入session，进入主页

        错误则提示用户输入信息错误，不保存信息，继续在登陆页面

        5.在输入错误后，前端显示用户名密码错误

        6.在登陆后，在url中隐藏用户的用户名和密码

三、按照流程实现

1.首先先在index首页找到前端的输入用户名密码表单

2.将form表单中前端输入的username和password作为数据存储，并且修改表单的action，让表单返回的信息进入LoginController中

 3.提交数据返回Controller层的原理

将数据返回到LoginController层后

@Controller
public class LoginController {

    @RequestMapping("/user/login")
    String login(@RequestParam("Username") String Username, @RequestParam("Password") String Password, Model model, HttpSession session){
        if(Username!=null&&Password.equals("123456")){
            session.setAttribute("LoginUser", Username);
            return "dashboard";
        }else{
            model.addAttribute("msg","用户名或密码错误！");
            return "index";
        }
    }
}

标注为@RequestParam是为了使后端工程师知道这个变量是由前端申请过来的，更多的是一种规范，而不是必须要的

Model用于向前端发送数据

Session用于将前端发送来的数据保存到后端

判断用户输入的密码，如果正确保存用户Session并转到首页

如果不正确向前端传递msg表示输入密码错误，返回首页

还有一个目标就是

 5.输入错误后再红框的位置上输出用户名或密码错误

首先要在前端找到要插入的位置

找到Please sign in，直接在下方添加即可

<p style="color: red" th:text="${msg}" th:if="${! #strings.isEmpty(msg)}"></p>

 插入此行代码，作用是判断model传入的msg是否为空，如果为空则说明还没有登录或者登陆成功，登陆成功已经进入主页了，所以此处为空的话就说明还没有点击登录

当密码错误时后端Model会向前端传递msg，前端判断msg不为空时则会输出msg中的内容（即为用户名或密码错误）

style是设置字体颜色的

成果：

输入错误后

但此时登录成功后，又引出了一个问题

用户的用户名和密码显式的显示在url中，这显然不是我们想看到的，所以我们需要处理这个问题

 6.隐藏用户的用户名和密码

相当于从原本的

 转换为

加了一层，这样就可以将原本显示在首页url的用户名和密码转换为main.html

此处不生效的原因是MyMvcConfig类没有加@Configeration注解，导致额外的配置没有生效

第四步 员工管理系统：登录拦截器

一、原理

 在上面登录的基础上加一层拦截器，拦截器的作用是如果用户直接通过输入网址来强行到达主页，拦截器会首先判断用户有没有session（只有成功登陆用户才会有session存入，没有session的其他情况都会被视为非法进入），然后通过拦截器进行拦截

二、实现的具体流程

        1.创建拦截器，并编写拦截器内容

        2.在网站中注册拦截器

三、流程实现

1.编写拦截器

创建LoginHandlerInterceptor类，继承HandlerInterceptor，重写preHandle方法先从session中获取用户信息，如果用户信息为空，说明非法登录，向前端返回文字，将用户重定向到主页，返回false（表示不同行）

否则则直接通行

public class LoginHandlerInterceptor implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        Object user = request.getSession().getAttribute("LoginUser");

        if (user == null) {
            request.setAttribute("msg", "您没有权限,请先登录");
            request.getRequestDispatcher("/index.html").forward(request, response);
            return false;
        } else {
            return true;
        }
    }
}

2.注册拦截器

在MyMvcConfig中重写addInterceptors方法

@Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new LoginHandlerInterceptor())
                .addPathPatterns("/**")
                .excludePathPatterns("/","/index.html","/user/login","/css/*","/img/*","/js/*");
    }

其中addInterceptor是填写要注册的类.addPathPatterns是代表这个拦截器在那些网址中生效

/**代表所有，具体区别查看自己的另一篇博客

/ /* /**的区别_Elephant_King的博客-CSDN博客

最厚的excludePathPatterns代表在上面添加的网址中除了那些网址其他都生效

注意：此处填写的是本地文件或者是Controller中的RequestMapping中的文件，注意需要放行css和img文件夹下的文件，否则网址的图片之类的内容将都无法显示

测试

 拦截成功

第五步 员工管理系统：展示员工列表

一、具体流程

 二、具体操作步骤

        1.因为每个页面都含有相同的侧边栏和头导航栏，所以可以吧侧边栏和头部导航栏提取成一个一个commons文件，这样如果需要改侧边栏和头部导航栏的话，只需要修改commons，

        2.找到侧边栏中Customer在前端中的位置，将名称改为员工列表，并把href传递到后端操作

        3.编写后端操作，让Controller层调用Dao层获取全部员工信息并返回给前端，并使页面跳转到list.html页面

        4.编写list.html前端页面，让其可以变成显示员工信息的形式

        5.修改登录首页的herf地址，让其可以成功定位到首页

        6.解决高亮问题

三、操作实现

1.提取公共页面

 在dashboard和list中找到代表侧边栏和头部的代码，将其复制到commons文件夹下的commons.html中，并在commons.html中引入thymeleaf配置，然后将其配置上th:fragment用于其他页面的调用。

 在需要头部和侧边栏的页面的对应位置中调用,注意调用的用法

2.修改侧边栏customer的信息

 找到这个li标签是代表Customer的，其中svg是代表图表，Customer是文字，将文字修改为员工列表，将href转到后端对应的/emps的位置上。

3.编写controller

注意：前面将list放到了emp文件夹下，所以下面的跳转是跳转到/emp/list

@Controller
public class EmployeeController {

    @Autowired
    private EmployeeDao employeeDao;

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

首先要调用Dao层用于获取所有员工信息，需要自动装配employeeDao

然后通过model将信息传递给前端

此处玩了个重定向，还需要再去MyMvcConfig中配置一下（我怕找不到）

（TMD还不能玩重定向，重定向完了以后前端找不到后端传过来的数据了，哈哈哈哈哈哈）

4.编写list.html文件

光获得了员工信息不行，还得在让前端显示出来

 找到list的这个位置，thead是文件显示的头部，tbody是用户显示的信息，下面题目中的这些tr都是直接在前段模拟数据，直接删了变成后端调用数据

类似于这么个关系

 编写为这样，emp负责遍历获取从后端传来的Employee集合，然后按照头部的顺序依次打印每一个emp的所有数据

注意：对应的Controller不能玩重定向，玩了重定向后端传入前端的数据就无法被找到了（emps会爆红）

测试

成功

现在还有两个问题，第一个是如果返回首页则不会返回本地首页，而是会返回官方的超链接首页

还有一个就是点了员工管理，应该员工管理高亮，而不是还是首页高亮

5.解决无法返回首页的问题

就两步，一步将首页对应的超链接修改到本地Controller

一步本地Controller跳转到本地首页

在commons中找到首页对应的位置

修改herf到本地，顺便把首页Dashboard修改为中文

 编写Controller

@RequestMapping("/main")
public String index(){
    return "redirect:/main.html";
}

没啥好说的，实现完成

6.解决选择高亮问题

具体流程

 注意：

        高亮为        nav-link active

        普通为        nav-link

 在dashboard和list中分别传入avtive为main和list

 在前端分别判断avtive是不是这个选项的值，如果是的话就高亮，不是的话就不高亮

测试，完美

第六步 员工管理系统：增加员工信息

一、流程 

 二、操作步骤

        1.在list页面创建一个添加员工的图标，点击后转到Controller

        2.在后端接收请求，向前端存入department后跳转到add界面

        3.编写add界面

        4.将add界面的form表单传回后端，自动封装成对象后由Controller调用Dao将对象存入，然后返回主界面

三、具体实现

        1.创建图标

希望在这个地方创建一个图标，找到前端的对应位置插入

效果

 2.编写Controller

    @GetMapping("/emp/add")
    public String toAddPage(Model model){
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("department",departments);
        return "emp/add";
    }

 注意一定要自动注入departmentDao

一共干两件事，一个是把所有部门返回给前端，另一个是跳转到add页面

3.编写add页面

网上找个模板导入

<form>
	<div class="form-group">
		<label>LastName</label>
		<input type="text" class="form-control" placeholder="lastname:zsr">
	</div>
	<div class="form-group">
		<label>Gender</label><br/>
		<div class="form-check form-check-inline">
			<input class="form-check-input" type="radio" value="1">
			<label class="form-check-label">男</label>
		</div>
		<div class="form-check form-check-inline">
			<input class="form-check-input" type="radio" value="0">
			<label class="form-check-label">女</label>
		</div>
	</div>
	<div class="form-group">
		<label>department</label>
		<!--注意这里的name是department.id，因为传入的参数为id-->
		<select class="form-control">
		</select>
	</div>
	<button type="submit" class="btn btn-primary">添加</button>
</form>

 第一步要先将前端的数据对应到后端的模拟数据库字段，也就是在input中加name标签，注意name中的变量名一定要对应到pojo层的变量名，否则自动封装会出错！

注意输入department.departmentID而不是department.id

其中department因为要在前段遍历每一个部门的名称，所以前端接收后端传来的department数据，th:text是前端显示的数据，th:value是后端接收到前端的数据 

from表单自动封装后向后端传入post请求（Restful风格）

4.编写后端数据 

    @PostMapping("emp/add")
    public String addEmployee(Employee employee){
        System.out.println("==========>"+employee);
        employeeDao.addEmployee(employee);
        return "redirect:/emps";
    }

 输入数据，返回员工页面

第七步 员工管理系统：修改员工信息

一、流程

与添加员工类似，只不过需要隐式的传入参数，并且在Controller层调用修改方法

二、实现流程

        1.创建员工按钮，点击后进入Controller层

        2.编写Controller层

        3.在前端页面中显示数据

        4.保存修改后的信息并返回用户首页

三、具体实现

        1.编写按钮

预期是这样的按钮，每一个员工都有一个修改按钮，所以应该添加在tbody内部 

 注意此处的href是需要拼接上用户的id的这样后端可以直接从url中获取需要修改用户的 ID，

        2.编写Controller层

@RequestMapping("/emp/{id}")
    public String toUpdateEmp(@PathVariable("id") Integer id,Model model){
        Collection<Department> departments = departmentDao.getDepartments();
        model.addAttribute("department",departments);
        Employee employee = employeeDao.findEmployee(id);
        model.addAttribute("emp",employee);
        return "emp/update";
    }

 与添加员工相同，先向前端返回部门信息

然后根据前端url中传来的id找到用户对象，向前端返回用对象用于前端对于信息的显示

        3.修改update.html

主要就这三个值，name是确定的所以直接显示，sex需要判断是0还是1，部门需要判断部门ID和雇员的部门ID是否相等 

 修改form表单得到href使其到对应的Controller，因为update对应的Controller也是调用的添加员工信息方法，所以需要隐式的导入员工ID，否则用户如果没有ID就会导致主键自增

增加员工方法 

        4.编写提交后的Controller

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

没啥好说的，进入，更新数据，跳转

第八步 员工管理系统：删除员工信息

一、流程

更没啥好说的了

二、实现流程

        1.在list添加按钮，跳转到后端

        2.编写Controller根据url中返回的信息来删除对应的员工信息，并返回主页

三、具体实现

        1.添加按钮

与上面类似

在相同的位置添加按钮，只不过设置为红色

         2.编写Controller层

@GetMapping("/empdel/{id}")
    public String delEmp(@PathVariable("id") int id){
        employeeDao.deleteEmployee(id);
        return "redirect:/emps";
    }

删除并返回主页 

第九步 员工管理系统：404

直接在templates文件夹下创建error文件，当网站出现对应的错误时会自动到这个文件夹寻找需要调用哪个文件（例如404就调用404.html）

第十步 员工管理系统：退出

一、具体流程

        1.点击退出，进入Controller

        2.编写Controller，清除用户Session并返回首页

二、具体实现

        1.在头部找到对应的退出位置

将href改为后端位置

        2.编写Controller

@RequestMapping("/logout")
    public String logout(HttpSession session){
        session.invalidate();
        return "index";
    }

 清除session，返回主页

问题总结

1.  thymeleaf，必须导入，用于页面跳转，如果不加入，则无法正常完成页面跳转
2.  因为后期从前端传来的部门数据只有部门的ID，但是部门的名称是null，所以添加的employee需要先根据ID来获取department的所有信息，然后再插入到虚拟数据库Map
3.  每个类的装配注解一定要加，否则不会生效
4.  Controller层通过重定向来进行跳转时，后端通过Model传入的信息将不会生效
5.  前端 name标签一定要和后端pojo中的名称对应完全一样，否则则会出现自动封装不成功的问题