好的，以下是一个简单的
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`组件的代码：
```html
<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`文件中添加以下依赖项：
```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.m
apper-locations=classpath:m
apper/*.xml
```
接下来，我们创建一个`User`实体类：
```java
public class User {
private Long id;
private String name;
private Integer age;
// getters and setters
}
```
然后，我们创建一个`UserM
apper`接口和对应的XML文件，用于从数据库中获取用户列表：
```java
@M
apper
public interface UserM
apper {
@Select("SELECT * FROM user")
List<User> findAll();
}
```
```xml
<m
apper namespace="com.example.demo.m
apper.UserM
apper">
<select id="findAll" resultType="com.example.demo.entity.User">
SELECT * FROM user
</select>
</m
apper>
```
最后，我们创建一个`UserController`类，用于处理从前端发送的请求：
```java
@RestController
@RequestM
apping("/api")
public class UserController {
@Autowired
private UserM
apper userM
apper;
@GetM
apping("/users")
public List<User> findAllUsers() {
return userM
apper.findAll();
}
}
```
3. 整合前后端
现在，我们需要将前端
Vue项目打包并将其静态文件放入
Spring Boot项目的`resources/static`目录下。在`
vue-
mybatis-demo`目录下执行以下命令：
```
npm run build
```
这将生成一个`dist`目录，其中包含前端
Vue项目的静态文件。将该目录下的所有文件复制到
Spring Boot项目的`resources/static`目录下。
最后，我们启动
Spring Boot应用程序，并在浏览器中访问`http://localhost:8080`，即可看到从数据库中获取的用户列表。
5890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
