《AntDesignPro开发手册范本》由会员分享，可在线阅读，更多相关《AntDesignPro开发手册范本（17页珍藏版）》请在金锄头文库上搜索。
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.1
2、 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 # 公共资源 f
3、avicon.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
4、 # 项目说明 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/common/router.js，在rout
5、erConfig里添加路由配置，数据格式为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, Modal, message, Badge, Di
6、vider, 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建立连接，进行页面的数据
7、交互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: ,;
8、/ 渲染页面完成后执行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,title: 所属系统,dataIndex:
9、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 = getValue(filtersArgkey);re
10、turn 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 = this.props;form.resetFields
11、();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, fo
12、rm = this.props;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) = t
