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.js每天必学之Class与样式绑定
这篇文章主要为大家详细介绍了Vue.js的Class与样式绑定,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
在Vue-cli里应用Vuex的state和mutations方法
今天小编就为大家分享一篇在Vue-cli里应用Vuex的state和mutations方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue3父子组件传值中props使用细节浅析
这篇文章主要给大家介绍了关于vue3父子组件传值中props使用细节的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
vue 鼠标移入移出(hover)切换显示图片问题
这篇文章主要介绍了vue 鼠标移入移出(hover)切换显示图片问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
vue实现换肤功能
这篇文章主要为大家详细介绍了vue实现换肤功能，一套深色，一套浅色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
vue中的computed 和 vm.$data 原理解析
这篇文章主要介绍了vue中的computed 和 vm.$data 原理，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue实现动态控制表格列的显示隐藏
这篇文章主要为大家详细介绍了vue实现动态控制表格列的显示隐藏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue引入静态js文件的方法
这篇文章主要介绍了vue引入静态js文件的方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-06-06
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
这篇文章主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下
2019-08-08
vue开发chrome插件，实现获取界面数据和保存到数据库功能
这篇文章主要介绍了vue开发chrome插件，实现获取界面数据和保存到数据库功能的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2020-12-12