1、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、2.1 Node.js 安装配置Node.js 安装包及源码下载地址为：https:/nodejs.org/en/download/2.2 安装方式2.2.1 直接 clone git 仓库git clone -depth=1 https:/ 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 #
3、 公共资源 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 # 测试工具 RE
4、ADME.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 新建一个菜单3.3.1.1 编辑菜单配置文件 src/common/menu.js，在 menuData 里添加菜单配置，数据格式为json 格式，详细配置请参照下图3.3.2 新建一个路由配置3.3.2.1 路由配置文件 src/comm
5、on/router.js，在 routerConfig 里添加路由配置，数据格式为json 格式，详细配置请参照下图3.3.3 新建一个路由页面3.3.3.1 页面元素文件 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, Mod
6、al, 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(,);/ 和hostMon
7、itor 建立连接，进行页面的数据交互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: ,
8、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,
9、title: 所属系统,dataIndex: host_group.system,title: 网络区域,dataIndex: host_,;/ 表格 发生操作 时执行函数handleStandardTableChange = (pagination, filtersArg, sorter) = const dispatch = this.props;const formValues = this.state;const filters = Object.keys(filtersArg).reduce(obj, key) = const newObj = .obj ;newObjkey = g
10、etValue(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 = th
11、is.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.preve
12、ntDefault();const dispatch, form = this.props;form.validateFields(err, fieldsValue) = if (err) return;const values = .fieldsValue,updatedAt: fieldsValue.updatedAt this.setState(formValues: values,);dispatch(type: hostMonitor/getMonitorList,payload: values,););/显示 /隐藏模态窗口 !flag：将 flag强转为布尔类型handleMod
13、alVisible = (flag) = this.setState(modalVisible: !flag,);/显示 /隐藏模态窗口handleUpdateModalVisible = (flag, record) = this.setState(updateModalVisible: !flag,stepFormValues: record | ,);/ 查询 条件表 单renderSimpleForm() const getFieldDecorator = this.props.form;return (getFieldDecorator(hostIp)()查询重置);/选择 默认的
14、查询条件表单renderForm() return this.renderSimpleForm();/渲染 页面render() const hostMonitor:data ,loading = this.props;const newdata = data?data:list: ,pagination: ,;const selectedRows, modalVisible, updateModalVisible, stepFormValues = this.state;return (this.renderForm();3.3.3.2 页面样式文件 src/routes/HostOpera
15、tion/HostMonitor.less3.3.4 新建一个数据模型3.3.4.1 新建 model 文件：srcmodelshostMonitor.jsimport getMonitorList from /services/trans;export default / model 命名空间，唯一的namespace: hostMonitor,/ 初始化状 态 数据state: data: list: ,pagination: ,/ 定义发 送请 求的功能方法effects: *getMonitorList( payload , call, put ) const response = y
16、ield 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 新建一个模拟请求数据返回3.3.5.1 新建 service 文件：srcservicestrans.jsimport stringify from qs;impor
17、t 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: POS
18、T,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 新建一个真实请求数据返回3.3.6.1 新建 service 文件：srcservicestrans.js
19、import stringify from qs;import request from /utils/request;/* 获 取主机列表数据* param * params */这里定 义的方法是由 model调用的export async function getMonitorList(params) console.error(getMonitorList.);console.error(params);/ 这里的地址是一个真实地址，数据会返回 modelreturn request(http:/127.0.0.1:3000/get_monitor_list, method: POST
20、,body: params,);3.4 编码规范5.在线资源5.1 官方文档：5.1.1 AngDesignPro 代码地址https:/ AngDesignPro 文档https:/pro.ant.design/docs/getting-started-cn5.1.3 AngDesignPro 在线问题讨论https:/ AngDesign 在线文档https:/ant.design/5.1.5 国内镜像站点http:/ant-design-pro.gitee.io/index-cnhttp:/ant-design.gitee.io/docs/react/introduce-cn5.2 在线预览：https:/preview.pro.ant.design/#/dashboard/analysis6.需要完善的功能6.1 用户登录信息6.2 动态菜单和路由.
