README
后台管理系统
企业级后台管理系统最佳实践。
搭建目的
为了满足项目日常开发需求,特意搭建webpack构建工具,解决首次加载慢,文件过大,IE9兼容不友好,umi配置繁琐,,文档更新不同步,编译扩展性不灵活等不稳定的问题。所以做了几点优化,如:代码拆分,js/css压缩混淆,静态文件打包,按需加载,主题自定义风格,hot热更新,代理配置,常用UI组件,风格统一封装等。
技术栈
- 基于react,ant-design,typescript,axios, dva,webpack 等技术栈
- 基于 antd UI 设计语言,提供后台管理系统常见使用场景。
- 基于 typeScript 设计语言,提供编程语言设计规范。
- 基于 mock 服务,提供api接口模拟测试。
- 基于dva 动态加载 Model 和路由,按需加载。
环境版本要求
- node v10.15.3以上
- npm v6.4.1 以上(安装慢,缺少依赖时,在cmd输入以下命名,再进行npm i安装)
npm config set registry https://registry.npm.org/
- webpack v4.0以上
- antd UI v4.3.3(注意版本区分)
目录结构
├── /dist/ # 项目输出目录
├── /mockServer/ # mock接口模拟,引用src/pages/config_servies.ts的api共用,方便切换正式,不用重新写url(与后台沟通出预期api文档)
├── /public/ # 公共文件,编译时copy至dist/public目录
├── /src/ # 项目源码目录
│ ├── /css/ # css存放目录(包含阿里图标离线文件)
│ ├── /images/ # 图片存放目录
│ ├── /component/ # UI组件及UI相关方法,每一个目录代表一个封装的组件
│ │ ├── common.less # 全局样式
│ │ └── index.ts # 导出所有组件定义(表格,弹窗,表单,提示,下拉选择等,用uway前缀命名定义)
│ ├── /models/ # 数据模型
│ │ ├── config # 全局复用(菜单,面包屑,退出,重定向)
│ ├── /pages/ # 页面
│ │ ├── config_component.ts # 页面路径引入
│ │ ├── config_model.ts # model数据路径引入
│ │ ├── config_service.ts # api接口(也涉及mock复用url,或者select组件需要统一获取接口数据)
│ │ ├── /overview/ # 示例:总览页面模块
│ │ ├──├── /__Component/ # UI界面
│ │ ├──├── __Model.ts #model定义
│ │ ├──├── __Services.ts #api接口定义(若使用mock,就引用config_service.ts,同时方便后期接口联调,切换api前缀即可)
│ │ └── ....
│ ├── /utils/ # 工具函数
│ │ ├── index.ts # 时间格式化,ip转换,菜单节点类等方法
│ │ ├── crypto.js # AES,DES加解密方法
│ │ ├── font.rem.js # 大屏适配配置
│ │ ├── polyfill.js # 兼容ie9以上库
│ │ ├── cookie.ts # 缓存,清空,读取
│ │ ├── rule.ts # 静态,动态校验
│ │ ├── key.json # 对应key的别名,用来缓存定义名称,或者其它用途,方便统一
│ │ ├── request.js # 请求后台数据方法,包括token,超时登录,新增,删除提示tips统一处理
│ │ └── /theme/ # 多个主题配置,暗黑,深白,深色选择
│ ├── /routers/ # 路由定义
│ │ ├── /loginLayout/# 登录模块
│ │ ├── /userLayout/ # 前台模块(包含权限钩子组件)
│ │ ├── index.tsx # 路由配置
│ │ ├── scroll.top.tsx # 滚动顶部(页面切换滚动顶部)
│ │ └── router.map.tsx # 路由表
│ ├── /types/ # typescript静态检查
│ │ ├── config.model.ts # 公共模块
│ │ ├── form.ts # form表单
│ │ ├── global.ts # 全局复用
│ │ └── undefined.d.ts # 第三方未定义ts
│ ├── app.tsx # app应用注册入口
│ ├── index.html # html入口模板
│ └── variables.less # 覆盖antd主题
├── package.json # 项目信息
├── tsconfig.json # typescript配置
├── .config.js # 项目常用配置项
├── .babelrc # babel语法转换配置
├── webpack.common.js # webpack公共文件
├── color.js # 主题color全局配置
├── .eslintrc.js # 代码规范检测
├── .gitignore # 忽略某个文件提交
├── webpack.dev.js # 开发环境配置
├── webpack.prod.js # 生产环境配置
└── webpack.common.js # webpack公共文件
文件夹命名说明:
component:组件(方法)为单位以文件夹保存,文件夹名首字母小写、下划线命名(如
layout_login
),文件命名(如swtichConfig
)方法首字母小写(如layer
),若多个同一个功能模块,则创建一个文件夹。若是单个模块,以index.ts导出当前模块pages:页面为单位以文件夹保存,文件夹名首字母小写、下划线命名(除
__Component,__Model.ts,__Service.ts
模块区分外,其它统一),文件夹内主文件以index.tsx
导出,如果有子路由,依次按照路由层次建立文件夹(如./src/pages/overflow/__Component/[name]_detai.tsx
)。
快速开始
进入目录安装依赖:
npm i 或者 yarn install
开发:
npm run start
打开 http://localhost:8080
mock服务:
npm run mock
打包:
npm run build
将会打包至dist/目录 #package.json里version字段
访问dist目录文件:将dist复制mockServer/dist下,注意npm run mock命令输出提示
> node mockServer/app.js
后台服务已启动,本地ip为:
http://127.0.0.1:8000
后台服务已启动,局域网ip为:
http://192.168.27.183:8000
前台界面访问[需先打包前端项目build]:
http://192.168.27.183:8000/dist
若使用多种主题,自定义颜色没生效,输入以下命令
node color.js //重新生成即可
若使用自定义主题,在index.html找到
<link rel="stylesheet/less" type="text/css" href="./public/color.less" />//注释该这行,则不会覆盖默认主题
nginx 部署-用于html5模式访问
下载 nginx 软件包,在 nginx.exe 目录,打开命令行工具,用命令启动/关闭/重启 nginx
start nginx : 启动nginx
nginx -s reload :修改配置后重新加载生效
nginx -s reopen :重新打开日志文件
nginx -t -c /path/to/nginx.conf 测试nginx配置文件是否正确
关闭nginx:
nginx -s stop :快速停止nginx
nginx -s quit :完整有序的停止nginx
打包:
npm run build_dev
dist 目录整个拷贝到nginx\html\knowledge
目录下
nginx\conf\nginx.conf
文件,增加一个服务配置:
server {
listen 12001;
server_name www.study.com;
location / {
root html/knowledge;
index index.html;
try_files $uri $uri/ /index.html last;
}
}
备注
1.router.map.js文件定义路由时要避免出现key,path命名重复,
多级页面时,key命名拼接,如home.table,home.modal。
2.view目录里面的页面组件文件夹定义以及嵌套推荐规则,
一级菜单为一级目录名称,
二级菜单为二级目录名称以此类推,
私有功能公共组件(form组件配置,modal组件),在一级目录下面建立common文件夹或component文件夹.
3.models目录里面的config与之对应复用的接口业务逻辑,全局使用
4.api可以放入__Services或者config_service,区别在于是否使用mock模拟,方便后端联调不用重复写url