《antdesignpro开发手册》由会员分享，可在线阅读，更多相关《antdesignpro开发手册（16页珍藏版）》请在金锄头文库上搜索。
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.12.
2、1 Node.jsNode.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 # 本地模拟数据
3、 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
4、# 测试工具 README.md # 项目说明 package.json # 项目配置文件2.4 项目初始化2.4.12.4.1 安装依赖安装依赖npm install2.4.22.4.2 启动应用启动应用npm start2.4.32.4.3 打包打包npm run build该命令会生成 *.js、*.css、index.html 等静态文件3.开发指导3.13.1 开发规范开发规范3.23.2 开发流程示意图开发流程示意图3.33.3 开发实例开发实例3.3.13.3.1 新建一个菜单新建一个菜单3.3.1.1 编辑编辑菜单配置文件菜单配置文件 src/common/menu.js，在，
5、在 menuData 里添加菜单配置，数据格式为里添加菜单配置，数据格式为json 格式，详细配置请参照下图格式，详细配置请参照下图3.3.23.3.2 新建一个路由配置新建一个路由配置3.3.2.1 路由配置文件路由配置文件 src/common/router.js，在，在 routerConfig 里添加路由配置，数据格式为里添加路由配置，数据格式为json 格式，详细配置请参照下图格式，详细配置请参照下图3.3.33.3.3 新建一个路由页面新建一个路由页面3.3.3.1 页面元素文件页面元素文件 src/routes/HostOperation/HostMonitor.jsimport
6、 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
7、 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 )/ 创建 fo
8、rm 对象，固定写法Form.create() export default class HostMonitor extends PureComponent state = modalVisible: false, updateModalVisible: false, expandForm: false, selectedRows: , formValues: , stepFormValues: , ;/ 渲染页面完成后执行componentDidMount() const dispatch = this.props; dispatch( type: hostMonitor/getMonito
9、rList, ); /表格表头定义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_, ;/ 表格发生操作时执行函数handleStan
10、dardTableChange = (pagination, filtersArg, sorter) = const dispatch = this.props; 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, pag
11、eSize: pagination.pageSize, ; if (sorter.field) params.sorter = $sorter.field_$sorter.order; dispatch( type: hostMonitor/getMonitorList, payload: params, ); / 操作重置按钮时执行函数handleFormReset = () = const form, dispatch = this.props; form.resetFields(); this.setState( formValues: , ); dispatch( type: host
12、Monitor/getMonitorList, payload: , ); / 查询条件展开/收起toggleForm = () = this.setState( expandForm: !this.state.expandForm, ); / 选择行handleSelectRows = (rows) = this.setState( selectedRows: rows, ); / 操作查询按钮handleSearch = (e) = e.preventDefault();const dispatch, form = this.props;form.validateFields(err, f
13、ieldsValue) = if (err) return; const values = .fieldsValue, updatedAt: fieldsValue.updatedAt this.setState( formValues: values, );dispatch( type: hostMonitor/getMonitorList, payload: values, );); /显示/隐藏模态窗口 !flag：将 flag 强转为布尔类型handleModalVisible = (flag) = this.setState( modalVisible: !flag, ); /显示/
14、隐藏模态窗口handleUpdateModalVisible = (flag, record) = this.setState( updateModalVisible: !flag, stepFormValues: record | , ); / 查询条件表单renderSimpleForm() const getFieldDecorator = this.props.form; return (getFieldDecorator(hostIp)()查询重置); /选择默认的查询条件表单renderForm() return this.renderSimpleForm(); /渲染页面render() const hostMonitor:data ,loading = this.props;const newdata = data?data: list: , pagination: , ; const selectedRows, modalVisible, updateModalVisible, s
