通用后台管理系统开发

后台管理系统，由于其交互方式、业务场景相对比较固定，可以沉淀出一些最佳实践，形成一个专用于后台管理系统的框架。

为什么要有这样一个框架

对于内部有很多管理项目的团队来说，一个通用的后台管理系统框架，性价比极高。主要有以下几点：

• 减少业务开发的选型成本，后台管理框架基本能满足业务需求，可以直接上手使用。
• 沉淀常见问题的最佳实践，避免业务开发时重复踩坑，浪费时间。
• 统一技术栈，不同部门的人接手项目也可以快速上手，而不需要额外的学习成本。

后台管理系统需要解决哪些问题

用户登录

调用后端服务实现登录，获取用户信息。

登录分为用户密码登录及外部站点授权登录。

菜单、面包屑及路由配置

实现菜单和路由的映射，通过简单的配置将两者相关联

  // menu.js
  export default menu = {
    name: 'menu.home',
    icon: 'icon type',
    route: 'main.home'
  }

  // route.js
  export default routes = {
    main: {
      // ......
      sub: {
        home: {
          // ......
        }
      }
    }
  }

通过上述的方式，点击菜单跳转到对应的路由。进入页面后，根据路由生成面包屑。

权限管理

登录成功后，可以调用权限相关接口，获取当前角色的权限，根据角色权限不同，设置菜单的可见性及一些功能的使用权限。

数据流管理

选用合适的数据流工具，目前公司内部使用的是 @gem-mine/durex (opens new window)

自动加载 model 文件夹下的文件或名为 model 的文件引入数据流。

mock

通过 devServer 拦截实现 mock 能力。方便本地开发调试。

请求库

对常见的请求能力做封装，如全局拦截器、单请求拦截器、适配器、划分不同请求域等。

目前内部使用的请求库底层依赖于 axios。注意考虑是否需要兼容 IE9 浏览器，axios@0.18.1 版本后移除了对 IE9 的支持，如果需要做兼容，可以将原来做了兼容的适配器剥离出来，如 @gem-mine/request-adapter-xhr (opens new window)

IE10+ 浏览器跨域采用 cors 方案。IE9 跨域与服务端配合，将所有请求转换为 POST 请求。

国际化

提供国际化能力，国际化资源支持使用本地文件或者调用接口获取。

如果使用了 moment，可以利用 moment-locales-webpack-plugin (opens new window) 做优化。

提供常见场景

提供 CRUD 表单 列表 404 403 500 等常见场景的 demo，供使用者参考使用，同时通过命令行工具，提供一键删除 demo 的能力。

换肤

提供简单的换肤能力，这里可以参考 webpack-theme-color-replacer (opens new window)。

构建

通过 npm run build 进行构建，同时支持使用类似 --analyzer 的参数分析构建文件。

构建能力收敛到一个命令行工具中，暴露一个配置文件如 xxx.config.js，供使用者修改 webpack 配置。参考 @vue/cli-service。

将构建能力下沉到一个单独的命令行工具中，使用户无需关注构建配置，聚焦于业务开发。后期如果构建工具升级，比如说 webpack4 升级到 webpack5，只需要升级命令行，而不用关注里面具体细节，节省大量的成本。

部署

根据要部署的 url，在 xxx.config.js 中配置好相应的 publicPath 等参数。将构建生成的静态文件上传到服务器，

技术支持 && 迭代升级

提供一份相对完善的文档供使用者快速接入。文档内容包含以下几个部分：

• 概述：框架介绍，提供了什么能力，技术选型，入门使用。
• 基础使用：菜单、路由、数据流、国际化、网络请求等功能的使用。
• 进阶: 自定义 webpack 配置、mock、权限管理等。
• 构建和部署
• 常见问题：记录使用中常见的问题，避免其他使用者重复踩坑。
• CHANGELOG: 更新日志。

除文档外，还可以通过命令行提供一个自动升级能力，旧项目执行一个命令可以快速升级，比如说升级依赖、webpack 配置、babel 配置等。