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

更新时间：2024年02月28日 15:24:51 作者：cgv3

这篇文章主要介绍了vue前端如何接收后端传过来的带list集合的数据,前后端交互,文中的示例Json报文,前端采用vue进行接收,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧

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集合数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

如何正确快速使用Vue中的插槽和配置代理
这篇文章主要介绍了正确快速使用Vue中的插槽和配置代理的相关知识,插槽分为三种，分别是默认插槽、具名插槽、作用域插槽，下面分别列出了如何使用这三种插槽，需要的朋友可以参考下
2023-01-01
vue将html页面生成高清晰pdf文件的方法
最近工作中遇到个需求,需要实现个可视化图表页的PDF文件导出,所以下面这篇文章主要给大家介绍了关于利用vue如何将html页面生成高清晰pdf文件的相关资料,需要的朋友可以参考下
2022-03-03
Element Plus组件Form表单Table表格二次封装的完整过程
一般在后台管理系统的开发中,都会遇到很多table,但每一次都去引入el-table就会导致代码十分冗余,所以基于组件做一下二次封装成自己需要的组件就十分nice,下面这篇文章主要给大家介绍了关于Element Plus组件Form表单Table表格二次封装的相关资料,需要的朋友可以参考下
2022-09-09
vue2 中使用 render 函数编写组件的方式
vue提供了声明式编写UI的方式,即vue提供了对DOM进行描述的方式,有两种描述DOM的方式即模板和render 函数,本文通过示例代码介绍vue2 中使用 render 函数编写组件的方式,感兴趣的朋友跟随小编一起看看吧
2024-06-06
vue中npm如何设置仓库地址
在使用npm命令时,如果直接从国外的仓库下载依赖,下载速度很慢,甚至会下载不下来,我们可以更换npm的仓库源,提高下载速度,这篇文章主要给大家介绍了关于vue中npm如何设置仓库地址的相关资料,需要的朋友可以参考下
2023-12-12
使用 Vue-TCB 快速在 Vue 应用中接入云开发的方法
这篇文章主要介绍了如何使用 Vue-TCB 快速在 Vue 应用中接入云开发,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
怎样在vue项目下添加ESLint的方法
这篇文章主要介绍了怎样在vue项目下添加ESLint的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
查找Vue中下标的操作(some和findindex)
这篇文章主要介绍了查找Vue中下标的操作(some和findindex)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue开发环境配置跨域的方法步骤
本文介绍了使用vue-cli搭建的项目在开发时配置跨域，上线后不做任何任何修改，接口也可以访问，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
这篇文章主要介绍了详解关于表格合并span-method方法的补充(表格数据由后台动态返回) ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05