AntDesignPro开发手册Word文档格式.docx
- 文档编号:7827341
- 上传时间:2023-05-09
- 格式:DOCX
- 页数:14
- 大小:34.58KB
AntDesignPro开发手册Word文档格式.docx
《AntDesignPro开发手册Word文档格式.docx》由会员分享,可在线阅读,更多相关《AntDesignPro开发手册Word文档格式.docx(14页珍藏版)》请在冰点文库上搜索。
pronew#创建一个新项目
2.3目录结构
ock
ublic
1avicon.ico
rc
Issets
Iommon
Iomponents
I2e
Iayouts
Iodels
Ioutes
Iervices
Itils
I——2.js
Iheme.js
Index.ejs
Index.js
IndexJess
1outer.js
ests
EADME.mdackage.json
#本地模拟数据
#公共资源
#网站图标
#本地静态资源
#应用公用配置,如导航信息
#业务通用组件
#集成测试用例
#通用布局
#数据交互
#业务页面入口和常用模板
#后台接口服务
#工具库
#可视化图形配置
#主题配置
#HTML入口模板
#应用入口
#全局样式
#路由入口
#测试工具
#项目说明
#项目配置文件
2.4项目初始化
2.4.1安装依赖
npminstall
2.4.2启动应用
npmstart
243打包
npmrunbuild
该命令会生成*.js、*.css、index.html等静态文件
3.开发指导
3.1开发规范
3.2开发流程示意图
AntDesignP「o开发流程示意图
2018.03
开始
菜单
r1
斗、
路由(router.js)
贡面(routes)
◎
1
k
7
6
数据请求(service)
备注:
*功能开发时推荐便用[模拟数据]馍式
*功能联调时推荐使用[真实裁掲]模式
3.3开发实例
嘆拟韧居(RIX附
真实数J^(server)
3.3.1新建一个菜单
3.3.1.1编辑菜单配置文件src/common/menu.js,在menuData里添加菜单配置,数据格式为json
格式,详细配置请参照下图
JSmenujsX
4constmenuData=[{
name:
—菜单中文茗祢如:
主机运维-
icon:
團拆害称〔从團标列表中选table'
path:
菜单路径'
注意这块命名■使用英文或者字母,不要便用中文,匡量拿菜单功能命容JO:
host^eration)
children:
[{
9name:
"
二级家单中文名琲如:
监控J
16icon:
*字体鲫名称I从團标列表中选择)・.
path;
'
二级菜单路径(■注竜这块命名使用英文或者宇母,不婪使用中文,尽蚩莹棗单功能命名如:
monitor)\
12children:
[:
{//三级菜单
.三级菜单中文容称如:
主机监控J
14icon:
.字体画歸称(从團标列表中选择〉
patht「三级菜单踣径(注彦遠块命名快用英文或者字母,不葵决用中文菜单功能命名如;
hostMonltar)\
}]>
17>
]>
懾}];
IconFont图标
19
部分图换載图厂冃区域为iconH性的取值范围,蓝色区域也可以做取值范围’注育要去掉・.isn-・
M
►►
«
stepforward
stepbackward
forward
banckward
caretright
caredeft
caretdown
.iconstepforward
.jeonstepbackward
.icon-forward
.icon-banckward
.icon-caretright
.icon-caretieft
.icon-caretdown
3.3.2新建一个路由配置
3.3.2.1路由配置文件src/common/router.js,在routerConfig里添加路由配置,数据格式为json
jsrouterjsx
*D
71;
■-nu-r.ronitgetficuterOata=(app)=>
卫
72constrauterConfig{
MVhostOp&
ration/monitor/hestMonitor'
:
{
component:
dynaiiieWrapper(app>
['
hostMoritorF],()>
(J./routBs/HDEtOpgLmticin/HcjwtMonitor.jsf})j
>
76//红鱼区域:
格式的野数为一条菜单项对应的路由,关系为一对一
77H'
/liostOperation/monitor/hostHonitop'
j^个醪数^menu.js里的path厲■性要对应上
78//[qhostMonitor'
]f^当前菜单'
hastMonitor'
rnodel的使用权限
79//import('
../routes/HostOperation/HastMcnitor,js'
)代表当前菜单项对应的页面地址
80}
3.3.3新建一个路由页面
3.3.3.1页面元素文件src/routes/HostOperation/HostMonitor.js
title:
'
主机名称’,
dataIndex:
name'
},
{
主机IP'
host_ip'
系统运行时间’,
t'
操作系统’,
host_group.os'
所属系统’,
host_group.system'
网络区域’,
host_group.net'
}];
//表格发生操作时执行函数
handleStandardTableChange=(pagination,filtersArg,sorter)=>
const{dispatch}=this.props;
const{formValues}=this.state;
constfilters=Object.keys(filtersArg).reduce((obj,key)=>
{constnewObj={...obj};
newObj[key]=getValue(filtersArg[key]);
returnnewObj;
},{});
varparams={
currentPage:
pagination.current,
pageSize:
pagination.pageSize,
};
if(sorter.field){
params.sorter='
${sorter.field}_${sorter.order}'
;
}
dispatch({
type:
hostMonitor/getMonitorList'
payload:
params,
});
//操作重置按钮时执行函数handleFormReset=()=>
=this.props;
const{form,dispatch}form.resetFields();
this.setState({formValues:
{},});
dispatch({type:
{},
}//查询条件展开/收起
toggleForm=()=>
this.setState({
expandForm:
!
this.state.expandForm,
}//选择行
handleSelectRows=(rows)=>
{this.setState({
selectedRows:
rows,
}//操作查询按钮
handleSearch=(e)=>
e.preventDefault();
form.validateFields((err,fieldsValue)=>
{if(err)return;
constvalues={
&
fieldsValue.updatedAt.
valueOf(),
...fieldsValue,
updatedAt:
fieldsValue.updatedAt
this.setState({formValues:
values,});
values,
//显示/隐藏模态窗口!
!
flag:
将flag强转为布尔类型handleModalVisible=(flag)=>
modalVisible:
flag,
});
//显示/隐藏模态窗口
handleUpdateModalVisible=(flag,record)=>
this.setState({updateModalVisible:
stepFormValues:
record||{},
}//查询条件表单
renderSimpleForm(){
const{getFieldDecorator}=this.props.form;
return(
<
FormonSubmit={this.handleSearch}layout="
inline"
>
Rowgutter={{md:
8,lg:
24,xl:
48}}>
Colmd={8}sm={24}>
Formltemlabel="
主机IP"
{getFieldDecorator('
hostIp'
)(
lnputplaceholder="
请输入IP地址”/>
)}
/FormItem>
/Col>
spanclassName={styles.submitButtons}>
Buttontype="
primary"
htmlType="
submit"
查询<
/Button>
Buttonstyle={{marginLeft:
8}}onClick={this.handleFormReset
/span>
/Row>
}>
重置<
/Form>
);
//选择默认的查询条件表单
renderForm(){
returnthis.renderSimpleForm}//渲染页面
render(){
const{hostMonitor:
{data},loading}=this.props;
constnewdata=data?
data:
list:
[],
pagination:
3.332页面样式文件src/routes/HostOperation/HostMonitor.less
3.3.4新建一个数据模型
3.3.4.1新建model文件:
src\models\hostMonitor.js
3.3.5新建一个模拟请求数据返回
3.3.5.1新建service文件:
src\services\trans.js
3.3.6新建一个真实请求数据返回
3.3.6.1新建service文件:
3.4编码规范
5.在线资源
5.1官方文档:
5.1.1AngDesignPro代码地址
https:
//github.eom/ant-design/ant-design-pro
5.1.2AngDesignPro文档
//pro.ant.design/docs/getting-started-en
5.1.3AngDesignPro在线问题讨论
//github.eom/ant-design/ant-design-pro/issues
5.1.4AngDesign在线文档
//ant.design/
5.1.5国内镜像站点
http:
//ant-design-pro.gitee.io/index-cn
//ant-design.gitee.io/does/reaet/introduee-en
5.2在线预览:
//preview.pro.ant.design/#/dashboard/analysis
6.需要完善的功能
6.1用户登录信息
6.2动态菜单和路由
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AntDesignPro 开发 手册