AntDesignPro开发手册.docx
《AntDesignPro开发手册.docx》由会员分享，可在线阅读，更多相关《AntDesignPro开发手册.docx（14页珍藏版）》请在冰点文库上搜索。
AntDesignPro开发手册
AntDesignPro开发手册
修订历史记录
日期
版本
说明
作者
1.
、八—
前言
1.1目的
让不熟悉AntDesignPro的开发人员快速掌握开发方式
1.2概述
AntDesignPro是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护
核心技术组成：
ES2015+JavaScript语言的新标准
React用于构建用户界面的JAVASCRIPT库
（异
dva是基于（redux（状态管理）+react-router（路由库）+redux-saga
步中间件）等）的一层轻量封装
g2一套基于可视化编码的图形语法
antdReact组件
2.开发环境
2.1Node.js安装配置
Node.js安装包及源码下载地址为：
https:
//n0dejs.0rg/en/download/
2.2安装方式
2.2.1直接clonegit仓库
gitclone--depth=1https:
//github.eom/ant-design/ant-design-pro.git
my-project
cdmy-project
2.2.2使用集成化的命令行工具ant-design-pro-cli
npminstallant-design-pro-cli-g#
安装脚手架
mkdirmy-project
cdmy-project
pronew#创建一个新项目
2.3目录结构
ock
ublic
1avicon.ico
rc
Issets
Iommon
Iomponents
I2e
Iayouts
Iodels
Ioutes
Iervices
Itils
I——2.js
Iheme.js
Index.ejs
Index.js
IndexJess
1outer.js
ests
EADME.mdackage.json
#本地模拟数据
#公共资源
#网站图标
#本地静态资源
#应用公用配置，如导航信息
#业务通用组件
#集成测试用例
#通用布局
#数据交互
#业务页面入口和常用模板
#后台接口服务
#工具库
#可视化图形配置
#主题配置
#HTML入口模板
#应用入口
#全局样式
#路由入口
#测试工具
#项目说明
#项目配置文件
2.4项目初始化
2.4.1安装依赖
npminstall
2.4.2启动应用
npmstart
243打包
npmrunbuild
该命令会生成*.js、*.css、index.html等静态文件
3.开发指导
3.1开发规范
3.2开发流程示意图
AntDesignP「o开发流程示意图
2018.03
开始
菜单
r1
斗、
路由（router.js）
贡面（routes）
◎
1
k
7
6
数据请求（service）
备注：
*功能开发时推荐便用［模拟数据］馍式
*功能联调时推荐使用［真实裁掲］模式
3.3开发实例
嘆拟韧居（RIX附
真实数J^（server）
3.3.1新建一个菜单
3.3.1.1编辑菜单配置文件src/common/menu.js，在menuData里添加菜单配置，数据格式为json
格式，详细配置请参照下图
JSmenujsX
4constmenuData=[{
name:
—菜单中文茗祢如：
主机运维-
icon:
團拆害称〔从團标列表中选table',
path:
菜单路径'注意这块命名■使用英文或者字母，不要便用中文，匡量拿菜单功能命容JO：
host^eration）
children:
[{
9name:
"二级家单中文名琲如：
监控J
16icon:
*字体鲫名称I从團标列表中选择）・.
path;'二级菜单路径（■注竜这块命名使用英文或者宇母，不婪使用中文，尽蚩莹棗单功能命名如：
monitor）\
12children:
[：
{//三级菜单
name:
.三级菜单中文容称如：
主机监控J
14icon:
.字体画歸称（从團标列表中选择〉
patht「三级菜单踣径（注彦遠块命名快用英文或者字母，不葵决用中文菜单功能命名如；hostMonltar）\
}]>
17>]>
懾}]；
IconFont图标
19
部分图换載图厂冃区域为iconH性的取值范围，蓝色区域也可以做取值范围’注育要去掉・.isn-・
M
►►
«
stepforward
stepbackward
forward
banckward
caretright
caredeft
caretdown
.iconstepforward
.jeonstepbackward
.icon-forward
.icon-banckward
.icon-caretright
.icon-caretieft
.icon-caretdown
3.3.2新建一个路由配置
3.3.2.1路由配置文件src/common/router.js，在routerConfig里添加路由配置，数据格式为json
格式，详细配置请参照下图
jsrouterjsx
*D
71；■-nu-r.ronitgetficuterOata=（app）=>卫
72constrauterConfig{
MVhostOp&ration/monitor/hestMonitor':
{
component:
dynaiiieWrapper（app>['hostMoritorF],（）>（J./routBs/HDEtOpgLmticin/HcjwtMonitor.jsf}）j
>,
76//红鱼区域：
格式的野数为一条菜单项对应的路由，关系为一对一
77H'/liostOperation/monitor/hostHonitop'j^个醪数^menu.js里的path厲■性要对应上
78//[qhostMonitor']f^当前菜单'hastMonitor'rnodel的使用权限
79//import（'../routes/HostOperation/HastMcnitor,js'）代表当前菜单项对应的页面地址
80}
3.3.3新建一个路由页面
3.3.3.1页面元素文件src/routes/HostOperation/HostMonitor.js
title:
'
主机名称’，
dataIndex:
'name',
},
{
title:
'
主机IP',
dataIndex:
'host_ip',
},
{
title:
'
系统运行时间’，
dataIndex:
't',
},
{
title:
'
操作系统’，
dataIndex:
'host_group.os',
},
{
title:
'
所属系统’，
dataIndex:
'host_group.system',
},
{
title:
'
网络区域’，
dataIndex:
'host_group.net',
}];
//表格发生操作时执行函数
handleStandardTableChange=（pagination,filtersArg,sorter）=>{
const{dispatch}=this.props;
const{formValues}=this.state;
constfilters=Object.keys（filtersArg）.reduce（（obj,key）=>{constnewObj={...obj};
newObj[key]=getValue（filtersArg[key]）;
returnnewObj;
},{}）;
varparams={
currentPage:
pagination.current,
pageSize:
pagination.pageSize,
};
if（sorter.field）{
params.sorter='${sorter.field}_${sorter.order}';
}
dispatch（{
type:
'hostMonitor/getMonitorList',
payload:
params,
}）;
}
//操作重置按钮时执行函数handleFormReset=（）=>{
=this.props;
const{form,dispatch}form.resetFields（）;this.setState（{formValues:
{},}）;dispatch（{type:
'hostMonitor/getMonitorList'
payload:
{},
}）;
}//查询条件展开/收起
toggleForm=（）=>{
this.setState（{
expandForm:
!
this.state.expandForm,
}）;
}//选择行
handleSelectRows=（rows）=>{this.setState（{
selectedRows:
rows,
}）;
}//操作查询按钮
handleSearch=（e）=>{
e.preventDefault（）;
form.validateFields（（err,fieldsValue）=>{if（err）return;
constvalues={
&&fieldsValue.updatedAt.
valueOf（）,
...fieldsValue,
updatedAt:
fieldsValue.updatedAt
};
this.setState（{formValues:
values,}）;
dispatch（{
type:
'hostMonitor/getMonitorList'
payload:
values,
}）;
}）;
}
//显示/隐藏模态窗口！
!
flag:
将flag强转为布尔类型handleModalVisible=（flag）=>{
this.setState（{
modalVisible:
!
!
flag,
}）；
}
//显示/隐藏模态窗口
handleUpdateModalVisible=（flag,record）=>{
this.setState（{updateModalVisible:
!
!
flag,
stepFormValues:
record||{},
}）;
}//查询条件表单
renderSimpleForm（）{
const{getFieldDecorator}=this.props.form;
return（
8,lg:
24,xl:
48}}>
{getFieldDecorator（'hostIp'）（
）}
查询
8}}onClick={this.handleFormReset
}>重置
）;
}
//选择默认的查询条件表单
renderForm（）{
returnthis.renderSimpleForm}//渲染页面
render（）{
const{hostMonitor:
{data},loading}=this.props;
constnewdata=data?
data:
{
list:
[],
pagination:
{},
3.332页面样式文件src/routes/HostOperation/HostMonitor.less
3.3.4新建一个数据模型
3.3.4.1新建model文件：
src\models\hostMonitor.js
3.3.5新建一个模拟请求数据返回
3.3.5.1新建service文件：
src\services\trans.js
3.3.6新建一个真实请求数据返回
3.3.6.1新建service文件：
src\services\trans.js
3.4编码规范
5.在线资源
5.1官方文档：
5.1.1AngDesignPro代码地址
https:
//github.eom/ant-design/ant-design-pro
5.1.2AngDesignPro文档
https:
//pro.ant.design/docs/getting-started-en
5.1.3AngDesignPro在线问题讨论
https:
//github.eom/ant-design/ant-design-pro/issues
5.1.4AngDesign在线文档
https:
//ant.design/
5.1.5国内镜像站点
http:
//ant-design-pro.gitee.io/index-cn
http:
//ant-design.gitee.io/does/reaet/introduee-en
5.2在线预览：
https:
//preview.pro.ant.design/#/dashboard/analysis
6.需要完善的功能
6.1用户登录信息
6.2动态菜单和路由
升级会员 