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

目录

  • 1、前端接收响应结果
  • 2、后端组装响应结果

前后端交互,如下的示例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获取后端返回对象,vue接受list,vue接受后端的集合对象,vue接受集合Json)