关于映射后端接口的记录

某哈压力大2024-07-16 15:16

1. 背景

前端技术栈：vue2.x + element-ui 2.15.14

前端根据后端返回来的路由表，使用NavMenu动态注册菜单。后端返回的路由表设计结构为：

一级菜单（如果没有子级）可以点击跳转；

一级菜单（如果有子级）不可点击跳转，只可点击子级跳转页面；

最底层的子级为页面接口，需要在菜单中过滤掉

2. 解决

2.1 字段规则

基本结构都是对的，只需要处理一下属性别名，路由元信息，剔除接口就行了

md 复制代码 
menuId： id
parentId：上级的id
menuName：模块名称
menuRoute：路由路径
subMenus：子路由集合

2.2 预期结构

js 复制代码 
[
  // 首页
  {
    id: 100,
    path: "/dashboard",
    children: [],
    meta: {
      icon: "dashboard",
      title: "首页",
    },
  },
  // 运营数据
  {
    id: 645,
    path: "",
    meta: {
      icon: "analysis",
      title: "运营数据",
    },
    children: [
      // 运营数据 - 用户行为分析
      {
        id: 646,
        path: "/operationData/user-behavior",
        children: [],
        meta: {
          icon: "",
          title: "用户行为分析",
        },
      },
      // 运营数据 - 诊所处方分析
      {
        id: 1407,
        path: "",
        meta: {
          icon: "",
          title: "诊所处方分析",
        },
        children: [
          // 运营数据 - 诊所处方分析 - 诊所处方量排名
          {
            id: 1021,
            path: "/operationData/prescription-rank",
            children: [],
            meta: {
              icon: "",
              title: "诊所处方量排名",
            },
          },
          // 运营数据 - 诊所处方分析 - 各省处方量统计
          {
            id: 1022,
            path: "/operationData/prescription-num",
            children: [],
            meta: {
              icon: "",
              title: "各省处方量统计",
            },
          },
        ],
      },
    ],
  },
];

2.2 解决思路

js 复制代码 
const shouldRecurse = (menus) => {
  for(const menu of menus){
      // 如果有menuRoute属性，则标识需要添加为路由；如果没有，则是接口
    if(menu.menuRoute){
      return true
    }else {
      if(menu.subMenus && menu.subMenus.length){
        // 不知道下钻到几级，需要递归
        shouldRecurse(menu.subMenus)
      }
    }
  }
}

const mapMenusToRoutes = (menus) => {
  const { subMenus } = menus.data;
  
  // 递归遍历
  function recurseGetRoutes(menus) {
    const routes = [];
    for (const menu of menus) {
      // 只有一级菜单 || 一级菜单下有多级菜单需要确认哪些是路由，哪些是接口
      if (menu.menuRoute || shouldRecurse(menu.subMenus)) {
        routes.push({
          path: menu.menuRoute,
          id: menu.menuId,
          children: recurseGetRoutes(menu.subMenus), // subMenus为子路由
          meta: {
            title: menu.menuName,
            icon: menu.menuIcon,
          },
        });
      }
    }
    return routes;
  }

  return recurseGetRoutes(subMenus);
};

2.3 代码优化

优化代码逻辑，添加映射

js 复制代码 
// 定义映射关系
const map = {
    path: "menuRoute",
    id: "menuId",
    title: "menuName",
    icon: "menuIcon",
    children: "subMenus",
}
// 检查是否存在菜单路由
const hasRoute = (menu) =>
  menu.menuRoute || (menu.subMenus && menu.subMenus.some(hasRoute));

const mapMenusToRoutes = (menus) => {
  const { subMenus } = menus.data;

  // 递归函数，构建路由结构
  function recurseGetRoutes(menus) {
    return menus.reduce((routes, menu) => {
      if (hasRoute(menu)) {
        const route = {
          path: menu[map.path] || "",
          id: menu[map.id],
          meta: {
            title: menu[map.title],
            icon: menu[map.icon],
          },
        };
        // 如果有子菜单，递归调用并添加到当前路由的 children 中
        if (menu.subMenus && menu.subMenus.length) {
          route.children = recurseGetRoutes(menu[map.children]) || [];
        }
        routes.push(route);
      }
      return routes;
    }, []);
  }

  return recurseGetRoutes(subMenus);
};

