规范的开发管理后台系统

diveDylan commented 3 years ago

开发后台管理系统不知不觉也有几年了，从vue + element到现在的react + antd，上线了大大小小十几个项目。接手前辈们项目时，大家总是感叹，前辈的创造力。面临烽火加急的需求，意气风发的前辈还总是不余余力我们这些无知无畏的后辈留下代码里的一亩三分荆棘地的惊喜。今天我们就聊聊快速规范的开发一个后台管理系统，本篇不包含多个后台项目的聚合，这方面可以请教我们其他业务线的emp、微前端方向同学。

后台的骨架

为了更快速更规范的迭代，结合我们信息化的需求和市场上通用的结构，基于老张的架子我们提供了如下的 layouts模块

路由菜单

路由菜单可以算是后台开发系统中的重头戏，嫁接了用户和系统页面的通道。后台系统的路由不依赖框架，是基于后台系统功能和架构设计上的一个通用定义。抽象业务和功能权限，我们暴露了Route的接口定义。值得一提的是菜单和路由应该共用一份源数据，保证功能的迭代性和维护性（想象一下，你更改菜单配置后忘了更改路由，这将是一个致命bug）

export interface Route {
  path: string
  component?: string
  routes?: Route[]
  redirect?: string
  name?: string // 菜单展示的文本
  icon?: string // 菜单展示的图标 (defaultSetting.iconfontUrl from https://www.iconfont.cn/ )
  authCode?: string // 权限配置的code，后端会在sso系统中配置
  isMenu?: boolean // 是否作为菜单展示, 用于外层过滤
  hideInMenu?: boolean // 在菜单中隐藏
  isBreadcrumb?: boolean // 是否需要在面包屑中展示
}

静态路由还是根据后端权限动态增加，出于一个系统的健壮性，我们相对更推崇根据后端权限动态增加路由。 1、前端定义初始的路由和动态路由表 2、根据后端接口从动态路由表里得到一份新的路由表（这里需要用到大量的数组和递归的方法，确保你已经熟悉这些方法） 3、再合并初始路由。

主题内容

ahKevinXy commented 2 years ago

动态渲染路由菜单的例子有吗

ahKevinXy commented 2 years ago

后台渲染 icon 时候不显示

    Id        int64                `json:"-"`
    Path      string               `json:"path"`
    Name      string               `json:"name"`
    Icon      string               `json:"icon"`
    Component string               `json:"component"`
    Routes    []*UserMenusResponse `json:"routes,omitempty"`

菜单返回的数据集

diveDylan / blog