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-project cd my-project 2.2.2 使用集成化的命令行工具 ant-design-pro-cli 。npm install ant-design-pro-cli -g # 安装脚手架mkdir my-project cd my-project pro new # 创建一个新项目2.3 目录结构 mock # 本地模拟数据 p
3、ublic # 公共资源 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 #
4、测试工具 README.md # 项目说明 package.json # 项目配置文件2.4 项目初始化2.4.1 安装依赖npm install 2.4.2 启动应用npm start 2.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
5、 路由配置文件 src/common/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, InputN
6、umber, 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 (o
7、bj). map( key = objkey). join ( , ); / 和 hostMonitor 建立连接，进行页面的数据交互connect ( hostMonitor , loading ) = ( hostMonitor, loading: loading.effects hostMonitor/getMonitorList ) / 创建 form 对象，固定写法Form.create () export default class HostMonitor extends PureComponent state = modalVisible: false , updateModal
8、Visible: false , expandForm: false , selectedRows: , formValues: , stepFormValues: , ; / 渲染页面完成后执行componentDidMount () const dispatch = this .props; dispatch ( type: hostMonitor/getMonitorList , ); / 表格表头定义columns = title: 触发器 , dataIndex: description , , title: 主机名称 , dataIndex: name , , title: 主机
9、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; cons
10、t 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.fi
11、eld _$ 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
12、 = () = 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 ; const values = . fieldsValue, updatedAt: fieldsValue.updatedAt this . setState ( formValues: values, ); dispatch ( type: hostMonitor/getMonitorList , payload: values, );
