AntDesignPro开发手册Word文档格式.docx
- 文档编号:22375861
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:9
- 大小:125.65KB
AntDesignPro开发手册Word文档格式.docx
《AntDesignPro开发手册Word文档格式.docx》由会员分享,可在线阅读,更多相关《AntDesignPro开发手册Word文档格式.docx(9页珍藏版)》请在冰豆网上搜索。
✧antdReact组件
2.开发环境
安装配置
安装包及源码下载地址为:
安装方式
直接clonegit仓库
gitclone--depth=1ant-design/my-project
cdmy-project
使用集成化的命令行工具ant-design-pro-cli。
npminstallant-design-pro-cli-g#安装脚手架
mkdirmy-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,
/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:
'
POST/trans/operation/monitor'
:
(req,res)=>
({
status:
ok'
getMonitorList
},
exportconstgetMonitorList={
list:
dataSource,
pagination:
total:
10,
current:
1
getMonitorList
新建一个真实请求数据返回
线资源
官方文档:
AngDesignPro代码地址
AngDesignPro文档
AngDesignPro在线问题讨论
AngDesign在线文档
国内镜像站点
在线预览:
需要完善的功能
用户登录信息
动态菜单和路由
...
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AntDesignPro 开发 手册