后端路由（部分）

涉及首页模块和运营数据模块

json 复制代码 
{
  "msg": "操作成功",
  "code": 0,
  "data": {
    "menuId": 23,
    "menuName": "后台管理系统",
    "menuRoute": "ADMIN",
    "parentId": 0,
    "subMenus": [
      {
        "menuIcon": "dashboard",
        "menuId": 100,
        "menuName": "首页",
        "menuRoute": "/dashboard",
        "parentId": 23,
        "requestUrl": "",
        "subMenus": [
          {
            "menuIcon": "",
            "menuId": 1449,
            "menuName": "用户总览信息导出",
            "menuRoute": "",
            "parentId": 100,
            "requestUrl": "/report/operational/overview/userOverview/export",
            "subMenus": []
          },
          {
            "menuIcon": "",
            "menuId": 1448,
            "menuName": "获取地图数据",
            "menuRoute": "",
            "parentId": 100,
            "requestUrl": "/report/operational/overview/map",
            "subMenus": []
          },
          {
            "menuIcon": "",
            "menuId": 1447,
            "menuName": "获取用户信息总览",
            "menuRoute": "",
            "parentId": 100,
            "requestUrl": "/report/operational/overview/userOverview",
            "subMenus": []
          }
        ]
      },
      {
        "menuIcon": "analysis",
        "menuId": 645,
        "menuName": "运营数据",
        "menuRoute": "",
        "parentId": 23,
        "requestUrl": "",
        "subMenus": [
          {
            "menuIcon": "",
            "menuId": 646,
            "menuName": "用户行为分析",
            "menuRoute": "/operationData/user-behavior",
            "parentId": 645,
            "requestUrl": "",
            "subMenus": [
              {
                "menuIcon": "",
                "menuId": 648,
                "menuName": "功能使用频次统计",
                "menuRoute": "",
                "parentId": 646,
                "requestUrl": "/report/FuncFrequency",
                "subMenus": []
              },
              {
                "menuIcon": "",
                "menuId": 649,
                "menuName": "预约数环比",
                "menuRoute": "",
                "parentId": 646,
                "requestUrl": "/report/appointment",
                "subMenus": []
              },
              {
                "menuIcon": "",
                "menuId": 650,
                "menuName": "处方数柱状图",
                "menuRoute": "",
                "parentId": 646,
                "requestUrl": "/report/medicalReordBar",
                "subMenus": []
              },
              {
                "menuIcon": "",
                "menuId": 651,
                "menuName": "处方数环比",
                "menuRoute": "",
                "parentId": 646,
                "requestUrl": "/report/medicalReord",
                "subMenus": []
              },
              {
                "menuIcon": "",
                "menuId": 652,
                "menuName": "新增诊所用户环比",
                "menuRoute": "",
                "parentId": 646,
                "requestUrl": "/report/newUsers",
                "subMenus": []
              },
              {
                "menuIcon": "",
                "menuId": 653,
                "menuName": "活跃诊所地区分布",
                "menuRoute": "",
                "parentId": 646,
                "requestUrl": "/report/activeRegion",
                "subMenus": []
              },
              {
                "menuIcon": "",
                "menuId": 654,
                "menuName": "活跃诊所数环比",
                "menuRoute": "",
                "parentId": 646,
                "requestUrl": "/report/activeClinic",
                "subMenus": []
              },
              {
                "menuIcon": "",
                "menuId": 1622,
                "menuName": "功能使用频次排行榜导出（新）",
                "menuRoute": "",
                "parentId": 646,
                "requestUrl": "/apm/transaction/export",
                "subMenus": []
              },
              {
                "menuIcon": "",
                "menuId": 1621,
                "menuName": "功能使用频次排行榜（新）",
                "menuRoute": "",
                "parentId": 646,
                "requestUrl": "/apm/transaction/getUserTransaction",
                "subMenus": []
              }
            ]
          },
          {
            "menuIcon": "",
            "menuId": 1407,
            "menuName": "诊所处方分析",
            "menuRoute": "",
            "parentId": 645,
            "requestUrl": "",
            "subMenus": [
              {
                "menuIcon": "",
                "menuId": 1021,
                "menuName": "诊所处方量排名",
                "menuRoute": "/operationData/prescription-rank",
                "parentId": 1407,
                "requestUrl": "",
                "subMenus": [
                  {
                    "menuIcon": "",
                    "menuId": 1414,
                    "menuName": "导出诊所处方排名信息",
                    "menuRoute": "",
                    "parentId": 1021,
                    "requestUrl": "/medical/report/clinic/medicalRank/export",
                    "subMenus": []
                  },
                  {
                    "menuIcon": "",
                    "menuId": 1413,
                    "menuName": "获取诊所处方排名",
                    "menuRoute": "",
                    "parentId": 1021,
                    "requestUrl": "/medical/report/clinic/medicalRank",
                    "subMenus": []
                  }
                ]
              },
              {
                "menuIcon": "",
                "menuId": 1022,
                "menuName": "各省处方量统计",
                "menuRoute": "/operationData/prescription-num",
                "parentId": 1407,
                "requestUrl": "",
                "subMenus": [
                  {
                    "menuIcon": "",
                    "menuId": 1416,
                    "menuName": "导出各省份处方信息",
                    "menuRoute": "",
                    "parentId": 1022,
                    "requestUrl": "/medical/report/province/medicalData/export",
                    "subMenus": []
                  },
                  {
                    "menuIcon": "",
                    "menuId": 1415,
                    "menuName": "获取各省份处方信息",
                    "menuRoute": "",
                    "parentId": 1022,
                    "requestUrl": "/medical/report/province/medicalData",
                    "subMenus": []
                  }
                ]
              }
            ]
          },
          {
            "menuIcon": "",
            "menuId": 1402,
            "menuName": "诊所病种分析",
            "menuRoute": "",
            "parentId": 645,
            "requestUrl": "",
            "subMenus": [
              {
                "menuIcon": "",
                "menuId": 1403,
                "menuName": "诊所病种分析",
                "menuRoute": "/operationData/disease-type-analysis",
                "parentId": 1402,
                "requestUrl": "",
                "subMenus": []
              },
              {
                "menuIcon": "",
                "menuId": 1404,
                "menuName": "诊所病种分析明细",
                "menuRoute": "/operationData/disease-type-detail",
                "parentId": 1402,
                "requestUrl": "",
                "subMenus": []
              }
            ]
          },
          {
            "menuIcon": "",
            "menuId": 1408,
            "menuName": "用户活跃度分析",
            "menuRoute": "",
            "parentId": 645,
            "requestUrl": "",
            "subMenus": [
              {
                "menuIcon": "",
                "menuId": 1020,
                "menuName": "各省用户活跃度",
                "menuRoute": "/operationData/client-level",
                "parentId": 1408,
                "requestUrl": "",
                "subMenus": [
                  {
                    "menuIcon": "",
                    "menuId": 1418,
                    "menuName": "导出各省份用户活跃度信息",
                    "menuRoute": "",
                    "parentId": 1020,
                    "requestUrl": "/medical/report/province/data/export",
                    "subMenus": []
                  },
                  {
                    "menuIcon": "",
                    "menuId": 1417,
                    "menuName": "获取各省份用户活跃度信息",
                    "menuRoute": "",
                    "parentId": 1020,
                    "requestUrl": "/medical/report/province/data",
                    "subMenus": []
                  }
                ]
              },
              {
                "menuIcon": "",
                "menuId": 1064,
                "menuName": "用户活跃度明细",
                "menuRoute": "/operationData/user-active",
                "parentId": 1408,
                "requestUrl": "",
                "subMenus": [
                  {
                    "menuIcon": "",
                    "menuId": 1280,
                    "menuName": "导出用户活跃度信息",
                    "menuRoute": "",
                    "parentId": 1064,
                    "requestUrl": "/clinic/highActive/exprot",
                    "subMenus": []
                  },
                  {
                    "menuIcon": "",
                    "menuId": 1279,
                    "menuName": "获取用户活跃度列表",
                    "menuRoute": "",
                    "parentId": 1064,
                    "requestUrl": "/clinic/highActive/report",
                    "subMenus": []
                  }
                ]
              }
            ]
          },
          {
            "menuIcon": "",
            "menuId": 1409,
            "menuName": "门诊运营数据",
            "menuRoute": "",
            "parentId": 645,
            "requestUrl": "",
            "subMenus": [
              {
                "menuIcon": "",
                "menuId": 657,
                "menuName": "电子处方和药品数分析",
                "menuRoute": "/operationData/prescription-statistics",
                "parentId": 1409,
                "requestUrl": "",
                "subMenus": [
                  {
                    "menuIcon": "",
                    "menuId": 658,
                    "menuName": "列表",
                    "menuRoute": "",
                    "parentId": 657,
                    "requestUrl": "/report/clinic/statistics/list",
                    "subMenus": []
                  },
                  {
                    "menuIcon": "",
                    "menuId": 659,
                    "menuName": "导出",
                    "menuRoute": "",
                    "parentId": 657,
                    "requestUrl": "/report/clinic/statistics/export",
                    "subMenus": []
                  }
                ]
              },
              {
                "menuIcon": "",
                "menuId": 639,
                "menuName": "接诊管理",
                "menuRoute": "/info/accepts",
                "parentId": 1409,
                "requestUrl": "",
                "subMenus": [
                  {
                    "menuIcon": "",
                    "menuId": 640,
                    "menuName": "处方列表",
                    "menuRoute": "",
                    "parentId": 639,
                    "requestUrl": "/medicalrecord/list",
                    "subMenus": []
                  },
                  {
                    "menuIcon": "",
                    "menuId": 641,
                    "menuName": "处方详情",
                    "menuRoute": "",
                    "parentId": 639,
                    "requestUrl": "/medicalrecord/info/{id}",
                    "subMenus": []
                  }
                ]
              },
              {
                "menuIcon": "",
                "menuId": 1562,
                "menuName": "诊所评价榜单",
                "menuRoute": "/operationData/comments",
                "parentId": 1409,
                "requestUrl": "",
                "subMenus": []
              }
            ]
          },
          {
            "menuIcon": "",
            "menuId": 1090,
            "menuName": "登录信息",
            "menuRoute": "/info/user-log",
            "parentId": 645,
            "requestUrl": "",
            "subMenus": []
          }
        ]
      }
    ]
  }
}

最后

感谢bug酱

相关推荐
Rverdoser18 分钟前
unocss 一直热更新打印[vite] hot updated: /__uno.css
前端·css
Bang邦35 分钟前
使用nvm管理Node.js多版本
前端·node.js·node多版本管理
podoor40 分钟前
wordpress不同网站 调用同一数据表
前端·wordpress
LJ小番茄1 小时前
Vue 常见的几种通信方式（总结）
前端·javascript·vue.js·html
黑狼传说1 小时前
前端项目优化：极致最优 vs 相对最优 —— 深入探索与实践
前端·性能优化
장숙혜1 小时前
前端-CDN的理解及CDN一些使用平台
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS在线文档管理系统（JAVA毕业设计）
java·vue.js·spring boot·后端·开源
FakeOccupational2 小时前
nodejs 007:错误npm error Error: EPERM: operation not permitted, symlink
前端·npm·node.js
奶糖 肥晨2 小时前
react是什么？
前端·react.js·前端框架
亦舒.2 小时前
JSDelivr & NPM CDN 国内加速节点
前端·npm·node.js
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04CANoe Trace窗口过滤栏消失的几种解决方法（附上最终解决方案）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习