# 通用后台管理系统开发
后台管理系统,由于其交互方式、业务场景相对比较固定,可以沉淀出一些最佳实践,形成一个专用于后台管理系统的框架。
# 为什么要有这样一个框架
对于内部有很多管理项目的团队来说,一个通用的后台管理系统框架,性价比极高。主要有以下几点:
- 减少业务开发的选型成本,后台管理框架基本能满足业务需求,可以直接上手使用。
- 沉淀常见问题的最佳实践,避免业务开发时重复踩坑,浪费时间。
- 统一技术栈,不同部门的人接手项目也可以快速上手,而不需要额外的学习成本。
# 后台管理系统需要解决哪些问题
# 用户登录
调用后端服务实现登录,获取用户信息。
登录分为用户密码登录及外部站点授权登录。
# 菜单、面包屑及路由配置
实现菜单和路由的映射,通过简单的配置将两者相关联
// 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 配置等。