Antd Pro食用笔记（一）—

Antd Pro官方文档地址： Antd Pro 文档
此篇涉及到的配套技术文档：

ProLayout
UmiJS

一、初始化一个antd pro项目（官网步骤）

1.1 安装

官网的安装步骤：

新建一个空的文件夹作为项目目录，并在目录下执行：
yarn create umi or npm create umi

选择 ant-design-pro：

Select the boilerplate type (Use arrow keys)
❯ ant-design-pro  - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.app             - Create project with a simple boilerplate, support typescript.block           - Create a umi block.library         - Create a library with umi.plugin          - Create a umi plugin.

Ant Design Pro 脚手架将会自动安装。

【TIPS】我安装的时候还额外询问了安装TS or JS版本、simple or complexe版本，我选的是JS版本，然后simple和complexe版本我各下了一份（用complexe来做参考和备份）。

1.2 目录结构

成功初始化后的项目目录结构如下：

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

需要说一下的是config目录：

config
├── config.dev.js       // 开发环境的一些配置，大部分时候不需要动
├── config.js           // umiJS的配置：包含dva、国际化、主题色、路由、代理等
├── defaultSettings.js  // 对项目界面及iconfont的配置：导航主题、主题色、布局、页面标题、iconfont路径等，即官网预览项目右边设置按钮所设置的内容
├── proxy.js            // 请求的代理【后面讲服务器交互时介绍】
└── routes.js           // 路由的配置【配置好后将文件导出到config.js中配置给：routes。如果路由不复杂可以直接在config.js中配置】

我们的主要业务逻辑大部分都在src目录下，官方也给出了推荐的src目录代码结构：

src
├── components
└── pages├── Welcome        // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了|   ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层|   ├── Form.tsx|   ├── index.tsx  // 页面组件的代码|   └── index.less // 页面样式├── Order          // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了|   ├── index.tsx|   └── index.less├── user           // 一系列页面推荐通过小写的单一字母做 group 目录|   ├── components // group 下公用的组件集合|   ├── Login      // group 下的页面 Login（“二级页面”）|   ├── Register   // group 下的页面 Register|   └── util.ts    // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织└── *              // 其它页面组件代码

1.3 使用

项目成功跑起来之前还需要按照package.json文件将依赖安装到本地：npm install
之后就可以通过npm run dev或者yarn start跑起来了

二、新建页面

在 config/routes.js文件中配置新页面的路由：
路由的具体配置可参见umiJS官方文档：路由配置

{path: '/index',               // 路径配置name: 'indexTrader',       // 菜单项名字&页面title名字，如项目需配置国际化则需要与国际化文档保持一致icon: 'AppstoreOutlined', // 菜单项图标component: './Index'      // 页面组件
}

2.1 `routes.js`路由配置说明

路由文件的配置大致如下：

