spring boot整合mybatis和vue的案例

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

1. 前端Vue部分

首先，我们创建一个Vue项目。在命令行中输入以下命令：

vue create vue-mybatis-demo

接着，在`vue-mybatis-demo`目录下执行以下命令：

npm install axios --save

这将安装`axios`，一个用于发送HTTP请求的JavaScript库。

接下来，我们在`src`目录下创建一个`components`目录，并在其中创建一个`UserList.vue`组件。在该组件中，我们将使用`axios`从后端获取用户列表。以下是`UserList.vue`组件的代码：

<template>
  <div>
    <h2>User List</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    axios.get('/api/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}
</script>

2. 后端Spring Boot部分

我们使用Spring Boot创建一个RESTful API，用于从数据库中获取用户列表。首先，在`pom.xml`文件中添加以下依赖项：

<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>
  <dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.1.4</version>
  </dependency>
  <dependency>
    <groupId>com.h2database</groupId>
    <artifactId>h2</artifactId>
    <scope>runtime</scope>
  </dependency>
</dependencies>

然后，在`application.properties`文件中添加以下配置：

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
mybatis.mapper-locations=classpath:mapper/*.xml

接下来，我们创建一个`User`实体类：

public class User {
  private Long id;
  private String name;
  private Integer age;

  // getters and setters
}

然后，我们创建一个`UserMapper`接口和对应的XML文件，用于从数据库中获取用户列表：

@Mapper
public interface UserMapper {
  @Select("SELECT * FROM user")
  List<User> findAll();
}

<mapper namespace="com.example.demo.mapper.UserMapper">
  <select id="findAll" resultType="com.example.demo.entity.User">
    SELECT * FROM user
  </select>
</mapper>

最后，我们创建一个`UserController`类，用于处理从前端发送的请求：

@RestController
@RequestMapping("/api")
public class UserController {
  @Autowired
  private UserMapper userMapper;

  @GetMapping("/users")
  public List<User> findAllUsers() {
    return userMapper.findAll();
  }
}

3. 整合前后端

现在，我们需要将前端Vue项目打包并将其静态文件放入Spring Boot项目的`resources/static`目录下。在`vue-mybatis-demo`目录下执行以下命令：

npm run build

这将生成一个`dist`目录，其中包含前端Vue项目的静态文件。将该目录下的所有文件复制到Spring Boot项目的`resources/static`目录下。

最后，我们启动Spring Boot应用程序，并在浏览器中访问`http://localhost:8080`，即可看到从数据库中获取的用户列表。