关于映射后端接口的记录

某哈压力大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酱

相关推荐
有梦想的刺儿几秒前
webWorker基本用法
前端·javascript·vue.js
cy玩具21 分钟前
点击评论详情，跳到评论页面，携带对象参数写法：
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站（JAVA毕业设计）
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理：Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法，脚手架，父子传参，refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解