轻松玩转Ant-Design-Pro一

ant design pro来源于 ant design，其是一段自带样式的 react 组件，用于企业后台的漂亮的，可控的组件。ant design 有很多组件和样式，不可能所有都记住，我们只要记住常用的，遇到不常用的，学会查文档就可以了
因为 ant design 很强大，阿里有些大神就直接将 ant design 继续向上封装成一个完整的项目，这就是ant design pro，注意 ant design pro 已经是一个成形的项目，配置环境已经好了，我们做项目只需要在其上进行增删改就可以了，其就是个脚手架

安装

npm create umi

然后在下面的选项中选择 ant design pro

这时候 pro 的脚手架就会安装了

目录结构

ant design pro 最常用有两个命令：

• umi dev: 本地模拟开发环境，可以使用 mock 数据，使用的开发环境的服务器是 express
• umi build：打包出静态文件，使用线上服务器进行运行，如果在本地模拟线上环境，可以通过插件 serve，这时候用不了 mock 数据的（可以安装一个本地静态服务器：npm i serve，然后通过 serve -s dist，这时候就可以在本地模拟一个线上环境）

路由和菜单是组织起一个应用的关键骨架，pro 中的路由为了方便管理，使用了中心化的方式，在 config.ts 统一配置和管理，根据路由的配置会自动生成对应的菜单。
我们看下如何定义和修改 antd pro 中的样式
因为我们定义的 css 是全局性的，这就产生了全局污染的问题，也就是说，我们通过 npm run build 之后的 css 文件，后面的 css 选择器会覆盖前面的 css 选择器，为了解决这种情况，我们采用了 css modules 方式，其定义如下：

import styles from './example.less';
export default ({title}) => <div className={styles.title}>{title}</div>;
.title {
  color: @heading-color;
  font-weight: 600;
  margin-bottom: 16px;
}

在上面的样式文件中，.title 只会在本文件生效，你可以在其他任意文件中使用同名选择器，也不会对这里造成影响。
下面我们看下 pro 作为前端框架和服务端是如何进行交互的：
1.UI 组件交互操作；
2. 调用 model 的 effect；
3. 调用统一管理的 service 请求函数；
4. 使用封装的 request.ts 发送请求；
5. 获取服务端返回；
6. 然后调用 reducer 改变 state；
7. 更新 model。

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 services 文件夹中，并且一般按照 model 维度进行拆分文件，在处理复杂的异步请求的时候，很容易让逻辑混乱，陷入嵌套陷阱，所以 Ant Design Pro 的底层基础框架 dva 使用 effect 的方式来管理同步化异步请求(通过 generator 和 yield 使得异步调用的逻辑处理跟同步一样)：

effects: {*fetch({ payload}, {call, put}) {
    yield put({
      type: 'changeLoading',
      payload: true,
    });
    // 异步请求 1
    const response = yield call(queryFakeList, payload);
    yield put({
      type: 'save',
      payload: response,
    });
    // 异步请求 2
    const response2 = yield call(queryFakeList2, payload);
    yield put({
      type: 'save2',
      payload: response2,
    });
    yield put({
      type: 'changeLoading',
      payload: false,
    });
  },
},

tips:

• 跨域：只要请求协议或者 IP 或者端口有一个不同，就表示是不同的请求，这时候就存在跨域，注意跨域请求中，服务器还是可以接收到跨域请求的，只是响应会被浏览器给拦截，所有处理跨域有个方法就是让服务器告诉浏览器某个请求允许跨域, 当然处理跨域还可以使用代理方式 proxy
• 其实前端开发说起来很简单，也就是两件事，就是发起请求和处理数据，把这两件事情处理好了，前端也就学好了，再复杂的前端框架都是围绕这两点展开的
• antd pro 是基于 umi，es6，dva，等，如果有这几方面基础，会更加容易掌握 antd pro
• 本质上 pro 里面的 mock 数据是不支持线上环境调用的，但是有些时候确实需要在线上环境调用 mock，这时候可以通过工具 umi serve，将 mock 数据单独抽离出来，运行在某一个服务上，供 pro 调用。注意 umi serve 相对于 umi dev 区别是：umi dev 支持热更新，但是 umi serve 不支持热更新，需要重新启动后才会更新界面，umi serve 更像线上环境
• 安装包的时候，npm install […]默认是 npm install […] -S
• 在一个项目中，到底是使用 npm 安装依赖还是 yarn，有一个参考标准，就是根据 package.json 里面某些命令是用 npm 还是 yarn
• 在终端中，如果想知道当前路径，可以通过命令：pwd
• 注意开发过程中，如果遇到困难，可以查官方文档，看看有没有对应的例子，实在不行，可以看源码

扫码关注公众号，有更多精彩文章等你哦