AntDesignPro开发⼿册
AntDesignPro开发⼿册
修订历史记录
⽬录
1.前⾔
⽬的
让不熟悉Ant Design Pro 的开发⼈员快速掌握开发⽅式
概述
Ant Design Pro是⼀个前端设计解决⽅案，由蚂蚁⾦服体验技术部出品/维护。核⼼技术组成：
ES2015+ JavaScript语⾔的新标准
React ⽤于构建⽤户界⾯的JAVASCRIPT 库
dva 是基于(redux（状态管理）+ react-router（路由库）+ redux-saga（异步中间件）等)的⼀层轻量封装
g2 ⼀套基于可视化编码的图形语法
antd React组件
2.开发环境
安装配置
安装包及源码下载地址为：
安装⽅式
直接clone git 仓库
git clone --depth=1 ant-design/ my-project
cd my-project
使⽤集成化的命令⾏⼯具ant-design-pro-cli。
npm install ant-design-pro-cli -g #安装脚⼿架mkdir my-project cd my-project
pro new # 创建⼀个新项⽬
⽬录结构
├──mock # 本地模拟数据
├──public # 公共资源
│└──# ⽹站图标
├──src
│├──assets # 本地静态资源
│├──common # 应⽤公⽤配置，如导航信息
│├──components # 业务通⽤组件
│├──e2e # 集成测试⽤例
│├──layouts # 通⽤布局
│├──models # 数据交互
│├──routes # 业务页⾯⼊⼝和常⽤模板
│├──services # 后台接⼝服务
│├──utils # ⼯具库
│├──# 可视化图形配置
│├──# 主题配置
│├──# HTML ⼊⼝模板
│├──# 应⽤⼊⼝
│├──# 全局样式
│└──# 路由⼊⼝
├──tests # 测试⼯具
├──# 项⽬说明
└──# 项⽬配置⽂件
项⽬初始化
安装依赖
npm install
启动应⽤
npm start
打包
npm run build
该命令会⽣成*.js、*.css、等静态⽂件
3.开发指导
开发规范
开发流程⽰意图
开发实例
新建⼀个菜单
编辑菜单配置⽂件src/common/，在menuData⾥添加菜单配置，数据格式为json格式，详细配置请参照下图
新建⼀个路由配置
路由配置⽂件src/common/，在routerConfig⾥添加路由配置，数据格式为json格式，详细配置请参照下图
新建⼀个路由页⾯
页⾯元素⽂件src/routes/HostOperation/
import React, { 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'; import StandardTable from'../../components/StandardTable';
import PageHeaderLayout from'../../layouts/PageHeaderLayout';
import styles from'./';
const FormItem = ;
const getValue=obj=> (obj).map(key=> obj[key]).join(',');
educe((obj, key) => {
const newObj = { ...obj };
newObj[key] =getValue(filtersArg[key]);
return newObj;
}, {});
var params = {
currentPage: ,
pageSize: ,
};
if {
=`${}_${}`;
}
dispatch({
type: 'hostMonitor/getMonitorList',
payload: params,
});
react router源码
}
.fieldsValue,
updatedAt: && values,
});
dispatch({
type: 'hostMonitor/getMonitorList',
payload: values,
});
});
}
/services/trans';
export default {
.state,
data: 新建⼀个模拟请求数据返回
新建service⽂件：src\services\
import { stringify } from'qs';
import request from'../utils/request';
/**
* 获取主机列表数据
* @param{*}params
*/
...');
(params);
定义，数据会返回model
return request('/trans/operation/monitor?${stringify(params)}', { method: 'POST', body: params,
});
}
'POST /trans/operation/monitor': (req, res) => {
({
status: 'ok',
data: getMonitorList
});
},
export const getMonitorList = {
list: dataSource,
pagination: {
total: ,
pageSize: 10,

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。