Antd Pro V5尝鲜体验.md

Antd Pro V5 尝鲜体验

Ant Design Pro作为蚂蚁团队出品的一个企业级中后台前端/设计解决方案，在行业内一直广受好评。AntD Pro V5最近也已基本完成，支持预览，作为新版本，相比于V4有比较大的改动，具体的改动，请参考官方文档。

最近由于团队技术需求开发需要，我尝鲜了一下AntD V5新版本，使用体验还是很不错的，在这里做一下简单的使用记录与分享。

Antd Pro V5基于umi@3，同时接入并使用dva，有兴趣的小伙伴也可以去了解一下相关的知识~

Antd Pro V5 接入

考虑到不同的接入场景，本部分主要分为两部分内容，分别是项目从零创建与旧项目版本升级；

包管理工具个人推荐yarn，npm或者cnpm也可以，做好镜像配置即可；

项目创建

# yarn
mkdir test && cd $_
yarn create umi
# Select the boilerplate type
# ant-design-pro
# Be the first to experience the new umi@3
# Pro V5

创建并接入test文件夹；
yarn create umi 创建项目；
Select the boilerplate type 选择 ant-design-pro；
Be the first to experience the new umi@3 ?

是否体验umi@3，选择Pro V5；

至此，一个崭新的Antd Pro V5项目就已经创建好了，详细的目录结构如下图所示：

V4升级至V5

相信不少同学都有使用V4的经验，或者当前开发的项目使用的是V4版本。作为一个新版本，V5的数据流，布局与权限管理等相比V4都有较大的改动，已有的成熟业务最好还是等稳定版出来之后在进行接入；个人的项目，则请根据个人情况选择是否升级。

升级V5可以参考升级到V5，在此笔者就不加以赘述，在升级时如有遇到问题，建议对比GitHub官方源码进行修改。

项目创建/升级成功后，运行yarn start即可本地mock运行，继续进行接下来的开发调试工作。

项目结构

本部分，主要对于项目中比较重要，我们打交道比较多的部分做一下简要的介绍和说明，在了解了项目结构与各个文件的作用后，对于后面的开发有很大的帮助。

上图中，我们需要关注的文件夹主要是config，src这两个文件夹；mock中主要是本地mock接口调试的数据，可以根据需要随意修改，需要注意的是，上线之后则无法使用。

——test

|——config 公共基础配置

|—— config.ts 总体基础配置

|—— defaultsetting.ts 默认配置（皮肤风格，title，logo等）

|—— proxy.ts 代理配置（不包含正式线上环境配置）

|—— routes.ts 路由配置

|—— ......

|—— src 页面代码

|—— .umi umi相关

|—— components 公共组件

|—— e2e 测试相关

|—— locales 国际化相关

|—— pages 页面代码

|—— services umi service部分，简单理解为接口方法定义处即可

|—— utils 工具方法存放处，创建项目时默认生成的暂时用不上

|—— access.ts 权限管理

|—— app.tsx 页面初始化，错误处理封装

|—— global.less ......

|—— global.tsx ......

|—— manifest.json ......

|—— service-worker.js ......

|—— typings.d.ts typescript声明文件

实际开发

公共展示

项目创建成功，运行起来之后，我们首先第一件要做的事情，自然就是给项目打上我们的“印记”啦，也就是把项目中Antd Pro自带的一些展示，修改成我们自己希望的展示效果。

icon,title,页面主题等

favicon.ico直接替换修改public公共静态资源文件夹中的同名文件即可。

title，项目logo等通过修改config/defaultsetting.ts中有关配置项实现，也可以实现项目主题与颜色的修改;

需要注意的是，在通过import方法引入本地svg文件时，yarn start时会报错，需要修改umi的config，修改webpack的有关loader配置，具体的配置修改，请参考 UmiJS 配置

// config/defaultsetting.ts
import { Settings as LayoutSettings } from '@ant-design/pro-layout';
import Logo from `../${path}/test.svg`;

const Settings: LayoutSettings & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: 'light',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'mix',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
- title: 'Ant Design Pro',
+ title: 'test'
  pwa: false,
  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
	// logo: Logo,
  iconfontUrl: '',
};

export default Settings;

全局Header，footer修改

全局的页面Header与footer如果想要修改，有两种方式：

修改components目录下对应组件

Header由搜索框，使用文档，用户信息，国际化切换这几个区域组成，分别对应组件为：

功能	路径
搜索框	/src/components/HeaderSearch
使用文档	/src/components/RightContent/index.tsx
用户信息	/src/components/RightContent/AvatarDropdown.tsx
国际化切换	/src/components/RightContent/index.tsx

其中需要注意的是：

用户信息展示涉及到接口请求，数据流，详细内容我会在下面的登录实现模块进行讲解；
国际化切换为umi提供的selectLang，具体的修改/删除请查看umi对应文档;

修改app.tsx中对应render

