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 nodejs org en download 2 2 安装方式 2 2 1 直接 clone git 仓库 git clone depth 1 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 本地模拟数据 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 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 路由配置文件 src common router js 在 routerConfig 里添加路由配置 数据格式为 json 格式 详细配置请参照下图 3 3 3 新建一个路由页面 3 3 3 1 页面元素文件 src routes HostOperation HostMonitor js import 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 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 getFieldDecorator hostIp 查询 重置 选择 默认的 查询条件表单 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 HostOperation HostMonitor less 3 3 4 新建一个数据模型 3 3 4 1 新建 model 文件 src models hostMonitor js import 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 js import 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 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 1 export default getMonitorList 3 3 6 新建一个真实请求数据返回 3 3 6 1 新建 service 文件 src services trans js import stringify from qs import request from utils request 获 取主机列表数据 param params 这里定 义的方法是由 model调用的 export async function getMonitorList params console error getMonitorList console error params 这里的地址是一个真实地址 数据会返回 model return request http 127 0 0 1 3000 get monitor list method POST body params 3 4 编码规范 5 在线资源 5 1 官方文档 5 1 1 AngDesignPro 代码地址 5 1 2 AngDesignPro 文档 https pro ant design docs getting started cn 5 1 3 AngDesignPro 在线问题讨论 5 1 4 AngDesign 在线文档 https ant design 5 1 5 国内镜像站点 http ant design pro gitee io index cn http ant design gitee io docs react introduce cn 5 2 在线预览 https preview pro ant design dashboard analysis 6 需要完善的功能 6 1 用户登录信息 6 2 动态菜单和路由