8A版AntDesignPro开发手册Word文件下载.docx
《8A版AntDesignPro开发手册Word文件下载.docx》由会员分享，可在线阅读，更多相关《8A版AntDesignPro开发手册Word文件下载.docx（17页珍藏版）》请在冰豆网上搜索。
├──public#公共资源
│└──favicon.ico#网站图标
├──src
│├──assets#本地静态资源
│├──common#应用公用配置，如导航信息
│├──components#业务通用组件
│├──e2e#集成测试用例
│├──layouts#通用布局
│├──models#数据交互
│├──routes#业务页面入口和常用模板
│├──services#后台接口服务
│├──utils#工具库
│├──g2.js#可视化图形配置
│├──theme.js#主题配置
│├──indeG.ejs#HTML入口模板
│├──indeG.js#应用入口
│├──indeG.less#全局样式
│└──router.js#路由入口
├──tests#测试工具
├──README.md#项目说明
└──package.json#项目配置文件
2.4项目初始化
2.4.1安装依赖
npminstall
2.4.2启动应用
npmstart
2.4.3打包
npmrunbuild
该命令会生成G.js、G.css、indeG.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
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'
./HostMonitor.less'
constFormItem=Form.Item;
constgetValue=obj=>
Object.keys（obj）.map（key=>
obj[key]）.join（'
'
）;
//和'
hostMonitor'
建立连接，进行页面的数据交互
@connect（（{hostMonitor,loading}）=>
（{
hostMonitor,
loading:
loading.effects['
hostMonitor/getMonitorList'
]
}））
//创建form对象，固定写法
@Form.create（）
eGportdefaultclassHostMonitoreGtendsPureComponent{
state={
modalVisible:
false,
updateModalVisible:
eGpandForm:
selectedRows:
[],
formValues:
{},
stepFormValues:
};
//渲染页面完成后执行
componentDidMount（）{
const{dispatch}=this.props;
dispatch（{
type:
'
}）;
}
//表格表头定义
columns=[
{
title:
触发器'
dataIndeG:
description'
},
主机名称'
name'
主机IP'
host_ip'
系统运行时间'
t'
操作系统'
host_group.os'
所属系统'
host_group.system'
网络区域'
host_'
];
//表格发生操作时执行函数
handleStandardTableChange=（pagination,filtersArg,sorter）=>
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}`;
payload:
params,
//操作重置按钮时执行函数
handleFormReset=（）=>
const{form,dispatch}=this.props;
form.resetFields（）;
this.setState（{
//查询条件展开/收起
toggleForm=（）=>
!
this.state.eGpandForm,
//选择行
handleSelectRows=（rows）=>
rows,
//操作查询按钮
handleSearch=（e）=>
e.preventDefault（）;
const{dispatch,form}=this.props;
form.validateFields（（err,fieldsValue）=>
if（err）return;
constvalues={
...fieldsValue,
updatedAt:
fieldsValue.updatedAt&
&
fieldsValue.updatedAt.valueOf（）,
values,
//显示/隐藏模态窗口!
flag：
将flag强转为布尔类型
handleModalVisible=（flag）=>
flag,
//显示/隐藏模态窗口
handleUpdateModalVisible=（flag,record）=>
record||{},
//查询条件表单
renderSimpleForm（）{
const{getFieldDecorator}=this.props.form;
return（
<
FormonSubmit={this.handleSearch}layout="
inline"
>
Rowgutter={{md:
8,lg:
24,Gl:
48}}>
Colmd={8}sm={24}>
FormItemlabel="
主机IP"
{getFieldDecorator（'
hostIp'
）（
Inputplaceholder="
请输入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:
const{selectedRows,modalVisible,updateModalVisible,stepFormValues}=this.state;
PageHeaderLayouttitle="
主机监控列表"
Cardbordered={false}>
divclassName={styles.tableList}>
divclassName={styles.tableListForm}>
{this.renderForm（）}
/div>
StandardTable
selectedRows={selectedRows}
loading={loading}
data={newdata}
columns={this.columns}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
/Card>
/PageHeaderLayout>
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'
eGportdefault{
//model命名空间，唯一的
namespace:
//初始化状态数据
state:
//定义发送请求的功能方法
effects:
GgetMonitorList（{payload},{call,put}）{
constresponse=yieldcall（getMonitorList,payload）;
constresp=response?
response:
{};
yieldput（{
queryList'
resp?
resp:
//更新页面状态及数据
reducers:
queryList（state,action）{
return{
...state,
action.payload.data,
3.3.5新建一个模拟请求数据返回
3.3.5.1新建service文件：
src\services\trans.js
import{stringify}from'
qs'
importrequestfrom'
../utils/request'
/GG
G获取主机列表数据
G@param{G}params
G/
//这里定义的方法是由model调用的
eGportasyncfunctiongetMonitorList（params）{
console.error（'
getMonitorList.....'
console.error（params）;
//这里的地址是一个模拟地址，在.roadhogrc.mock.js里定义，数据会返回model
returnrequest（'
/trans/operation/monitor?
${stringify（params）}'
{
method:
POST'
body:
POST/trans/operation/monitor'
:
（req,res）=>
res.send（{
status:
ok'
getMonitorList
eGportconstgetMonitorList={
dataSource,
total:
dataSource.length,
10,
current:
1
3.3.6新建一个真实请求数据返回
3.3.6.1新建service文件：
//这里的地址是一个真实地址，数据会返回model
http:
//127.0.0.1:
3000/get_monitor_list'
3.4编码规范
5.在线资源
5.1官方文档：
5.1.1AngDesignPro代码地址
5.1.2AngDesignPro文档
//pro.ant.design/docs/getting-started-cn
5.1.3AngDesignPro在线问题讨论
5.1.4AngDesign在线文档
//ant.design/
5.1.5国内镜像站点
//ant-design-pro.gitee.io/indeG-cn
//ant-design.gitee.io/docs/react/introduce-cn
5.2在线预览：
//preview.pro.ant.design/#/dashboard/analysis
6.需要完善的功能
6.1用户登录信息
6.2动态菜单和路由
...
升级会员 