AntDesignPro开发手册.docx
- 文档编号:9239774
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:9
- 大小:125.65KB
AntDesignPro开发手册.docx
《AntDesignPro开发手册.docx》由会员分享,可在线阅读,更多相关《AntDesignPro开发手册.docx(9页珍藏版)》请在冰豆网上搜索。
AntDesignPro开发手册
AntDesignPro开发手册
修订历史记录
日期
版本
说明
作者
1.前言
目的
让不熟悉AntDesignPro的开发人员快速掌握开发方式
概述
AntDesignPro是一个前端设计解决方案,由蚂蚁金服体验技术部出品/维护。
核心技术组成:
✧ES2015+JavaScript语言的新标准
✧React用于构建用户界面的JAVASCRIPT库
✧dva是基于(redux(状态管理)+react-router(路由库)+redux-saga(异步中间件)等)的一层轻量封装
✧g2一套基于可视化编码的图形语法
✧antdReact组件
2.开发环境
安装配置
安装包及源码下载地址为:
安装方式
直接clonegit仓库
gitclone--depth=1ant-design/my-project
cdmy-project
使用集成化的命令行工具ant-design-pro-cli。
npminstallant-design-pro-cli-g#安装脚手架
mkdirmy-project
cdmy-project
pronew#创建一个新项目
目录结构
├──mock#本地模拟数据
├──public#公共资源
│└──#网站图标
├──src
│├──assets#本地静态资源
│├──common#应用公用配置,如导航信息
│├──components#业务通用组件
│├──e2e#集成测试用例
│├──layouts#通用布局
│├──models#数据交互
│├──routes#业务页面入口和常用模板
│├──services#后台接口服务
│├──utils#工具库
│├──#可视化图形配置
│├──#主题配置
│├──#HTML入口模板
│├──#应用入口
│├──#全局样式
│└──#路由入口
├──tests#测试工具
├──#项目说明
└──#项目配置文件
项目初始化
安装依赖
npminstall
启动应用
npmstart
打包
npmrunbuild
该命令会生成*.js、*.css、等静态文件
3.开发指导
开发规范
开发流程示意图
开发实例
新建一个菜单
编辑菜单配置文件src/common/,在menuData里添加菜单配置,数据格式为json格式,详细配置请参照下图
新建一个路由配置
路由配置文件src/common/,在routerConfig里添加路由配置,数据格式为json格式,详细配置请参照下图
新建一个路由页面
页面元素文件src/routes/HostOperation/
importReact,{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';
importStandardTablefrom'../../components/StandardTable';
importPageHeaderLayoutfrom'../../layouts/PageHeaderLayout';
importstylesfrom'./';
constFormItem=;
constgetValue=obj=>(obj).map(key=>obj[key]).join(',');
educe((obj,key)=>{
constnewObj={...obj};
newObj[key]=getValue(filtersArg[key]);
returnnewObj;
},{});
varparams={
currentPage:
pageSize:
};
if{
=`${}_${}`;
}
dispatch({
type:
'hostMonitor/getMonitorList',
payload:
params,
});
}
.fieldsValue,
updatedAt:
&&values,
});
dispatch({
type:
'hostMonitor/getMonitorList',
payload:
values,
});
});
}
/services/trans';
exportdefault{
.state,
data:
新建一个模拟请求数据返回
新建service文件:
src\services\
import{stringify}from'qs';
importrequestfrom'../utils/request';
/**
*获取主机列表数据
*@param{*}params
*/
...');
(params);
定义,数据会返回model
returnrequest('/trans/operation/monitor?
${stringify(params)}',{
method:
'POST',
body:
params,
});
}
'POST/trans/operation/monitor':
(req,res)=>{
({
status:
'ok',
data:
getMonitorList
});
},
exportconstgetMonitorList={
list:
dataSource,
pagination:
{
total:
pageSize:
10,
current:
1
}
}
exportdefault{
getMonitorList
};
新建一个真实请求数据返回
新建service文件:
src\services\
import{stringify}from'qs';
importrequestfrom'../utils/request';
/**
*获取主机列表数据
*@param{*}params
*/
...');
(params);
线资源
官方文档:
AngDesignPro代码地址
AngDesignPro文档
AngDesignPro在线问题讨论
AngDesign在线文档
国内镜像站点
在线预览:
需要完善的功能
用户登录信息
动态菜单和路由
...
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AntDesignPro 开发 手册
![提示](https://static.bdocx.com/images/bang_tan.gif)