axios ---- 综合案例

axios的综合案例

需求：

• 用户发起请求：http://localhost:8080/vue/findAll,获取所有的user数据
• 通过Vue.js 要求在页面中展现数据，以表格的形式展现
• 为每行数据添加 修改/删除 的按钮
• 在一个新的div中编辑3个文本框 name/age/sex 通过提交按钮实现新增
• 如果用户点击修改按钮，则在全新的div中，回显数据
• 用户修改完成数据之后，通过提交按钮，实现数据的修改
• 当用户点击删除按钮时,要求实现数据的删除操作

1. 创建springboot项目，并导入依赖

	<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- 配置热部署依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        <!-- 添加lombok依赖 -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>
        <!-- 引入数据库依赖 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.23</version>
        </dependency>
        <!--  -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>
    </dependencies>

2. 配置类

	server:
	  port: 8080
	spring:
	  datasource:
	    driver-class-name: com.mysql.cj.jdbc.Driver
	    # autoReconnect=true设置自动重连，allowMultiQueries=true设置允许批量操作
	    url: jdbc:mysql://localhost:3306/jt?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8&allowPublicKeyRetrieval=true&autoReconnect=true&allowMultiQueries=true
	    username: root
	    password: 123456
	
	#Spring整合Mybatis
	#mybatis:
	#Spring整合Mybatis-plus
	mybatis-plus:
	  #开启驼峰映射
	  configuration:
	    map-underscore-to-camel-case: true
	  #导入映射文件
	  #如果xml的映射文件，在根目录下(一般不建议这样写)，则加载时使用classpath*:/*.xml，进行强制加载
	  mapper-locations: classpath:/mappers/*.xml
	  #定义别名包
	  type-aliases-package: com.jt.pojo
	
	# 为com.jt.mapper包下的Sql执行打印日志语句
	logging:
	  level:
	    com.jt.mapper: debug

3. 启动类

	package com.jt;
	
	import org.mybatis.spring.annotation.MapperScan;
	import org.springframework.boot.SpringApplication;
	import org.springframework.boot.autoconfigure.SpringBootApplication;
	
	/**
	 * @Author Sky-haohao
	 * @Date 2021/8/24 17:25
	 * @Version 1.0
	 */
	@SpringBootApplication
	@MapperScan("com.jt.mapper")
	public class RunApp {
   
	    public static void main(String[] args) {
   
	        SpringApplication.run(RunApp.class, args)