springboot和vue框架下,从后端获取List类型的数据到前端,该如何将该数据赋给前端参数?
时间: 2023-05-28 22:06:52 浏览: 128
springboot如何去获取前端传递的参数的实现
在Spring Boot中,可以使用@RestController注解表示该类是一个控制器,同时使用@GetMapping注解表示该方法是一个GET请求的处理方法。方法中可以返回一个List类型的数据,Spring Boot会自动将其转换为JSON格式的数据返回给前端。
在Vue框架中,可以使用axios库发送GET请求获取后端数据,并将数据赋给前端参数。具体实现步骤如下:
1. 安装axios库
在终端中执行以下命令:
```bash
npm install axios --save
```
2. 在Vue组件中使用axios
在Vue组件中引入axios,并在mounted生命周期钩子函数中发送GET请求获取后端数据。
```javascript
import axios from 'axios'
export default {
data () {
return {
dataList: []
}
},
mounted () {
axios.get('/api/data/list').then(response => {
this.dataList = response.data
})
}
}
```
以上代码中,使用axios发送GET请求获取后端数据,请求的URL为`/api/data/list`,后端需要提供该接口,并返回List类型的数据。请求成功后,将数据赋给组件的dataList参数。
3. 在模板中展示数据
在模板中使用v-for指令展示获取到的数据。
```html
<ul>
<li v-for="data in dataList">{{ data }}</li>
</ul>
```
以上代码中,使用v-for指令遍历dataList数组,将每个元素赋给data变量,并展示在页面上。
阅读全文