springboot整合mybatis和vue案例

好的，下面是一个简单的 Spring Boot 整合 MyBatis 和 Vue 的案例。

1. 创建 Spring Boot 项目

使用 Spring Initializr 创建一个新的 Spring Boot 项目，包含以下依赖：

- Spring Web
- MyBatis Framework
- MySQL Driver
- Lombok

2. 配置数据库

在 application.properties 文件中配置数据库连接信息，示例：

spring.datasource.url=jdbc:mysql://localhost:3306/test?serverTimezone=UTC&useSSL=false&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456

3. 配置 MyBatis

在 Spring Boot 中，可以使用 MyBatis 的注解方式进行配置。创建一个 UserMapper 接口，示例：

@Mapper
public interface UserMapper {
    @Select("select * from user")
    List<User> getAllUsers();
}

4. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目，使用 Element UI 进行 UI 设计。

5. 配置前端 API

在 Vue 项目中创建一个 api.js 文件，用来配置前端 API，示例：

import axios from 'axios'

export default {
  getAllUsers () {
    return axios.get('/api/users')
  }
}

6. 创建前端组件

在 Vue 项目中创建一个 UserList.vue 组件，用来显示用户列表，示例：

<template>
  <div>
    <el-table :data="users">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import api from '@/api'

export default {
  data () {
    return {
      users: []
    }
  },
  mounted () {
    api.getAllUsers().then(res => {
      this.users = res.data
    })
  }
}
</script>

7. 创建后端控制器

在 Spring Boot 项目中创建一个 UserController 控制器，用来处理前端 API 请求，示例：

@RestController
@RequestMapping("/api")
public class UserController {
    @Autowired
    private UserMapper userMapper;
    
    @GetMapping("/users")
    public List<User> getAllUsers() {
        return userMapper.getAllUsers();
    }
}

8. 运行应用程序

使用命令行或者 IDE 运行应用程序，访问 http://localhost:8080 即可看到用户列表。

以上就是一个简单的 Spring Boot 整合 MyBatis 和 Vue 的案例，实现了一个简单的用户列表功能。