18-自定义导航栏

南山老人i
152 阅读6分钟
回顾

接上篇，上次我们在前端项目中，补全了自定义logo和一些样式，今天我们要解决的是：初步自定义导航栏

目标

image.png

结构释义

  1. Home：这是导航栏中的第一个主菜单，代表了整个测试平台的首页或者概览页面。

  2. 仪表盘：这是一个包含子菜单的一级菜单，点击后会展开下面的子菜单。

    • 仪表盘：一个仪表盘页面，用于展示测试平台的一些关键指标和概览信息。
    • 看板：一个看板页面，用于以图表或其他形式展示测试项目的进展和统计数据。

  3. 项目管理：这是导航栏中的第二个主菜单，包含项目管理相关的功能。

  4. 接口测试：这是一个包含子菜单的一级菜单，点击后会展开下面的子菜单。

    • 接口用例：是一个页面或功能，用于创建和管理接口测试用例，包括接口测试用例的添加、编辑、删除等操作。
    • 测试计划：是一个页面或功能，用于创建和管理测试计划，包括测试计划的创建、执行、报告等，主要用于自动化持续执行接口测试用例。

  5. 测试报告：这是一个包含子菜单的一级菜单，点击后会展开下面的子菜单。

    • 接口测试报告：可能是一个页面或功能，用于查看和下载接口测试的执行报告和结果。

  6. 在线工具：这是一个包含子菜单的一级菜单，点击后会展开下面的子菜单。

    • HTTPrequests：是一个在线工具，用于进行HTTP请求的测试和调试。

  7. Mock配置：这是一个可能代表Mock数据配置的页面或功能，用于设置和管理Mock数据，以便在接口测试过程中模拟数据返回。

  8. 资源管理：这是一个包含子菜单的一级菜单，点击后会展开下面的子菜单。

    • 环境配置：可能是一个页面或功能，用于设置和管理不同的测试环境配置，例如开发环境、测试环境、生产环境等。
    • 域名配置：可能是一个页面或功能，用于设置和管理不同的域名配置，例如后端接口的域名和端口等。
    • 全局变量：可能是一个页面或功能，用于设置和管理测试中使用的全局变量，以便在测试过程中进行参数化操作。

总体来说，这个测试平台页面的导航栏提供了多个主菜单和子菜单，方便用户快速访问不同的功能和页面，包括仪表盘概览、项目管理、接口测试、测试报告、在线工具、Mock配置和资源管理等功能。这样的导航栏设计有助于提高测试团队的工作效率和测试平台的易用性。

讲解

在 Umi 中，routes 和 pages 是两个相关联的概念，用于管理前端路由和页面组件的配置。

  1. routes：

    • routes 是一个配置数组，用于定义前端的路由配置。
    • 它是 Umi 中定义页面之间跳转和组织页面层次结构的重要配置项。
    • 每个路由项包含了 path、component 和其他可选属性，用于指定路由的路径和对应的页面组件以及其他相关配置。
    • 路由项可以包含嵌套路由，形成页面之间的层级结构，通过 routes 属性实现。
    • routes 配置位于 config/config.ts 或 config/config.js 文件中，或者可以在单独的文件中进行模块化配置，然后在主配置文件中引入。
    • 示例： 
      export default [
  {
    path: '/',
    component: '@/layouts/index',
    routes: [
      { path: '/home', component: '@/pages/Home' },
      { path: '/about', component: '@/pages/About' },
      // More routes...
    ],
  },
];

  2. pages：

    • pages 目录是用于存放页面组件的目录。
    • 默认情况下，Umi 会在 src/pages 目录下寻找页面组件，并根据文件名和目录结构自动生成对应的路由配置。
    • 每个页面组件的文件名对应着路由路径，例如 Home.tsx 对应路由路径 /home，About.tsx 对应路由路径 /about。
    • 页面组件可以是 .tsx 或 .jsx 格式的文件，它们通常包含一个 React 组件的定义。
    • 示例： 
      src/
├── pages/
│   ├── Home.tsx
│   ├── About.tsx
│   └── ...
└── ...

如何让 routes 和 pages 对应起来：

  • Umi 会根据 routes 配置中的 path 和 component 属性，与 pages 目录下的文件进行匹配。
  • 例如，routes 配置中的 path: '/home' 会匹配到 pages 目录下的 Home.tsx 文件。
  • 这样，当用户访问 /home 路径时，Umi 就会自动渲染 pages 目录下的 Home.tsx 组件。

总结：routes 和 pages 是 Umi 中管理路由和页面组件的两个核心概念。通过配置 routes 可以定义前端路由和页面之间的层次结构，而 pages 目录则存放着实际的页面组件文件，Umi 会根据 routes 中的配置与 pages 目录下的文件进行对应，实现页面的渲染和跳转。

