SpringBoot+mybatis+Vue实现前后端分离小项目

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

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

emp manager
{ {msg}}

编号:

名称:

薪资:

年龄:

<input type=“button” value=“添加/修改” @click=“add()”/>




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

<input type=“button” value=“修改” @click=“queryOne(emp.id)”>

[](()2、springBoot控制层

/**

    @author 王恒杰 @date 2021/12/17 15:52 @Description:

*/

@Controller

@CrossOrigin

@ResponseBody

public class EmpController {

@Autowired

private EmpService empService;

经验分享 程序员 微信小程序 职场和发展