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

一、SpringBoot环境搭建

1、项目的数据库
2、项目所需依赖
3、application.yml文件
4、入口类

二、vue实现前后端分离

1、前端页面
2、springBoot控制层
3、mapper文件
4、项目完整源代码

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

一、SpringBoot环境搭建 【SpringBoot+mybatis+Vue实现前后端分离项目的示例】
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.bootspring-boot-starter-parent2.2.5.RELEASEorg.springframework.bootspring-boot-starterorg.mybatis.spring.bootmybatis-spring-boot-starter2.1.2org.springframework.bootspring-boot-starter-webmysqlmysql-connector-java8.0.16com.alibabadruid1.1.12org.springframework.bootspring-boot-starter-test

3、application.yml文件

server:port: 8080servlet:context-path: /emsspring: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: rootpassword: rootmybatis: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、前端页面

文章图片

emp manager - 锐客网{{msg}}
编号：
名称：
薪资：
年龄：

编号名称年龄薪资操作
{{index+1}} {{emp.name}} {{emp.salary}} {{emp.age}}

2、springBoot控制层

/** * @author 王恒杰 * @date 2021/12/17 15:52 * @Description: */@Controller@CrossOrigin@ResponseBodypublic class EmpController {@Autowiredprivate EmpService empService; @RequestMapping("/emp/queryall")publicList 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_empvalues (#{id}, #{name}, #{salary}, #{age})select *from t_empupdate t_empname=#{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