AntDesignPro开发手册精编版

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安装包及源码下载地址为：https:///en/download/2.2安装方式2.2.1直接clone git 仓库git clone --depth=1 https:///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-projectcd 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 新建一个菜单3.3.1.1编辑菜单配置文件src/common/menu.js，在menuData里添加菜单配置，数据格式为json 格式，详细配置请参照下图3.3.2 新建一个路由配置3.3.2.1路由配置文件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, 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=> obj[key]).join(',');// 和'hostMonitor'建立连接，进行页面的数据交互@connect(({ hostMonitor,loading }) => ({hostMonitor,loading: loading.effects['hostMonitor/getMonitorList'] }))// 创建form对象，固定写法@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/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 } =this.props;const { formValues } =this.state;const filters =Object.keys(filtersArg).reduce((obj, key) => { const newObj = { ...obj };newObj[key] =getValue(filtersArg[key]);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 } =this.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.preventDefault();const { dispatch, form } =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) => {this.setState({updateModalVisible: !!flag,stepFormValues: record || {},});}// 查询条件表单renderSimpleForm() {const { getFieldDecorator } =this.props.form;return (<Form onSubmit={this.handleSearch}layout="inline"><Row gutter={{ md: 8, lg: 24, xl: 48 }}><Col md={8}sm={24}><FormItem label="主机IP">{getFieldDecorator('hostIp')(<Input placeholder="请输入IP地址" />)}</FormItem></Col><Col md={8}sm={24}><span className={styles.submitButtons}><Button type="primary"htmlType="submit">查询</Button><Button style={{ marginLeft: 8 }}onClick={this.handleFormReset}>重置</Button></span></Col></Row></Form>);}//选择默认的查询条件表单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 (<PageHeaderLayout title="主机监控列表"><Card bordered={false}><div className={styles.tableList}><div className={styles.tableListForm}>{this.renderForm()}</div><StandardTableselectedRows={selectedRows}loading={loading}data={newdata}columns={this.columns}onSelectRow={this.handleSelectRows}onChange={this.handleStandardTableChange}/></div></Card></PageHeaderLayout>);}}3.3.3.2 页面样式文件src/routes/HostOperation/HostMonitor.less3.3.4 新建一个数据模型3.3.4.1新建model文件：src\models\hostMonitor.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 新建一个模拟请求数据返回3.3.5.1新建service文件：src\services\trans.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里定义，数据会返回model return request('/trans/operation/monitor?${stringify(params)}', { method: 'POST',}'POST /trans/operation/monitor': (req, res) => {res.send({status: 'ok',data: getMonitorList});},export const getMonitorList = {list: dataSource,pagination: {total: dataSource.length,pageSize: 10,current: 1}}export default {getMonitorList};3.3.6 新建一个真实请求数据返回3.3.6.1新建service文件：src\services\trans.jsimport { 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',}3.4 编码规范5.在线资源5.1官方文档：5.1.1 AngDesignPro 代码地址https:///ant-design/ant-design-pro5.1.2 AngDesignPro 文档https://pro.ant.design/docs/getting-started-cn5.1.3 AngDesignPro 在线问题讨论https:///ant-design/ant-design-pro/issues 5.1.4 AngDesign 在线文档https://ant.design/5.1.5国内镜像站点http://ant-design-pro.gitee.io/index-cnhttp://ant-design.gitee.io/docs/react/introduce-cn 5.2在线预览：https://preview.pro.ant.design/#/dashboard/analysis6.需要完善的功能6.1 用户登录信息6.2 动态菜单和路由...。