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

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-boRWgFKot-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、前端页面

编号：

名称：

薪资：

年龄：

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){

ehttp://mpService.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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。