export default [{path: '/',component: '../layouts/BlankLayout',  // 存放空白布局的地址routes: [{path: '/user',component: '../layouts/UserLayout',routes: [{ name: 'login', path: '/user/login', component: './User/login', },],},{path: '/',component: '../layouts/SecurityLayout,routes: [{path: '/',component: '../layouts/BasicLayout',authority: ['admin', 'user'],  // 表示此页面仅 admin 和 user权限用户可进入routes: [{ path: '/', redirect: '/indexTrader' },{ path: '/indexTrader', name: 'indexTrader', icon: 'AppstoreOutlined' , component: './IndexTrader' }// ... 其他页面路由 ★★★]}]}]},{component: './404',}
]

每嵌套一层布局文件，就需要在该路径下新增一层{ path: '<新布局匹配的路径>', component: '<新布局文件地址>', routes: <需应用新布局的页面路由>}。此外，在最后应加上一个404页面，作为上述路由都没有匹配项时的显示页面。
一般情况下，我们新增页面都应该配置在代码中标“★★★”处。

2.2 菜单项配置

2.2.1 `name`名称的配置及其国际化

使用的时候只需要保证name和各语言配置文档中menu.xx的xx部分保持一致即可，之后在界面中切换语言可自动替换生效。

菜单项名称和页面title值显示逻辑：

如国际化配置文档中能搜索到indexTrader的各语言配置就采用文档中的配置名称
如文档中没有搜索到该项配置或者项目不需要国际化，则直接采用name的值：indexTrader

举个栗子：
国际化配置文档src/locales/zh-CN/menu.js中有以下配置：

export default {'menu.indexTrader': '控制台',
}

src/locales/en-US/menu.js中有以下配置：

export default {'menu.indexTrader': 'Dashboard',
}

则上述路由在中文界面的菜单项上会显示出控制台，而在英文界面上则显示Dashboard。

【TIPS】pro中的布局采用的是ProLayout，里面内置了包括国际化的很多功能并提供相关配置项，详情参见官方文档：ProLayout-API配置

2.2.2 `icon`图标配置及iconfont图标的使用

2.2.2.1 使用antd图标

如使用antd的图标，直接将图标名称填入icon配置项即可。

2.2.2.2 使用iconfont图标

如使用iconfont的图标，ProLayout提供了iconfontUrl配置项，直接填入iconfont的url地址即可。如需全局使用iconfont，可在defaultSetting.js文件中配置，配置项同为iconfontUrl。

iconfontUrl可在iconfont官网的需要引入的项目中找到：

找到之后在defaultSettings.js文件中配置：

const proSettings = {navTheme: 'dark',primaryColor: '#1890ff',...iconfontUrl: '//at.alicdn.com/t/font_4564564_5wefewrfwre.js' // 此项替换为你自己的iconfont项目地址，即上述图片中复制的部分
}

在菜单项中使用iconfont：
```
{path: '/assessment',name: 'assessment',icon: 'icon-assessment',component: './Assessment',
}
```
icon的配置值为iconfont中下述图中红框部分的值：

此值可自行在iconfont项目中配置：

2.3 新建页面文件

src/pages目录下新建文件夹Assessment（推荐首字母大写），并在该目录下新建文件：

index.js 页面内容
index.less 页面样式文件

index.js举例：

import React, { Component, Fragment } from 'react';class Assessment extends Component {render() {return (<Fragment><p>Alpha 评级</p></Fragment>);}
};export default Assessment

【TIPS】如此页面还有私有的组件，可在该目录下创建components文件夹存放组件文件。

2.4 重启项目

配置好上述参数后，重启项目（修改了配置文件之后最好重新跑一次项目，否则新配置可能不生效），即可看到菜单栏出现了一个新页面！

3.布局文件

antd pro示例项目有四种布局文件：
BlankLayout、BasicLayout、SecurityLayout、 UserLayout
下面简单介绍一下各个布局的基本用法：

3.1 `BlankLayout` 空白布局

空白布局的代码很简单，主要是作为容器来使用（所有页面都应包裹在这个容器里）。
它的作用主要是在不同环境中返回“不同的容器”：

在开发环境中，用react-dev-inspector的Inspector组件作为项目的最外层容器
在生产环境中，用Fragment（即项目中常用的<></>）作为项目的最外层容器

BlankLayout.jsx

// BlankLayout.jsx
import React from 'react';
import { Inspector } from 'react-dev-inspector';
const InspectorWrapper = process.env.NODE_ENV === 'development' ? Inspector : React.Fragment;const Layout = ({ children }) => {return <InspectorWrapper>{children}</InspectorWrapper>;
};export default Layout;

react-dev-inspector的Inspector组件的作用：

可以从页面上识别react组件，直接跳转到本地ide的代码片段上

此功能是方便开发时从页面组件上定位对应代码片段，故在生产环境中无需使用，就有了代码中第三行的判断。
【TIPS】最外层容器，将空白布局作为routes.js文件最外层的配置即可：

export default [{path: '/',component: '../layouts/BlankLayout',  // 存放空白布局的地址routes: [{ path: '/user', component: '' }]}
]

3.2 `UserLayout`

抽离出用户登录注册页面的通用布局

3.3 `SecurityLayout`

验证用户登录状态，验证通过则正常访问内部页面，未通过则跳转到登录界面。

3.4 `BasicLayout`

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