AntDesignPro（中后台系统）教程
⼀、概念：（官⽅⽹站）
  1、Ant Design Pro 是什么：
  　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 的别名。
      　但是经过实践，个⼈感觉是调⽤ npx install umi，然后在调⽤git命令。
  ⽅法⼀：按照官⽹的步骤：
npm create umi    //
cd create      // 安装时，直接创建create 项⽬⽬录
npm install// 安装依赖
npm start        // 启动应⽤
  ⽅法⼆： npm create umi 的本质，还是调⽤ git 命令到git仓库上下载代码。调⽤npm create umi命令后, ⾃动调⽤git clone
github/ant-design/ant-design-pro --depth=1  这个git命令。
      所以我们可以直接调⽤git命令，⽽不⽤安装 umi。  git clone github/ant-design/ant-design-pro --depth=1  是JavaScript模式下的仓库，typescript模式下的仓库个⼈不⽤就不去介绍了。
$ git clone --depth=1 github/ant-design/ant-design-pro.git my-project
$ cd my-project
经过实践发现：还是⽅案⼀更好，会把⼀些没⽤的⽂件，清理掉的；⽅案⼆会多⼀些没⽤的⽂件出来
三、部署和构建
  1、环境变量：
  　环境变量是  ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION
  2、构建和部署：阅读
    a。路由是 browserHistory 模式的话，服务器必须要配置。不然对应的路由，在服务器是不到这个资源的。下⾯以 nginx 服务器部署为例：
location / {
root  E:\代码仓库\create\dist;
index  index.html;
# ⽤于配合 browserHistory使⽤
try_files $uri $uri/ /index.html;
}
四、区块开发（重点）
  1、使⽤模板可以⾃动创建路由页⾯并且配置路由。（模板代表⼀个页⾯）如下图，可以⾃定义，创建⼀个模板页⾯。
  2、使⽤区块开发可以⾃动添加需要的antD 中的组件。（区块可以类⽐为⼀个组件）如下图，将需要的组件，添加到页⾯中，指定的位置上。
五、路由和菜单
  1、路由管理：通过约定的语法，在 config.ts 中配置路由。
    a、路由菜单可以从服务器获取
  2、菜单⽣成：根据路由配置会⾃动⽣成菜单。菜单项名称，嵌套路径与路由⾼度耦合。
  3、⾯包屑：组件 PageHeaderWrapper 中内置的⾯包屑，也可通过 RouteContext 提供的信息⾃定义
⽣成。
  4、路由中⼏个  layouts 组件（UI组件和业务组件）：（开发时，页⾯的⼊⼝就是从路由开始的）
    a、SecurityLayout （功能组件）：分析代码，这个应该是判断⽤户是否登⼊的组件。
      b、 BasicLayout ：基础页⾯布局，包含了头部导航，侧边栏和通知栏：
      c、 UserLayout：抽离出⽤于登录注册页⾯的通⽤布局
      d、 BlankLayout：这个空⽩页⾯。这个组件没什么⽤。
六、布局 (路由的 UI 组件)
  说明：不同的页⾯在路由中可以选择在需要的那种布局下。
  1、BasicLayout：基础页⾯布局，包含了头部导航，侧边栏和通知栏：
  2、UserLayout：抽离出⽤于登录注册页⾯的通⽤布局
  3、BlankLayout：空⽩的布局
七、新增页⾯
  1、pages⽬录下新建⽂件
  2、将⽂件加⼊菜单和路由
  3、新增 model、service：⾮必须，如果需要⽤到 dva 中的数据流，才要创建。
⼋、Pro 的Layout 组件（⼏个组件集合）：
    注意，不是antD 的Layout 组件
  a、ProLayout 组件：路由中 BasicLayout 组件的核⼼ UI组件。实现左边菜单，头部的header 布局。
  b、PageHeaderWrapper ：页头组件。快速实现⾯包屑和标题。
  c、SettingDrawer ：  SettingDrawer 提供了⼀个图形界⾯来设置 layout 的配置，⽅便在演⽰环境中展⽰ Layout 的所有能⼒。正式环境这个东西⼀般是要去掉的。
  d、DefaultFooter ：页尾组件。快速实现页尾内容。
九、页⾯设置样式
  1、基于 less 开发，具体的使⽤参考上⾯链接。
⼗、和服务器端交互
  1、
⼗⼀、Mock 和联调
⼗⼆、更换主题
  1、主题定制：
  2、在线切换主题（重点）：
  这个是左边菜单和页头固定的配置。⽂档上的说的⽂件路径是错误的（可能⽂档没有实时更新）。正确的配置路径是
config/defaultSettings.js
⼗三、权限管理
  　这个⽂档还是⽐较清晰的
实践总结：
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 教程
说明：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 触发修改。
antdesign教程
dispatch({
type: 'products/delete',
payload: id,
});
  2、获取修改后的数据：
dispatch({
:'products/delete',
:,
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。