前后端交互，如下的示例Json报文，前端采用vue进行接收.文章来源地址https://www.toymoban.com/news/detail-597095.html
{
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;
}
文章来源：https://www.toymoban.com/news/detail-597095.html
到了这里，关于vue前端接收后端传过来的带list集合的数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
