AntDesignPro开发手册.doc

AntDesignPro开发手册修订历史记录日期版本说明作者目录1. 前言1.1目的让不熟悉Ant Design Pro 的开发人员快速掌握开发方式1.2概述Ant Design Pro是一个前端设计解决方案，由蚂蚁金服体验技术部出品/维护。核心技术组成： ES2015+ JavaScript语言的新标准 React 用于构建用户界面的 JAVASCRIPT 库 dva 是基于(redux（状态管理） + react-router（路由库） + redux-saga（异步中间件） 等)的一层轻量封装 g2 一套基于可视化编码的图形语法 antd React组件2. 开发环境2.1 Node.js 安装配置Node.js安装包及源码下载地址为：/en/download/2.2安装方式2.2.1直接 clone git 仓库git clone -depth=1 /ant-design/ant-design-pro.git my-projectcd my-project2.2.2使用集成化的命令行工具 ant-design-pro-cli。npm install ant-design-pro-cli -g #安装脚手架mkdir my-project cd my-projectpro new # 创建一个新项目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安装依赖npm install2.4.2启动应用npm start2.4.3打包npm run build该命令会生成 *.js、*.css、index.html 等静态文件3. 开发指导3.1开发规范3.2 开发流程示意图3.3 开发实例3.3.1 新建一个菜单编辑菜单配置文件src/common/menu.js，在menuData里添加菜单配置，数据格式为json格式，详细配置请参照下图3.3.2 新建一个路由配置路由配置文件src/common/router.js，在routerConfig里添加路由配置，数据格式为json格式，详细配置请参照下图3.3.3 新建一个路由页面页面元素文件 src/routes/HostOperation/HostMonitor.jsimport 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 ./HostMonitor.less;const FormItem = Form.Item;const getValue = obj = Object.keys(obj).map(key = objkey).join(,);/ 和hostMonitor建立连接，进行页面的数据交互connect( hostMonitor,loading ) = (hostMonitor,loading: loading.effectshostMonitor/getMonitorList)/ 创建form对象，固定写法Form.create()export default class HostMonitor extends PureComponent state = modalVisible: false,updateModalVisible: false,expandForm: false,selectedRows: ,formValues: ,stepFormValues: ,;/ 渲染页面完成后执行componentDidMount() const dispatch = ps;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 = ps;const formValues = this.state;const filters = Object.keys(filtersArg).reduce(obj, key) = const newObj = .obj ;newObjkey = getValue(filtersArgkey);return newObj;, );var params = 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 = ps;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 = ps;form.validateFields(err, fieldsValue) = if (err) return;const values = .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 = ps.form;return (getFieldDecorator(hostIp)()查询重置);/选择默认的查询条件表单renderForm() return this.renderSimpleForm();/渲染页面render() const hostMonitor:data ,loading = ps;const newdata = data?data:list: ,pagination: ,;const selectedRows, modalVisible, updateModalVisible, stepFormValues = this.state;return (this.renderForm(); 页面样式文件 src/routes/HostOperation/HostMonitor.less3.3.4 新建一个数据模型新建model文件：srcmodelshostMonitor.jsimport getMonitorList from ./services/trans;export default / model命名空间，唯一的namespace: hostMonitor,/ 初始化状态数据state: data: list: ,pagination: ,/ 定义发送请求的功能方法effects: *getMonitorList( payload , call, put ) const response = yield call(getMonitorList, payload);const resp = response?response:;yield put(type: queryList,payload: resp ? resp : ,);,/ 更新页面状态及数据reducers: queryList(state, action) return .state,data: action.payload.data,;,;3.3.5 新建一个模拟请求数据返回新建service文件：srcservicestrans.jsimport stringify from qs;import request from ./utils/request;/* 获取主机列表数据* param * params */这里定义的方法是由model调用的export async function getMonitorList(params) console.error(getMonitorList.);console.error(params);/ 这里的地址是一个模拟地址，在.roadhogrc.mock.js里定义，数据会返回modelreturn request(/trans/operation/monitor?$stringify(params), method: POST,body: params,);POST /trans/operation/monitor: (req, res) = res.send(status: ok,data: getMonitorList);,export const getMonitorList = list: dataSource,pagination: total: dataSource.length,pageSize: 10,current: 1export default getMonitorList;3.3.6 新建一个真实请求数据返回新建service文件：srcservicestrans.jsimport stringify from qs;import request from ./utils/request;/* 获取主机列表数据* param * params */这里定义的方法是由model调用的export async function getMonitorList(params) co