SpringBoot+mybatis+Vue实现前后端分离项目的示例

目录

• 一、SpringBoot环境搭建
• 1、项目的数据库
• 2、项目所需依赖
• 3、application.yml文件
• 4、入口类
• 二、vue实现前后端分离
• 1、前端页面
• 2、springBoot控制层
• 3、mapper文件
• 4、项目完整源代码

vue前后端分离实现功能：员工的增删改（先实现数据回显之后，再进行修改）查

一、SpringBoot环境搭建

1、项目的数据库

/*
 Navicat Premium Data Transfer

 Source Server         : windows
 Source Server Type    : MySQL
 Source Server Version : 80022
 Source Host           : localhost:3306
 Source Schema         : ems

 Target Server Type    : MySQL
 Target Server Version : 80022
 File Encoding         : 65001

 Date: 19/12/2021 16:27:43
*/

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 = 8 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 (6, '邓正武', 18000, 25);
INSERT INTO `t_emp` VALUES (8, '王恒杰', 12000, 21);
INSERT INTO `t_emp` VALUES (9, '张西', 8000, 20);

SET FOREIGN_KEY_CHECKS = 1;

2、项目所需依赖

  
    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
    

  

3、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

4、入口类

@SpringBootApplication
@MapperScan("com.tjcu.dao")
public class EmpApplication {
    public static void main(String[] args) {
        SpringApplication.run(EmpApplication.class,args);
    }
}

二、vue实现前后端分离

1、前端页面

  
  



  
{{msg}}
  

  
    

      编号：

      名称：

      薪资：

      年龄：

      
      

      

      

    
  
  

    

      
编号
      
名称
      
年龄
      
薪资
      
操作
    
    

      
{{index+1}}
      
{{emp.name}}
      
{{emp.salary}}
      
{{emp.age}}
      

          
    
  

2、springBoot控制层

/**
 * @author 王恒杰
 * @date 2021/12/17 15:52
 * @Description:
 */
@Controller
@CrossOrigin
@ResponseBody
public class EmpController {
    @Autowired
    private EmpService empService;

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

    /**
     * 删除
     * @param id
     */
    @RequestMapping("/emp/delete")
    public void delete(Integer id){
        empService.deleteById(id);
    }
    @RequestMapping("/emp/add")
    public void add(@RequestBody Emp emp){
        if(emp.getId()!=0){
            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;
    }
}

3、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}
    

4、项目完整源代码

gitee开源：https://gitee.com/wanghengjie563135/springboot_mybatis_vue.git

到此这篇关于SpringBoot+mybatis+Vue实现前后端分离项目的示例的文章就介绍到这了,更多相关SpringBoot+mybatis+Vue前后端分离内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！