后台管理系统

企业级后台管理系统最佳实践。

搭建目的

为了满足项目日常开发需求，特意搭建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