SpringBoot+VUE+ MyBatis实现人事管理系统（已开源）

 程序员小王的博客：程序员小王的博客
 欢迎点赞  收藏 ⭐留言 
 如有编辑错误联系作者，如果有比较好的文章欢迎分享给我，我会取其精华去其糟粕
java自学的学习路线：java自学的学习路线

一、项目说明

本《人事管理系统》的浏览器端使用 VUE 框架来实现，服务端使用 Spring Boot + MyBatis 来实现，数据库使用了 MySQL。就是一个简单的学习前后端分离的项目，自己主要是做java开发的，所以前端vue没有过多的样式，只用来展示页面，如果想简单实现一个前后端分离的项目实现思路可以看这里；前后端项目的项目启动方法和看文章末尾。

二、项目预览

该项目就是实现了前后端分离，然后实现了员工的增删改查

1、登录首页：

• 点击登录系统人事管理系统后就到达员工展示页面

2、这是员工展示页面

3、这是添加员工页面

4、这是修改员工页面实现了数据回显

三、vue实现前端代码实现 1、前端项目结构图

2、component组件

3、router路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/Emps',
      name: 'Emps',
      component: ()=>import("../components/Emps")
    }
  ]
})

4、App.vue

四、SpringBoot+Mybatis后端代码实现 1、后端项目结构图

2、sql语句实现

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for t_emp
-- ----------------------------
DROp TABLE IF EXISTS `t_emp`;
CREATE TABLE `t_emp`  (
  `id` int NOT NULL AUTO_INCREMENT,
  `name` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `salary` double NOT NULL,
  `age` int NOT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 11 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of t_emp
-- ----------------------------
INSERT INTO `t_emp` VALUES (2, '杨福君', 9000, 19);
INSERT INTO `t_emp` VALUES (8, '王恒杰', 12000, 21);
INSERT INTO `t_emp` VALUES (12, '邓正武', 20000, 22);
INSERT INTO `t_emp` VALUES (13, '周宣君', 18000, 23);
INSERT INTO `t_emp` VALUES (14, '吴洪旭', 2000, 23);

SET FOREIGN_KEY_CHECKS = 1;

3、相关依赖pom.xml

 
  
    org.springframework.boot
    spring-boot-starter-parent
    2.2.5.RELEASE
  
  
    
    
      org.springframework.boot
      spring-boot-starter
    
    
      org.mybatis.spring.boot
      mybatis-spring-boot-starter
      2.1.2
    

    
    
      org.springframework.boot
      spring-boot-starter-web
    

    
    
      mysql
      mysql-connector-java
      8.0.16
    

    
    
      com.alibaba
      druid
      1.1.12
    

    
    
      org.springframework.boot
      spring-boot-starter-test
    

  

4、application.yml

server:
  port: 8080
  servlet:
    context-path: /ems
spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource  #数据源类型
    driver-class-name: com.mysql.cj.jdbc.Driver   #加载驱动
    url: jdbc:mysql://localhost:3306/ems?useSSL=false&serverTimezone=UTC
    username: root
    password: root
mybatis:
  mapper-locations: classpath:com/tjcu/mapper/*Mapper.xml #指定mapper文件所在的位置,其中classpath必须和mapper-locations分开
  type-aliases-package: com.tjcu.entity

5、Controller控制层

@Controller
@CrossOrigin
@ResponseBody
public class EmpController {
    @Autowired
    private EmpService empService;

    @RequestMapping("/emp/queryAll")
    public  List queryall(){
        List emps = empService.showEmp();
        return emps;
    }

    
    @RequestMapping("/emp/delete")
    public void delete(Integer id){
        empService.deleteById(id);
    }
    @RequestMapping("/emp/add")
    public void add(@RequestBody Emp emp){
        if(emp.getId()!=null){
            empService.updateEmp(emp);
        }else {
            emp.setId(null);
            empService.insertEmp(emp);
        }
    }

    @RequestMapping("/emp/queryOne")
    public Emp query(Integer id){
        Emp emp = empService.selectEmpById(id);
        return emp;
    }
}

6、mapper文件

    
        insert into t_emp
        values (#{id}, #{name}, #{salary}, #{age})
    

    
        select *
        from t_emp
    

    

        update t_emp
        
            
                name=#{name},
            
            
                salary=#{salary},
            
            
                age=#{age}
            
        
        where id=#{id}
    

    
        delete from t_emp where id=#{id}
    
    
        select *
        from t_emp where id=#{id}
    

五、项目开源地址及启动方法 1、项目开源地址

• 开源地址：SpringBoot+mybatis+vue实现人事管理系统（前后端分离）
• 前端代码位置:

• Springboot+mybatsi后端的代码位置在back分支里面

2、项目启动方法 （1）前端

• 安装教程

1. npm i
2. npm run dev
3. npm run build

• 使用说明

1. 需要安装nodejs
2. 用WebStorm 2020.3 x64打开即可
3. 默认端口是8081，可自行更改

（2）后端