0
0

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

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

一、项目说明

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

二、项目预览

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

1、登录首页：

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

2、这是员工展示页面

3、这是添加员工页面

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

三、vue实现前端代码实现

1、前端项目结构图

2、component组件

  1. <template><div><h3>{{ msg }}</h3><hr/><h4><a href="javascript:;">添加员工</a></h4><table border="1px" cellpadding="0px" width="100%"><tr><td>编号</td><td>名称</td><td>薪资</td><td>年龄</td><td>操作</td></tr><tr v-for="(emp,index) in emps":key="emp.id"><td>{{ index +1}}</td><td>{{ emp.name }}</td><td>{{ emp.salary }}</td><td>{{ emp.age }}</td><td><a href="javascript:;" @click.prevent="del(emp.id)">删除</a><a href="javascript:;"
  2.                                                                           @click.prevent="queryOne(emp.id)">修改</a></td></tr></table><hr/><h3>{{ fun }}员工信息</h3><form><input type="hidden" readonly v-model="emp.id"><br/>
  3.       名称：<input type="text" v-model="emp.name"><br/>
  4.       薪资：<input type="text" v-model="emp.salary"><br/>
  5.       年龄：<input type="text" v-model="emp.age"><br/><input type="submit" v-model="fun" @click="insert()"><br/></form></div></template><script>import axios from"axios";import request from"../../utils/request";exportdefault{
  6.   name:"Emps",data(){return{
  7.       msg:"员工管理系统",
  8.       emps:[],
  9.       emp:{},
  10.       fun:"添加"}},
  11.   methods:{//展示所有quallAll(){//发送请求 接收相应数据 将数据交给组件
  12.       request.get("/queryAll").then(response=>{
  13.         console.log(response.data);this.emps = response.data
  14.       })},//数据回显queryOne(id){//先将fun中的添加换为为修改this.fun="修改";if(window.confirm("你确定修改吗？")){
  15.         request.get("/queryOne?id="+ id).then((emp)=>{this.emp=emp.data;this.quallAll();})}},//添加员工insert(){//接收数据  双向绑定
  16.       console.log(this.emp);if(window.confirm("确认添加员工吗")){
  17.         request.post("/add",this.emp).then(()=>{this.quallAll();this.emp ={}})}},//根据id删除del(id){if(window.confirm("你确定添加/修改这个员工信息吗？")){
  18.         request.get("/delete?id="+ id).then(()=>{this.quallAll();})}}},created(){this.quallAll();}}</script><style scoped></style>

3、router路由

  1. import Vue from'vue'import Router from'vue-router'
  3. Vue.use(Router)exportdefaultnewRouter({
  4.   routes:[{
  5.       path:'/Emps',
  6.       name:'Emps',component:()=>import("../components/Emps")}]})

4、App.vue

  1. <template><div id="app"><img src="./assets/logo.png"><br><router-link :to="{name:'Emps'}">登录系统人事管理系统</router-link><router-view/></div></template><script>exportdefault{
  2.   name:'App'}</script><style>
  3. #app {
  4.   font-family:'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
  5.   text-align: center;
  6.   color: #2c3e50;
  7.   margin-top:60px;}</style>

四、SpringBoot+Mybatis后端代码实现

1、后端项目结构图