上述组件，是在app.tsx中引入到我们的项目中来的，如果不想要在它们的基础进行修改，想要自己从新开发，可以直接去app.tsx文件中进行修改；

export const layout = ({
  initialState,
}: {
  initialState: { settings?: LayoutSettings; currentUser?: API.CurrentUser };
}): BasicLayoutProps => {
  return {
    rightContentRender: () => <RightContent />,
    disableContentMargin: false,
    footerRender: () => <Footer />,
    onPageChange: () => {
      const { currentUser } = initialState;
      const { location } = history;
      // 如果没有登录，重定向到 login
      if (!currentUser && location.pathname !== '/user/login') {
        history.push('/user/login');
      }
    },
    menuHeaderRender: undefined,
    ...initialState?.settings,
  };
};

具体的修改方式为，修改layout函数中footerRender与rightContentRender即可；

app.tsx的详细分析将会放在下面的登录模块；

页面加载中，首页加载页修改
1. loading效果：
  
  默认使用的是ant-design/pro-layout中export出来的PageLoading，在app.tsx文件中进行设置，想要自定义，修改如下代码即可：
```
// app.tsx
/**
 * 获取用户信息比较慢的时候会展示一个 loading
 */
export const initialStateConfig = {
  - loading: <PageLoading />,
  + loading: <MyLoading />
};
```
2. 首页加载页：
  
  首页加载前的过渡页面，实际就是一个html页面，也就是我们的page目录下的document.ejs文件；修改的话，直接修改这个文件就可以了；

登录/用户信息获取展示

好了，总算讲到了我们的登录模块。说到登录，就离不开接口。我这次后端开发选择的是nestJS，关于接口开发的内容，本次就不加以赘述了，还是先用Antd提供的十分好用的mock能力吧。需要注意的是，我们在本地开放时，可以使用本地mock文件夹中数据，但是构建部署的时候，是没有办法使用这个文件夹的，这个时候就需要我们将后端项目部署到服务器上进行联调测试了。

在我们访问页面的时候，我们整个项目的入口文件，app.tsx中，会export出一个名为getInitialState的function，在这个方法中，会去调用queryCurrent方法去调用接口获取用户信息(queryCurrent则是在我们的/src/services/user.ts中创建的)，在接口请求完成后，再根据返回的结果，决定是否需要存储，或者重定向到登录页面。

说到这里，就不得不提一下model中services和models的关系和作用了。简单点来理解呢，services就是我们放接口请求代码的地方，而models则是我们继续全局数据存储和操作的地方。dva 通过 model 的概念把一个领域的模型管理起来，包含同步更新 state 的 reducers，处理异步逻辑的 effects，订阅数据源的 subscriptions 。V5版本虽说删除默认的models文件夹，但是我们还是可以根据自己的需要，创建并使用对应的models。

export async function getInitialState(): Promise<{
  settings?: LayoutSettings;
  currentUser?: API.CurrentUser;
  fetchUserInfo: () => Promise<API.CurrentUser | undefined>;
}> {
  const fetchUserInfo = async () => {
    try {
      const currentUser = await queryCurrent();
      return currentUser;
    } catch (error) {
      history.push('/user/login');
    }
    return undefined;
  };

  // 如果是登录页面，不执行
  // 除登录页面外，其他所有页面均执行
  if (history.location.pathname !== '/user/login') {
    const currentUser = await fetchUserInfo();
    return {
      fetchUserInfo,
      currentUser,
      settings: defaultSettings,
    };
  }
  return {
    fetchUserInfo,
    settings: defaultSettings,
  };
}

getInitialState方法执行完之后，会生成一个名为initialState的model，里面包含了初始化用户的信息（也就是刚刚接口请求存入的信息）。我们可以在全局通过useModel的方式使用这个model。

const { initialState, setInitialState } = useModel('@@initialState');

权限/菜单/路由

这一块比较简单，了解了登录的流程之后，参考umi的路由设置模块即可，权限则是需要关注一下access.ts；

界面开发

Antd Pro支持使用Antd的组件库，大家参考官方文档进行开发即可；

除此之外，还可以配置umi的气泡工作台，可以方便的进行功能的开发。

配置方法：

新增依赖@umijs/preset-ui
```
yarn add @umijs/preset-ui -D
```
package.json新增start:ui命令
```
"start:ui": "UMI_UI=1 umi dev",
```

运行yarn start:ui，即可看见umi气泡工作台，点开后我们就可以方便快捷的选择模板等进行开发啦。

结语

由于之前一直做的是To C的业务，To B的做的很少，也是借着这次机会学习了一下Antd Pro。由于是组内的技术需求，技术选型方面给了我很大的自由，让我可以尝试直接使用V5的最新版本。尽管有些人会觉得Antd Pro会有点“重”，但是它的设计风格和代码都有很多值得学习的地方，后续会继续深入了解一下。

Q.E.D.