AntDesignPro開發(fā)手冊資料

AntDesignPro開發(fā)手冊

修訂歷史記錄

1

曰期版本說明作者

目錄

2

1.前言

3

L1目的

讓不熟悉AntDesignPro的開發(fā)人員快速掌握開發(fā)方式

1.2概述

AntDesignPro是一個前端設(shè)計解決方案,由螞蟻金服體驗技術(shù)部出品/維護。

核心技術(shù)組成：

<ES2015+JavaScript語言的新標(biāo)準(zhǔn)

0React用于構(gòu)建用戶界面的JAVASCRIPT庫

.dva是基于（redux（狀態(tài)管理）+react-router（路由庫）+redux-saga（異

步中間件）等）的一層輕量封裝

個g2一套基于可視化編碼的圖形語法

令antdReact組件

2.開發(fā)環(huán)境

2.1Node.js安裝配置

Node.js安裝包及源碼下載地址為:/download/

2.2安裝方式

2.2.1直接clonegit倉庫

4

gitdone??depth=l-design/ant?design?pro.gitmy?project

cdmy-project

使用集成化的命令行工具

2.2.2ant-design-pro-clie

npminstallant-design-pro-cli-g#安裝腳手架

mkdirmy-project

cdmy-project

pronew#創(chuàng)建一個新項目

23目錄結(jié)構(gòu)

|—mock#本地模擬數(shù)據(jù)

|—public#公共資源

I1—favicon.ico#網(wǎng)站圖標(biāo)

1—src

I|—assets#本地靜態(tài)資源

||—common#應(yīng)用公用配置，如導(dǎo)航信息

||—components#業(yè)務(wù)通用組件

||e2e#集成測試用例

I|—layouts#通用布局

||—models#數(shù)據(jù)交互

|routes井業(yè)務(wù)頁面入口和常用模板

I|—services#后臺接口服務(wù)

I|—utils#工具庫

11—g2js#可視化圖形配置

I|—theme.js#主題配置

||—index.ejs#HTML入口模板

||index.js#應(yīng)用入口

I|—index.less#全局樣式

I1—router.js#路由入口

|—tests#測試工具

|—README.md#項目說明

1package.json#項目配置文件

2.4項目初始化

5

2.4.1安裝依賴

npminstall

2.22啟動應(yīng)用

npmstar:

2.4.3打包

npmrunbuild

該命令會生成*Js、*.cssxindex.html等靜態(tài)文件

3.開發(fā)指導(dǎo)

3.1開發(fā)規(guī)范

3.2開發(fā)流程示意圖

6

3.3開發(fā)實例

3.3.1新建一個菜單

7

編輯菜單配置文件src/common/menu.js,在menuData里添加菜單配置，數(shù)據(jù)格式為json

格式，詳細配置請參照下圖

JSmenujsx

