vue前端如何接收后端传过来的带list集合的数据
更新时间：2024年02月28日 15:24:51 作者：cgv3
这篇文章主要介绍了vue前端如何接收后端传过来的带list集合的数据,前后端交互,文中的示例Json报文,前端采用vue进行接收,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
前后端交互，如下的示例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前端接收后端传过来的带list集合的数据的文章就介绍到这了,更多相关vue接收list集合数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了讲解vue-router之什么是嵌套路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要介绍了Vue中如何设置全局的cookie对象，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue 组件间的通信之子组件向父组件传值的方式总结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-07-07
本文分步骤给大家介绍了Vue使用枚举类型实现HTML下拉框的相关知识，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-02-02
这篇文章主要介绍了关于vuepress部署出现样式的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了vue 表单之v-model绑定单选按钮radio的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
在做项目的时候发现一个情况,输入框无法输入值并且表单校验失灵,所以下面这篇文章主要给大家介绍了关于el-input无法输入的问题和表单验证失败问题解决的相关资料,需要的朋友可以参考下2023-02-02
Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等
最近在学Vue和javascript感觉js的好多方法都不太清楚,这里彻底总结下,这篇文章主要给大家介绍了关于Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等的相关资料,需要的朋友可以参考下2024-01-01
这篇文章主要为大家分享了关于Vue.js一些问题和思考的学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了vue基础ESLint Prettier配置教程详解，本文使用VsCode + Vue + ESLint + Prettier 实现代码格式规范 + 保存自动修复代码js+vue2022-07-07
最新评论