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")
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;

}

猜你喜欢

转载自blog.csdn.net/csdn_avatar_2019/article/details/129836476
今日推荐