AntDesignPro开发手册Word下载.docx
- 文档编号:18957405
- 上传时间:2023-01-02
- 格式:DOCX
- 页数:15
- 大小:128.99KB
AntDesignPro开发手册Word下载.docx
《AntDesignPro开发手册Word下载.docx》由会员分享,可在线阅读,更多相关《AntDesignPro开发手册Word下载.docx(15页珍藏版)》请在冰豆网上搜索。
├──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安装依赖
npminstall
2.4.2启动应用
npmstart
2.4.3打包
npmrunbuild
该命令会生成*.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
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()
exportdefaultclassHostMonitorextendsPureComponent{
state={
modalVisible:
false,
updateModalVisible:
expandForm:
selectedRows:
[],
formValues:
{},
stepFormValues:
};
//渲染页面完成后执行
componentDidMount(){
const{dispatch}=this.props;
dispatch({
type:
'
});
}
//表格表头定义
columns=[
{
title:
触发器'
dataIndex:
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.expandForm,
//选择行
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,xl:
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'
exportdefault{
//model命名空间,唯一的
namespace:
//初始化状态数据
state:
//定义发送请求的功能方法
effects:
*getMonitorList({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'
/**
*获取主机列表数据
*@param{*}params
*/
//这里定义的方法是由model调用的
exportasyncfunctiongetMonitorList(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
exportconstgetMonitorList={
dataSource,
total:
dataSource.length,
10,
current:
1
getMonitorList
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/index-cn
//ant-design.gitee.io/docs/react/introduce-cn
5.2在线预览:
//preview.pro.ant.design/#/dashboard/analysis
6.需要完善的功能
6.1用户登录信息
6.2动态菜单和路由
...
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AntDesignPro 开发 手册