编码：

因为此篇较简单，因此在这直接贴出routes编码与pages结构即可。

// {
//   path: '/welcome',
//   component: 'IndexPage',
//   name: '欢迎', // 兼容此写法
//   icon: 'testicon',
//   // 更多功能查看
//   // https://beta-pro.ant.design/docs/advanced-menu
//   // ---
//   // 新页面打开
//   target: '_blank',
//   // 不展示顶栏
//   headerRender: false,
//   // 不展示页脚
//   footerRender: false,
//   // 不展示菜单
//   menuRender: false,
//   // 不展示菜单顶栏
//   menuHeaderRender: false,
//   // 权限配置，需要与 plugin-access 插件配合使用
//   access: 'canRead',
//   // 隐藏子菜单
//   hideChildrenInMenu: true,
//   // 隐藏自己和子菜单
//   hideInMenu: true,
//   // 在面包屑中隐藏
//   hideInBreadcrumb: true,
//   // 子项往上提，仍旧展示,
//   flatMenu: true,


// },

export default [
    // Home 页面
    {
        name: 'Home',
        path: '/home',
        component: './Home',
    },
    // 仪表盘页面及子菜单
    {
        name: '仪表盘',
        path: '/access',
        routes: [
            // 重定向到 /access/Dashboard
            {
                path: '/access',
                redirect: '/access/Dashboard',
            },
            // 仪表盘页面
            {
                path: '/access/Dashboard',
                name: 'Dashboard',
                component: '@/pages/Dashboard',
            },
            // 看板页面
            {
                path: '/access/Staging',
                name: 'Staging',
                component: '@/pages/Staging',
            },
        ],
    },
    // 项目管理页面
    {
        name: '项目管理',
        path: '/project',
        component: './Project',
    },
    // 接口测试页面及子菜单
    {
        name: '接口测试',
        path: '/apitest',
        routes: [
            // 重定向到 /apitest/testcase
            {
                path: '/apitest',
                redirect: '/apitest/testcase',
            },
            // 接口用例页面
            {
                path: '/apitest/testcase',
                name: '接口用例',
                component: '@/pages/Apitest/Testcase',
            },
            // 测试计划页面
            {
                path: '/apitest/Testplan',
                name: '测试计划',
                component: '@/pages/Apitest/Testplan',
            },
        ],
    },
    // 测试报告页面及子菜单
    {
        name: '测试报告',
        path: '/report',
        routes: [
            // 重定向到 /report/apireport
            {
                path: '/report',
                redirect: '/report/apireport',
            },
            // 接口测试报告页面
            {
                path: '/report/apireport',
                name: '接口测试报告',
                component: '@/pages/Report/Apireport',
            }
        ],
    },
    // 登录页面
    { path: '/login', layout: false, component: './Login' },
    // 默认首页重定向到 /home
    {
        path: '/',
        redirect: '/home',
    },
    // 在线工具页面及子菜单
    {
        name: '在线工具',
        path: '/tools',
        routes: [
            // 重定向到 /tools/HTTPrequest
            {
                path: '/tools',
                redirect: '/tools/HTTPrequest',
            },
            // HTTP请求工具页面
            {
                path: '/tools/HTTPrequest',
                name: 'HTTPrequest',
                component: '@/pages/Tools/HTTPrequest',
            },
        ],
    },
    // Mock配置页面
    {
        name: 'Mock配置',
        path: '/mock',
        component: './Mock',
    },
    // 资源管理页面及子菜单
    {
        name: '资源管理',
        path: '/management',
        routes: [
            // 重定向到 /management/environment
            {
                path: '/management',
                redirect: '/management/environment',
            },
            // 环境配置页面
            {
                path: '/management/environment',
                name: '环境配置',
                component: '@/pages/Management/Environment',
            },
            // 域名配置页面
            {
                path: '/management/domainname',
                name: '域名配置',
                component: '@/pages/Management/Domainname',
            },
            // 全局变量页面
            {
                path: '/management/globalvariable',
                name: '全局变量',
                component: '@/pages/Management/Globalvariable',
            },
        ],
    },
    // 通配符路由，配置 404 页面组件，exact: false 表示匹配所有未定义的路由
    { path: '*', component: './404', exact: false },
];

image.png

途中index.tsx都是写的占位页面而已，后续慢慢开发，此篇到此，告辞！

组织地址

后端代码地址

前端代码地址

加群一起讨论相关问题呀！如果群二维码过期了，可以加我个人微信: yyi11yy 我拉你进群~

image.png

image.png

avatar
文章
阅读
粉丝