vue前端接收后端传过来的带list集合的数据

目录

前后端交互，如下的示例

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")publicResultgetDemoResult(@RequestBodyString demoId){return demoService.selectListById(demoId);}

/**
 * 返给前端响应对象
 */@Data@AllArgsConstructor@NoArgsConstructorpublicclassResult{privateString rootId;privateList<Demo1> nodes;privateList<Demo2> lines;}