Vue怎么与SrpingBoot整合在一起
时间: 2024-02-25 11:57:05 浏览: 27
Vue 和 Spring Boot 可以通过 RESTful API 进行整合。具体步骤如下:
1. 在 Spring Boot 中创建 RESTful API,提供数据接口;
2. 在 Vue 中使用 axios 或者 fetch 等工具从后端获取数据;
3. 将数据渲染到 Vue 组件中,实现前端页面的展示。
下面是一个基本的示例,展示了如何在 Vue 中使用 axios 获取 Spring Boot 中提供的数据:
1. 在 Spring Boot 中创建一个简单的 RESTful API,比如:
```java
@RestController
@RequestMapping("/api")
public class ApiController {
@GetMapping("/data")
public Map<String, String> getData() {
Map<String, String> data = new HashMap<>();
data.put("name", "张三");
data.put("age", "20");
return data;
}
}
```
2. 在 Vue 中安装 axios,然后在组件中使用 axios 获取数据:
```javascript
<script>
import axios from 'axios'
export default {
data() {
return {
data: {}
}
},
mounted() {
axios.get('/api/data')
.then(response => {
this.data = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script>
```
3. 在组件中使用获取的数据:
```html
<template>
<div>
<p>{{ data.name }}</p>
<p>{{ data.age }}</p>
</div>
</template>
```
这样就完成了 Vue 和 Spring Boot 的整合。