Ant Design Pro Learning

Ant Design Pro Learning（结合实际项目）

环境变量

在开发中经常会有一些需求，根据不同的环境进行不同的操作，比如 url 的替换，dev 环境在 dev 的 url，而线上使用 prd 的环境。在 pro 的脚手架中就有这样的一个环境变量 ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION一些方法只能在演示网站中使用，不会让 git clone 的用户错误的将这些功能引入。

在 Pro 的config 中有根据环境变量来确认是否要加入 Google Analytics 的统计代码。如果是 Pro 的 site 部署就加入 Google Analytics 的统计。如果是用户就会默认的关闭掉这个功能。

const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION } = process.env;

// 针对 preview.pro.ant.design 的 Google Analytics 统计代码
// preview.pro.ant.design only do not use in your production ;
// preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
if (ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site') {
  plugins.push([
    'umi-plugin-ga',
    {
      code: 'UA-72788897-6',
    },
  ]);
}

虽然pro中有这个功能，但一般都删除这部分，Google Analytics会进行详细地统计资料，对数据有风险。

此次项目中已经删去。

umi 中提供了大量的默认环境变量，可以帮助我们自动一些脚手架功能。

构建

开发完毕后

$ npm run build

或者

yarn build

即可打包构建

由于 Ant Design Pro 使用的工具Umi已经将复杂的流程封装完毕，构建打包文件只需要一个命令 umi build，构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 *.js、*.css、index.html 等静态文件。。

如果需要自定义构建，比如指定 dist 目录等，可以通过 config/config.ts 进行配置。

如果构建文件很大，可以通过 analyze 命令构建并分析依赖模块的体积分布，从而优化代码。

npm run analyz

上面的命令会自动在浏览器打开显示体积分布数据的网页。

部署

如果只是简单的部署，只需要将整个 dist 文件夹复制到 CDN 和静态服务器。index.html 应该是服务器入口。

前端路由与服务端的结合

Ant Design Pro 使用的 Umi 支持两种路由方式：browserHistory 和 hashHistory。

可以在 config/config.ts 中进行配置选择用哪个方式：

export default {
  history: 'hash', // 默认是 browser
};

hashHistory 使用如 https://cdn.com/#/users/123 这样的 URL，取井号后面的字符作为路径。browserHistory 则直接使用 https://cdn.com/users/123 这样的 URL。使用 hashHistory 时浏览器访问到的始终都是根目录下 index.html。使用 browserHistory 则需要服务器做好处理 URL 的准备，处理应用启动最初的 / 这样的请求应该没问题，但当用户来回跳转并在 /users/123 刷新时，服务器就会收到来自 /users/123 的请求，这时需要配置服务器能处理这个 URL 返回正确的 index.html。

此次项目中采用的为 history: 'hash'

部署到非根目录

部署在非根目录时一种常见的需求，比如部署在 gitHub pages 中。接下来我们假设我们要部署项目到 ${host}/admin 中。首先我们需要在 config/config.ts 中配置 base,base 是 react-router 的前缀。我们需要将 base 配置为 admin, 如果我们还需要将其部署到 /admin 目录中，我们还需要设置 publicPath。设置完之后是这样的：

export default {
  // ... some config
  base: "/admin/",
  publicPath: "/admin/",
};

接下来我们就可以在 ${host}/admin 中访问我们的静态文件了。值得注意的是，在 dev 模式下 url 路径同样也会被修改。

此次项目中并没有使用。

使用 spring boot

Spring Boot 是使用最多的 java 框架，只需要简单的几步就可以与 Ant Design Pro 进行整合。

首先运行 build

$ npm run build

然后将编译之后的文件复制到 spring boot 项目的 /src/main/resources/static 目录下。

重新启动项目，访问 http://localhost:8080/ 就可以看到效果。

前后端暂时还在分离开发，整合时可以参考一下。

开发

路由和菜单

路由和菜单是组织起一个应用的关键骨架，pro 中的路由为了方便管理，使用了中心化的方式，在 config.ts统一配置和管理。

基本结构

在这一部分，脚手架通过结合一些配置文件、基本算法及工具函数，搭建好了路由和菜单的基本框架，主要涉及以下几个模块/功能：

• 路由管理 通过约定的语法根据在config.ts 中配置路由。
• 菜单生成 根据路由配置来生成菜单。菜单项名称，嵌套路径与路由高度耦合。
• 面包屑 组件 PageHeaderWrapper 中内置的面包屑,也可通过 RouteContext 提供的信息自定义生成。

路由

目前脚手架中所有的路由都通过config.ts 来统一管理，在 umi 的配置中我们增加了一些参数，如 name，icon，hideChildrenInMenu，authority，来辅助生成菜单。其中：

• name 和 icon分别代表生成菜单项的文本和图标。

• hideChildrenInMenu 用于隐藏不需要在菜单中展示的子路由。用法可以查看 分步表单 的配置。

• hideInMenu 可以在菜单中不展示这个路由，包括子路由。

• authority 用来配置这个路由的权限，如果配置了将会验证当前用户的权限，并决定是否展示。

  此次项目中路由在config/route.ts中编写

菜单

菜单根据 config.ts（此次也转移到route.ts） 生成。

从服务器请求菜单

可以在 src/layouts/BasicLayout.tsx中修改 menuDataRender，并在代码中发起 http 请求。此次项目中未见使用。

面包屑

面包屑（个人理解为层级导航）由 PageHeaderWrapper 实现，Layout 将 根据 MenuData 生成的 breadcrumb，并通过 PageHeaderWrapper 将其展现。 PageHeaderWrapper 封装至 Ant Design 的 PageHeader，api 完全相同。

新增页面

可以通过umi的pro自带的新增区块来添加，看起来快捷但是应该模版有限，此次项目中采取手动代码添加。

脚手架默认提供了两种布局模板：基础布局 - BasicLayout 以及 账户相关布局 - UserLayout：

如果你的页面可以利用这两种布局，那么只需要在路由配置中增加一条即可：

  // app
  {
    path: '/',
    component: '../layouts/BasicLayout',
    routes: [
      // dashboard
      { path: '/', redirect: '/dashboard/analysis' },
      { path :'/dashboard/test',component:"./Dashboard/Test"},
    ...
},

加好后，会默认生成相关的路由及导航。

新增布局

在脚手架中我们通过嵌套路由来实现布局模板。config.ts 是一个数组，其中第一级数据就是我们的布局，如果需要新增布局可以再直接增加一个新的一级数据。

此次转移到route.ts中：

在 config/routes.ts 文件中选择合适的路由下添加配置

{
  "path": "完整路由",
  "name": "路由名",
  "icon": "图标",
  "component": "组件路径，路径基于 src/pages/"
}

再在在 src/pages 的相关目录添加一个 tsx 文件（包含之前提到的面包屑PageHeaderWrapper使用）

import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card } from 'antd';

const Example: React.FC = () => {
  return (
    <PageHeaderWrapper>
      <Card bordered={false}></Card>
    </PageHeaderWrapper>
  );
};

export default Example;

布局

Ant Design Pro 的布局

在 Ant Design Pro 中，抽离了使用过程中的通用布局，都放在 layouts 目录中，分别为：

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

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

• BlankLayout：空白的布局

通常布局是和路由系统紧密结合的，Ant Design Pro 的路由使用了 Umi 的路由方案，将配置信息统一抽离到 config/config.ts下。

Ant Design 布局组件

除了 Pro 里的内建布局以外，在一些页面中需要进行布局，可以使用 Ant Design 目前提供的两套布局组件工具：Layout 和 Grid。本次项目中通过代码使用这些以及card等组件来实现前端的布局与排版。

区块

具体例子见https://pro.ant.design/docs/block-cn

的路由方案，将配置信息统一抽离到 config/config.ts下。