后端java如何给vue发送数据
时间: 2023-06-29 12:06:19 浏览: 68
后端 Java 可以通过 REST API 的方式向前端 Vue 发送数据。以下是一个简单的示例:
1. 后端 Java 代码:
```java
@RestController
@RequestMapping("/api")
public class ApiController {
@GetMapping("/data")
public List<String> getData() {
List<String> dataList = new ArrayList<>();
dataList.add("data1");
dataList.add("data2");
dataList.add("data3");
return dataList;
}
}
```
2. 前端 Vue 代码:
```javascript
<script>
export default {
data() {
return {
dataList: [],
};
},
mounted() {
axios.get('/api/data')
.then(response => {
this.dataList = response.data;
})
.catch(error => {
console.log(error);
});
},
};
</script>
<template>
<div>
<ul>
<li v-for="data in dataList" :key="data">{{ data }}</li>
</ul>
</div>
</template>
```
在上面的示例中,后端 Java 通过 GET 方法暴露 `/api/data` 接口,返回一个字符串列表。前端 Vue 使用 axios 库向该接口发送 GET 请求,并将响应数据渲染到页面上。
注意,以上只是一个简单示例,实际开发中需要根据具体需求进行相应的接口设计和实现。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)