联调联试的基本步骤是什么?（分享一些关于联调时处理数据结构的一些方法）

在我们进行前后端联调时             ，往往会出现后端给到的数据在前端不能直接做渲染的情况

这个时候就需要处理后端返回的数据  
 
  
 
  
 
  
 
  
 
  
 
  
 ，转换数据结构前端再做渲染操作

当然如果和后端关系好~也可以让后端改成你想要的样子

以下简单介绍遇到过的情况和相应的处理

觉得有用的话也可以自行封装成工具类 后端返回线性结构数据













，需根据roleId进行数据分类 const arr = [{ roleId: "r-01", roleName: "系统管理员", teamId: "fdasfasfasdfas", userId: "u-01-01", userName: "员工r-01-1" }, { roleId: "r-01", roleName: "超级管理员1", teamId: "xxxxxxxxx", userId: "u-01-02", userName: "员工r-01-2" }, { roleId: "r-02", roleName: "系统管理员", teamId: "fdasfasfasdfas", userId: "u-02-01", userName: "员工r-02-1" }, ] const convert = (arr) => { const map = {} arr.forEach(item => { const roleId = item.roleId if (!map[roleId]) { map[roleId] = { roleId: roleId, roleName: item.roleName, userList: [{ userId: item.userId, userName: item.userName }] } } else { map[roleId].userList.push({ userId: item.userId, userName: item.userName }) } }); return Object.values(map) } const result = convert(arr) console.log(result) 线性结构转树形结构
  
  
  
  
  
  
 ，在使用el-tree或el-cascader经常会使用到  
  
  
  
  
  
  ，在使用el-table动态列表头嵌套也会使用到 const arr = [ { VC_BT: 期间数据和指标, VC_FJXX: VC_COLNAME }, { VC_BT: 2016 }, { VC_BT: A, VC_FJXX: VC_FJA, VC_FUJ: 2016 }, { VC_BT: B, VC_FJXX: VC_FJB, VC_FUJ: 2016 }, { VC_BT: 2015 }, { VC_BT: A, VC_FJXX: VC_FJA_PR1, VC_FUJ: 2015 }, { VC_BT: B, VC_FJXX: VC_FJB_PR1, VC_FUJ: 2015 }, { VC_BT: 2014 }, { VC_BT: A, VC_FJXX: VC_FJA_PR2, VC_FUJ: 2014 }, { VC_BT: B, VC_FJXX: VC_FJB_PR2, VC_FUJ: 2014 } ] const listToTree = (list, option) => { const _defaultOptioin = { key: id, parentKey: pid } const { key, parentKey } = Object.assign( _defaultOptioin, option ) const result = [] const itemMap = {} for (const item of list) { const id = item[key] const pid = item[parentKey] if (!itemMap[id]) { itemMap[id] = { children: [] } } itemMap[id] = { ...item, children: itemMap[id].children } const treeItem = itemMap[id] if (!pid || pid === 0) { result.push(treeItem) } else { if (!itemMap[pid]) { itemMap[pid] = { children: [] } } itemMap[pid].children.push(treeItem) } } return result }

欢迎大家评论
 


 


 


 


 


 


 

，如有帮助可以关注+收藏
 
 
 
 
 
 
，我会经常更新博客   
   
   
   
   
   
   ，大家一起讨论学习