AntDesignPro开发手册精编版.docx
《AntDesignPro开发手册精编版.docx》由会员分享，可在线阅读，更多相关《AntDesignPro开发手册精编版.docx（17页珍藏版）》请在冰点文库上搜索。
AntDesignPro开发手册精编版
AntDesignPro开发手册
修订历史记录
日期
版本
说明
作者
、八—
前言
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:
//nodejs.org/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目录结构
Iock
Iublic
1avicon.ico
Irc
Issets
Iommon
Iomponents
I2e
Iayouts
Iodels
Ioutes
Iervices
Itils
I——2.js
Iheme.js
Index.ejs
Index.js
Index.less
1outer.js
Iests
IEADME.md
1ackage.json
#本地模拟数据
#公共资源
#网站图标
#本地静态资源
#应用公用配置，如导航信息
#业务通用组件
#集成测试用例
#通用布局
#数据交互
#业务页面入口和常用模板
#后台接口服务
#工具库
#可视化图形配置
#主题配置
#HTML入口模板
#应用入口
#全局样式
#路由入口
#测试工具
#项目说明
#项目配置文件
2.4项目初始化
2.4.1安装依赖
npminstall
2.4.2启动应用
npmstart
2.4.3打包
npmrunbuild
该命令会生成*.js、*.css、index.html等静态文件
3.开发指导
3.1开发规范
3.2开发流程示意图
2018.03
AntDesignP「o开发［帝程示意图
开始
菜单（menu.js）
路由（router.js）
贡面（routes）
◎
^flg^（models）
4,
数据请^（service）
备注：
*功能开发时推荐便用［模拟数1剧馍式
*功能联调时推荐使用［真实数阔模式
真实数据（server）
3.3开发实例
3.3.1新建一个菜单
3.3.1.1编辑菜单配置文件src/common/menu.js，在menuData里添加菜单配置，数据格式为json
格式，详细配置请参照下图
J5menujsX
constinenuData-［｛
name;菜单中文容称如：
主机运维J
is”：
、字悴團拆害称〔从圏标列表中迭择）jiD：
table\
path:
菜单路径'注意这块命名■使用英文或者字母，不要饱用中文》尽量拿菜单功能命害JO：
hostOperation^
children:
［｛
匸级来单中文名称如监控S
icon:
■字体图标名琢C飒團标列表中选援〉\
path;'二级菜单脸径（注意这块命名使用英文或者宇母，不亜使用中文，尽量莹菜单功能命名如；rnonitor）children：
［｛三绑三单
rtawie:
•三级菜单中文容称如：
主机监控J
icon：
'字体團标名称（从團标列表中选择）■>
P*h:
•三级菜单路径（注彦这块弗窖使用英文或者字母，不慕便用中文丄尽虽釜菜单功能命名如；hostMcnitai"）\｝］*
｝］，
｝］；
最新资料推荐
IconFont国际部分国毓截園红色区域为ignli性的取值范围”藍色区域也可以做取值范围”注育要去掉・.isn-・
►►
«
stepforward
stepbackward
forward
bandcward
caretright
caretieft
caretdown
.icon-
.icon-
.icon-forward
.icon-
.icon-cairetright
.icon-caretieft
.icon-cairetdown
stepforward
stepbackward
banckward
3.3.2新建一个路由配置
3.3.2.1路由配置文件src/common/router.js，在routerConfig里添加路由配置，数据格式为json
格式，详细配置请参照下图
jsrauterjsx
t■:
pLconstgetfiouterOata=（opp）=>卫
constrouterC口n*ig{
-/hostOperatlon/fl»nitar/hostMoniton':
{
component:
dynairiicWraipp@r（appJ|l[phostMonitor"]f（）«>itr（'・・/routes/HostOperatian/HostMonitar*js"））jh
//红鱼区域菲呦格式的参数为一条菜单项对应的路由”关系为一对一
HVliostOperatiort/monitor/hostHonitop'这个梦数和menu.js里的pm5属性要对应上
//['hoitMonitor']^当前菜单^im^'hostMonifr'model^]使用权限
Himport（'../routes/HostOperation/HostUcnitor.js'H弋表当前柔里项对应的页面地址
89}
81
3.3.3新建一个路由页面
页面元素文件src/routes/HostOperation/HostMonitor.js
//和'hostMonitor'建立连接，进行页面的数据交互
@onnect（（{hostMonitor,loading}）=>（{
hostMonitor,
loading:
loading.effects['hostMonitor/getMonitorList']
}））//创建form对象，固定写法
@Form.create（）
exportdefaultclassHostMonitorextendsPureComponent{
state={
modalVisible:
false,
updateModalVisible:
false,
expandForm:
false,selectedRows:
[],formValues:
{},stepFormValues:
{},
};
//渲染页面完成后执行
componentDidMount（）{
const{dispatch}=this.props;
dispatch（{
type:
'hostMonitor/getMonitorList'
}）;
}
//表格表头定义
columns
=[
{
title:
'
触发器’，
dataIndex:
'description',
},
{
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=（）=>{
const{form,dispatch}=this.props;
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（）;
const{dispatch,form}
=this.props;
form.validateFields（（err,fieldsValue）=>{
if（err）return;
constvalues={
...fieldsValue,
updatedAt:
fieldsValue.updatedAt&&fieldsValue.updatedAt.valueOf（）,
};
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
II{},
}）;
}//查询条件表单
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}constnewdata=data?
data:
{list:
[],
pagination:
{},
=this.props;
const{selectedRows,modalVisible,updateModalVisible,stepFormValues}
=this.state;
3.332页面样式文件src/routes/HostOperation/HostMonitor.less
3.3.4新建一个数据模型
新建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.1官方文档：
AngDesignPro代码地址
https:
//github.eom/ant-design/ant-design-pro
AngDesignPro文档
https:
//pro.ant.design/docs/getting-started-en
AngDesignPro在线问题讨论
https:
//github.eom/ant-design/ant-design-pro/issues
AngDesign在线文档
https:
//ant.design/
5.1.5国内镜像站点
http:
//ant-design-pro.gitee.io/index-cn
http:
//ant-design.gitee.io/docs/react/introduce-cn
5.2在线预览：
https:
//preview.pro.ant.design/#/dashboard/analysis
需要完善的功能
6.1用户登录信息
6.2动态菜单和路由
升级会员 