vue前端如何接收后端传过来的带list集合的数据
作者：cgv3
这篇文章主要介绍了vue前端如何接收后端传过来的带list集合的数据,前后端交互,文中的示例Json报文,前端采用vue进行接收,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
前后端交互，如下的示例Json报文，前端采用vue进行接收.
{
rootId: '',
nodes: [],
lines: []
}1、前端接收响应结果
//在vue的调用方法体内，调后端的接口，获取响应数据，复制给前端定义的Json对象，拿去做处理
selectDemoResult(this.queryParams).then( rep => {
const __jsonData = {
rootId: '',
nodes: [],
lines: []
};
__jsonData.rootId = rep.data.rootId;
__jsonData.nodes = rep.data.nodes;
__jsonData.lines = rep.data.lines;
// console.log(jsonData)
//拿着__jsonData去做处理即可
});2、后端组装响应结果
/**
* 给前端返回响应数据
*/
@DeleteMapping("/getDemoResult")
public Result getDemoResult(@RequestBody String demoId)
{
return demoService.selectListById(demoId);
}/**
* 返给前端响应对象
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Result {
private String rootId;
private List<Demo1> nodes;
private List<Demo2> lines;
}到此这篇关于vue前端接收后端传过来的带list集合的数据的文章就介绍到这了,更多相关vue接收list集合数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！