AntDesignPro开发手册.docx

AntDesignPro开发手册.docx

《AntDesignPro开发手册.docx》由会员分享，可在线阅读，更多相关《AntDesignPro开发手册.docx（17页珍藏版）》请在冰豆网上搜索。

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:

//nodejs.org/en/download/

2.2安装方式

2.2.1直接clonegit仓库

gitclone--depth=1my-project

cdmy-project

2.2.2使用集成化的命令行工具ant-design-pro-cli。

npminstallant-design-pro-cli-g#安装脚手架

mkdirmy-project

cdmy-project

pronew#创建一个新项目

2.3目录结构

├──mock#本地模拟数据

├──public#公共资源

│└──favicon.ico#网站图标

├──src

│├──assets#本地静态资源

│├──common#应用公用配置，如导航信息

│├──components#业务通用组件

│├──e2e#集成测试用例

│├──layouts#通用布局

│├──models#数据交互

│├──routes#业务页面入口和常用模板

│├──services#后台接口服务

│├──utils#工具库

│├──g2.js#可视化图形配置

│├──theme.js#主题配置

│├──index.ejs#HTML入口模板

│├──index.js#应用入口

│├──index.less#全局样式

│└──router.js#路由入口

├──tests#测试工具

├──README.md#项目说明

└──package.json#项目配置文件

2.4项目初始化

2.4.1安装依赖

npminstall

2.4.2启动应用

npmstart

2.4.3打包

npmrunbuild

该命令会生成*.js、*.css、index.html等静态文件

3.开发指导

3.1开发规范

3.2开发流程示意图

3.3开发实例

3.3.1新建一个菜单

3.3.1.1编辑菜单配置文件src/common/menu.js，在menuData里添加菜单配置，数据格式为json格式，详细配置请参照下图

3.3.2新建一个路由配置

3.3.2.1路由配置文件src/common/router.js，在routerConfig里添加路由配置，数据格式为json格式，详细配置请参照下图

3.3.3新建一个路由页面

3.3.3.1页面元素文件src/routes/HostOperation/HostMonitor.js

importReact,{PureComponent,Fragment}from'react';

import{connect}from'dva';

import{Row,Col,Card,Form,Input,Select,Icon,Button,Dropdown,Menu,

InputNumber,DatePicker,Modal,message,Badge,Divider,Steps,Radio}from'antd';

importStandardTablefrom'../../components/StandardTable';

importPageHeaderLayoutfrom'../../layouts/PageHeaderLayout';

importstylesfrom'./HostMonitor.less';

constFormItem=Form.Item;

constgetValue=obj=>Object.keys（obj）.map（key=>obj[key]）.join（','）;

//和'hostMonitor'建立连接，进行页面的数据交互

@connect（（{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_',

}

];

//表格发生操作时执行函数

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||{},

}）;

}

//查询条件表单

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:

{},

};

const{selectedRows,modalVisible,updateModalVisible,stepFormValues}=this.state;

return（

{this.renderForm（）}