4constmenuData[{

naiie:?一級菜單中文名稱如：主機運維二

6icon:?字體圖標(biāo)名稱（從圖標(biāo)列表中選怪〉如：table、

path:?一級菜單路徑（注意這塊命名使用英文或者字母，不要使用中文，盡量望菜單功育隘名如：hostoperation）

8children:[{/上與■.電

name:?二級菜單中文名稱如：監(jiān)控「

icon:?字體圖標(biāo)名稱《從圖標(biāo)列表中選拄）*,

path:'二線菜單路徑（注意這塊命名使用英文或者字母，不要使用中文，盡量京菜單功能命名如：monitor）

12children:[（"二爽芽外

na?e:?三級菜單中文名稱如：主機監(jiān)控二

14icon:?字體圖標(biāo)名稱《從圖標(biāo)列表中選捺）:

path:?三級菜單路徑（注意這塊命名使用英文或者字母，不要使用中文，盡量拿菜單功能命名$□：hostMonitor）二

16）],

17}],

）]；

19

IconFont圖標(biāo)部分圖標(biāo)鼠圖紅色區(qū)域為近?！肝菪缘娜≈捣秶?，鑒色區(qū)域也可以做取值范圍，注意要去掉二匕。2

????

stepforwardstepbackwardforwardbanckwardcaretrightcaretleftcaretdown|

.ton-.icon-.Icon-fonvard.Icon-.ton-caretright.icon-caretleft.ton-Ccretdown

stepforwardstepbackwardbanckward

3.3.2新建一個路由配置

路由配置文件src/common/router.js,在routerConfig里添加路由配置，數(shù)據(jù)格式為json

格式，詳細配置請參照下圖

JSrouterjsX

/O

71exportconstgetRouterData-(app)=>(

72constrouterConfig{

73'/hostOperation/monitor/hostMonitor*:{

component:dynamicWrapper(app,['hostMonitor'],()=>('../routes/HostOperation/HostMonitor.js'))?

75____________________________________________________

76//紅色區(qū)域json格式的變數(shù)為一條菜單項對應(yīng)的路由，關(guān)系為一對一

77//hostOperation/conitor/hostHonitor'這個參數(shù)和menu.js里的path屬性要對應(yīng)上

78//「hostMonitor')代表當(dāng)前某單項擁有對.hostMonitor，model的使用權(quán)限

79//import(*../rout6S/Host0pGration/HostMonitor.js')代表當(dāng)前菜單項對應(yīng)的頁面地址

80}

81

8

3.3.3新建一個路由頁面

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

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

import{connect}from'dva';

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

InputNumber,DatePicker,Modal,iressage,Badge,Divider,Steps,Radio}'antd";

StandardTableor/components/StandardTable';

importPagcHcadcrLoyout「r。”'.../layouts/PagcHcadcrLayout';

importstylesfrom'./HostMonitor.less';

constFormItemForm.Item;

constgetValueobj=>Object,keys(obj).map(/?ey=>obj[key]).join

@connect(({hostMonitor,Loading))=>({

hostMonitor,

loading:loading.effects['hostMonitor/getMonitorList']

}))

@Form.create()

exportdefaultcLassHostMonitorextendsPureComponent{

state={

modalVisible:false,

updateModalVisible:false,

expandForm:false,

selectedRows:[],

formValues:{},

stepFormValues:{},

}；

|〃渲染頁面完成后執(zhí)行

componentDidMount(){

const{dispatch}=this.props;

dispatch({

type:'hostMonitor/getMonitorList",

})j

}

columns=[

{

title:，觸發(fā)器'，

9

datalncex:description.

title:'主機名稱

datalndex:name.

},

title:'主機工P',

datalndex:hostip.

｝，

title:'系統(tǒng)運行時間

datalncex:t.

},

title:'操作系統(tǒng)

datalndex:hostgroup.os.

},

title:'所屬系統(tǒng)；

dotalndcx:hostgroup.system.

｝，

title:‘網(wǎng)絡(luò)區(qū)域

datalncex:hostgroup.net,

〃表格發(fā)生操作時執(zhí)行函數(shù)

handleStandardTableChange(pagination,fiLtersArg,sorter)=>{

const{dispatch}this.props;

const{formValues}=this.state;

const-filters=Object.keys(filtersArg).reduce((obj,key)=>{

constrewObj{...obj};

newObj[key]=getValue(filtersArg[key]);

newObj;

},(})；

varparams

currentPage:pagination.current,

pageSize:pagination.pageSize,

}；

if(sorter.field){

params.sorter'sorter.field_$；sorter.order';

}

dispatch({

type:'hostMonitor/getMonitorList',

10

payload:params,

})；

)

〃操作重置按鈕時執(zhí)行函數(shù)

handleFormReset=()=>{

const{form,dispatch}this.props;

form.resetFields();

this.setState({

formValues:{},

})；

dispatch({

type:'hostMonitor/getMonitorList',

payload:{},

})；

)

〃查詢條件展開/收起

