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
下。