2、sql语句实现

  1. /*
  2.  Navicat Premium Data Transfer
  4.  Source Server         : windows
  5.  Source Server Type    : MySQL
  6.  Source Server Version : 80022
  7.  Source Host           : localhost:3306
  8.  Source Schema         : ems
  10.  Target Server Type    : MySQL
  11.  Target Server Version : 80022
  12.  File Encoding         : 65001
  13. */SET NAMES utf8mb4;SET FOREIGN_KEY_CHECKS =0;-- ------------------------------ Table structure for t_emp-- ----------------------------DROPTABLEIFEXISTS`t_emp`;CREATETABLE`t_emp`(`id`intNOTNULLAUTO_INCREMENT,`name`varchar(20)CHARACTERSET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOTNULL,`salary`doubleNOTNULL,`age`intNOTNULL,PRIMARYKEY(`id`)USINGBTREE)ENGINE=InnoDBAUTO_INCREMENT=11CHARACTERSET= utf8mb4 COLLATE= utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;-- ------------------------------ Records of t_emp-- ----------------------------INSERTINTO`t_emp`VALUES(2,'杨福君',9000,19);INSERTINTO`t_emp`VALUES(8,'王恒杰',12000,21);INSERTINTO`t_emp`VALUES(12,'邓正武',20000,22);INSERTINTO`t_emp`VALUES(13,'周宣君',18000,23);INSERTINTO`t_emp`VALUES(14,'吴洪旭',2000,23);SET FOREIGN_KEY_CHECKS =1;

3、相关依赖pom.xml

  1. <!--继承springboot的父项目 ,放在dependencies平级下--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.5.RELEASE</version></parent><dependencies><!--springboot依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.1.2</version></dependency><!--引入springboot的web支持--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--mysql--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.16</version></dependency><!--数据源连接池--><dependency><groupId>com.alibaba</groupId><artifactId>druid</artifactId><version>1.1.12</version></dependency><!--引入springboot的test支持--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId></dependency></dependencies>

4、application.yml

  1. server:port:8080servlet:context-path: /ems
  2. 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=UTCusername: root
  3.     password: root
  4. mybatis:mapper-locations: classpath:com/tjcu/mapper/*Mapper.xml#指定mapper文件所在的位置,其中classpath必须和mapper-locations分开type-aliases-package: com.tjcu.entity

5、Controller控制层

  1. /**
  2.  * @author 王恒杰
  3.  * @date 2021/12/17 15:52
  4.  * @Description:
  5.  */@Controller@CrossOrigin@ResponseBodypublicclassEmpController{@AutowiredprivateEmpService empService;@RequestMapping("/emp/queryAll")publicList<Emp>queryall(){List<Emp> emps = empService.showEmp();return emps;}/**
  6.      * 删除
  7.      * @param id
  8.      */@RequestMapping("/emp/delete")publicvoiddelete(Integer id){
  9.         empService.deleteById(id);}@RequestMapping("/emp/add")publicvoidadd(@RequestBodyEmp emp){if(emp.getId()!=null){
  10.             empService.updateEmp(emp);}else{
  11.             emp.setId(null);
  12.             empService.insertEmp(emp);}}@RequestMapping("/emp/queryOne")publicEmpquery(Integer id){Emp emp = empService.selectEmpById(id);return emp;}}

6、mapper文件

  1. <mappernamespace="com.tjcu.dao.EmpDao"><insertid="insertEmp">
  2.         insert into t_emp
  3.         values (#{id}, #{name}, #{salary}, #{age})
  4.     </insert><selectid="showEmp"resultType="emp">
  5.         select *
  6.         from t_emp
  7.     </select><updateid="updateEmp">
  9.         update t_emp
  10.         <set><iftest="name!=null">
  11.                 name=#{name},
  12.             </if><iftest="salary!=null">
  13.                 salary=#{salary},
  14.             </if><iftest="age!=null">
  15.                 age=#{age}
  16.             </if></set>
  17.         where id=#{id}
  18.     </update><deleteid="deleteById">
  19.         delete from t_emp where id=#{id}
  20.     </delete><selectid="selectEmpById"resultType="emp">
  21.         select *
  22.         from t_emp where id=#{id}
  23.     </select></mapper>

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

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）后端

标签： vue.js java 前端
本文转载自: https://blog.csdn.net/weixin_44385486/article/details/122155987
版权归原作者 小王java 所有， 如有侵权，请联系我们删除。
登录后发布评论

“SpringBoot+VUE+ MyBatis实现人事管理系统（已开源）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？