Ant Design Pro （中后台系统）教程

一、概念：https://pro.ant.design/docs/getting-started-cn（官方网站）

　　1、Ant Design Pro 是什么：  https://www.cnblogs.com/freely/p/10874297.html

　  　　Ant Design Pro 是一套开箱即用的中台前端/设计解决方案，是一个开发 中后台 系统的 脚手架。类似 vue-cli 一样，创建项目后，各种webpack配置、路由配置等，都已经弄好，直接开发就可以了。

　　2、Ant Design Pro 相关的技术栈： react+redux+dva+antd+fetch+roadhog

　　　  主要还是dva比较难理解，fetch 就 另外一种 ajax

二、安装：  两种安装方法

　　扩展介绍：官网教程中 安装用到了  npm create umi  命令。   npm create 命令是什么呢，create 是 install 的别名。   https://zhuanlan.zhihu.com/p/77454212

　　　　　　　但是经过实践，个人感觉是调用 npx install umi，然后在调用git命令。

　　方法一：按照官网的步骤：

    npm create umi     //
    cd create       // 安装时，直接创建create 项目目录
    npm install        // 安装依赖
    npm start         // 启动应用

　　方法二： npm create umi 的本质，还是调用 git 命令到git仓库上下载代码。调用npm create umi命令后, 自动调用  git clone https://github.com/ant-design/ant-design-pro --depth=1   这个git命令 。

　　　　　　 所以我们可以直接调用git命令，而不用安装 umi。  git clone https://github.com/ant-design/ant-design-pro --depth=1   是 JavaScript模式下的仓库，typescript模式下的仓库个人不用就不去介绍了。

$ git clone --depth= https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project

经过实践发现：还是方案一 更好，会把一些没用的文件，清理掉的；方案二 会多一些没用的文件出来

三、部署和构建

　　1、环境变量：https://pro.ant.design/docs/environment-variables-cn

　　　  环境变量是   ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION

　　2、构建 和 部署：   阅读  https://pro.ant.design/docs/build-cn

　　　  a。路由是 browserHistory 模式的话，服务器必须要配置。不然对应的路由，在服务器是找不到这个资源的。下面以 nginx 服务器部署为例：

    location / {
        root   E:\代码仓库\create\dist;
        index  index.html;

        # 用于配合 browserHistory使用
        try_files $uri $uri/ /index.html;
    }

---

四、区块 开发 （重点）   https://pro.ant.design/docs/block-cn

　　1、使用 模板 可以 自动创建 路由页面 并且配置路由。（模板代表一个页面）   如下图，可以自定义，创建一个模板页面。

　　

　　2、 使用区块开发 可以 自动添加 需要的 antD 中的组件。（区块可以类比为一个组件）  如下图，将需要的 组件，添加到页面中，指定的位置上。

五、路由和菜单

　　1、路由管理： 通过约定的语法，在 config.ts 中配置路由。https://pro.ant.design/docs/router-and-nav-cn

　　　　a、路由菜单可以从服务器获取

　　2、菜单生成： 根据路由配置 会自动生成菜单。菜单项名称，嵌套路径与路由高度耦合。

　　3、面包屑： 组件 PageHeaderWrapper 中内置的面包屑,也可通过 RouteContext 提供的信息自定义生成。

　　4、路由中 几个  layouts 组件（UI组件 和 业务组件）：   （开发时，页面的入口就是从路由开始的）

　　　　a、SecurityLayout （功能组件）：分析代码，这个 应该是判断用户是否 登入的组件。

　　　　  b、 BasicLayout ：基础页面布局，包含了头部导航，侧边栏和通知栏：

　　　　  c、 UserLayout：抽离出用于登录注册页面的通用布局

　　　　  d、 BlankLayout：这个空白 页面。这个组件没什么用。

六、布局 (路由的 UI 组件)           https://pro.ant.design/docs/layout-cn/

　　说明：不同的页面 在路由中 可以 选择 在 需要的那种布局下。

　　1、BasicLayout：基础页面布局，包含了头部导航，侧边栏和通知栏：

　　2、UserLayout：抽离出用于登录注册页面的通用布局

　　3、BlankLayout：空白的布局

七、新增页面

　　1、pages目录下新建文件

　　2、将文件加入菜单和路由

　　3、新增 model、service：非必须，如果需要用到 dva 中的数据流，才要创建。

八、Pro 的 Layout 组件（几个组件集合）：  https://pro.ant.design/docs/layout-component-cn

　　　　注意，不是antD 的Layout 组件

　　a、ProLayout 组件：路由中 BasicLayout 组件的核心 UI组件。实现左边菜单，头部的header 布局。

　　b、PageHeaderWrapper ：页头组件。快速实现 面包屑和标题。

　　c、SettingDrawer ：  SettingDrawer 提供了一个图形界面来设置 layout 的配置，方便在演示环境中展示 Layout 的所有能力。正式环境这个东西一般是要去掉的。

　　d、DefaultFooter ：页尾 组件。快速实现 页尾 内容。

九、页面设置样式      https://pro.ant.design/docs/style-cn

　　1、基于 less 开发，具体的使用参考上面链接。

十、和服务器端交互

　　1、

十一、Mock 和 联调

十二、更换主题

　　1、主题定制：

　　 2、在线切换主题（重点）：https://pro.ant.design/docs/theme-cn#%E5%9C%A8%E7%BA%BF%E5%88%87%E6%8D%A2%E4%B8%BB%E9%A2%98

　　这个是  左边菜单和 页头固定的配置。   文档上的说的文件路径是错误的（可能文档没有实时更新）。正确的配置路径是   config/defaultSettings.js

十三、权限管理    https://pro.ant.design/docs/authority-management-cn

　　　  这个 文档 还是比较清晰的

---

实践总结：

1、 固定左边菜单和 页头固定：

　　修改 配置 文件   config/defaultSettings.js  就可以实现

2、创建 mock数据：

　　只要在 mock 目录下的文件，有对应的 接口的匹配就可以了。不需要，在某个文件中引入相应的文件。脚手架中会自动把 mock下的所有文件进行执行的。

3、配置 代理 服务器：    在 config/config.js 中配置

　    注意：mock 和 代理都 可以匹配的话，请求接口  会 走 mock 数据，代理的真实请求就没有想过。 关闭mock数据，或者 mock数据不能匹配对应的接口，就可以走代理请求，获取真实的数据。

4、菜单 中文配置：

　　配置好路由，默认的菜单名称是英文的。要设置成中文的，需要在 src\locales\zh-CN\menu 中配置。

5、头部右边的内容，通过 BasicLayout.jsx 这个布局入口文件就可以找到，这部分内容所在的文件。

import RightContent from '@/components/GlobalHeader/RightContent';

6、 antD pro 安装 的项目，有一些对我们没有用的功能。需要删除掉。

　　

---

dva 教程     https://dvajs.com/guide/introduce-class.html

说明：dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验

一、Model 对象：dva整个知识体系太多，设计中主要会用就可以了。在antd pro中，modes是放在一个目录下统一管理的，导出一个 model 对象，对象的选项如下：

　　1、namespace：当前 Model 的名称

　　2、state：该 Model 当前的状态

　　3、reducers：Action 处理器，处理同步动作，用来算出最新的 State

　　4、effects：Action 处理器，处理异步动作

二、使用：

　　1、设置 dva 的 state：通过 dispatch 触发 修改。

dispatch({
      type: 'products/delete',
      payload: id,
 });

　　2、获取修改后的数据：

dispatch({
      type: 'products/delete',
      payload: id,
    });