toggleForm()=>{

this.setState({

cxpandForm:this.statc.cxpandForm,

})；

}

〃選擇行

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.updatedAtfieldsValue.updatedAt.valueOf(),

}；

this.setState({

formValues:values,

11

dispatch({

type:'hostMonitor/getMonitorList',

payload:values,

))T

})；

}

handleModalVisible_=^(fLag)=>{

this.setState({

modalVisible:flag,

})；

)

〃顯示/隱藏模態(tài)窗口

handlelpdateModalVisible={fLag,record)=>{

this.setState({

updateModalVisible:flag,

stepFormValues:record||{},

})；

〃查詢條件表單__________________________________________________________________________________________

renderSimpleForm(){

const{getFieldDecorator}=ps.form;

return(

<FormcnSubmit={this.handlesearch}layout="inline">

<ROMgutter={{md:8,1g:24,xl:48}}>

<CoLmd=8}sm={24；>

<FormItemlabel」'主機工P”>

{getFieldDecorator('hostlp')(

<Inputplaceholder”請輸入工P地址”/>

)}_______________________________________________________________________________________________

</FormItem>

</CoL>

<CoLmd={8}sm={24}>

<spanclassName={styles.submitButtons}>

<Buttontype"primary"htmlType"submit"〉查詢</8utto〃>

<Buttor>style{marginLeft:8}onClick{this.handleFormReset>重置</8utton>

</span>

</CoL>

</Row>

</Form>

)r

}

12

//選擇默認(rèn)的查詢條件也單

renderForm(){

returnthis.renderSimpleForm();

}

〃渲染頁而

render(){

const{hostMonitor:(data},loading}二ps;

constrewdata=data?data:{

list:[],

pagination:{},

}；

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

return(

<PageHeaderLayouttitle="主機監(jiān)控列表“)

<Cardtordered-{false>

<i\classNamestyles.tableList>

<i.vclassNamestyles.tableListForm>

this.renderForm()

</div>

<StandcrdTabLe

selectedRowsselectedRows

loading={loading}

data={newdata)

columnsthis.columns

onSelectRow{this.handleSelectRous

onChange{this.handleStandardTableChange

/>

</div>

"Card)

</PageReaderLayout>

)；

}

}

頁面樣式文件src/routes/HostOperation/HostMonitor.less

13

3.3.4新建一個數(shù)據(jù)模型

新建model文件：src\models\hostMonitor.js

import{getMonitorList}rom'../services/trans,;

exportdefault{

//model命名至何，唯二的

namespace:'hostMonitor',

//初始化狀態(tài)數(shù)據(jù)

state:{

data:{

list:[],

pagination:{},

},

},

//名義發(fā)送請求的功能方隨

effects:{

getMonitorList({payLoad},{caLL,put}){

constresponseyioidcall(getMcnitorList,payload);

constrespresponseresponse{};

yieldput({

type:'queryList',

payload:respresp{},

})；

}

}，

//更新頁面狀態(tài)及數(shù)據(jù)

reducers:{

queryList(state,action){

return{

…state,

data:action.payload.data,

}；

},

},

}；

3.3.5新建一個模擬請求數(shù)據(jù)返回

14

新建service文件：src\services\trans.js

import{stringify}-rom'qs';

importrequestfrom'../utils/request,;

/**

*獲取主機列表數(shù)據(jù)

@parcm{*}params

*/-

〃這里定義的方法是由model調(diào)用的

exportasyncfunctiongetMonitorList(par'aws){

console.error('getMonitorList');

consoLe.error(params);

//這里的地址是一個模擬地址，在.roadhogrc.mock.js里定義，數(shù)據(jù)會返回model

returnrequest('/trans/operation/monitor?${stringify(params)}',{

method:'POST',

body:params,

})；

}

'POST/trans/operation/monitor':(req,res)=>{

res.send({

status:'ok',

data:getMonitorList

})；

},

expor':constgetMonitorList={

list:dataSource,

pagination: