初探ant design pro
1.增加路由子页面&配置菜单
因为ant design pro采取的是umi路由配置,所以只要在对应的文件夹下新建相关的文件夹以及文件,它会自动解析。按照如下的步骤做即可
PS.如果想要给菜单配置icon,ant design pro有一些通用的icon图标,可以在上面配置路由的时候在每个路由处都加上 icon:'iconname' 即可,这是最简单的方法。
配置了路由以后再给它配置相关的语言预设即可,在这里我只配置了中文和英文。
这样页面上的菜单就会有相应的配置了。
2.使用mock模拟后台数据调用
在service里写相应的请求接口的逻辑,这里的request是ant design pro里自定义的接口请求方法,封装了fetch方法。
然后在相应的组件内建立models,触发action获得数据(这里用的是redux的思想)
完整的代码如下:
import { queryComment } from '@/services/geographic'; export default {
namespace: 'geographic', //命名空间,这里与组件里连接到模块的connect方法里的参数对应 state: {
comment:[],
isLoading: false,
},
//actions
effects: {
*fetchComment(_, { call, put }) {
//yield 关键字用来暂停和恢复一个生成器函数((function* 或遗留的生成器函数)。
yield put({
type: 'changeLoading',
payload: true,
});
const response = yield call(queryComment); //这里是请求到的数据
yield put({
type: 'setComment',
payload: Array.isArray(response) ? response : [],
});
yield put({
type: 'changeLoading',
payload: false,
});
},
},
//reducers指定了应用状态的变化如何响应actions并发送到store
reducers: {
setComment(state, action) {
return {
...state,
comment: action.payload,
};
},
changeLoading(state, action) {
return {
...state,
isLoading: action.payload,
};
},
},
};
在相应的组件中取相应的数据展示页面
import React, { Component } from 'react';
import {connect} from 'dva';
import {Table} from 'antd'; //取对应的模块
@connect(({geographic , loading }) => (
{
geographic ,
isLoading:loading.effects['geographic/fetchComment'],
}
)) export default class CommentManage extends Component{ componentDidMount(){
const {dispatch}=this.props;
//触发dispatch方法来触发action从而更改状态
dispatch({
type:'geographic/fetchComment'
})
}
handleChange=(current,pageSize)=>{ render(){ const columns = [ {
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '所评文章ID',
dataIndex: 'article_id',
key: 'article_id', }, {
title: '评论内容',
dataIndex: 'content',
key: 'content',
},{
title:'时间',
dataIndex:'create_by',
key:'create_by'
}];
const { isLoading } = this.props;
const {geographic:{comment}}=this.props;
const dataSource=[...comment]; // console.log(dataSource)
return (
<div>
<Table
bordered
dataSource={dataSource}
columns={columns}
size="small" /> </div>
)
}
}
然后页面上就能展示相应的数据了
在table表格里使用自定义的pagination,并且给每条数据加一个序号,详细代码如下:
//初始状态
state={
currentPage:1,
pageSize:16
} //页码跳转的回调函数
onCurrentChange=(current,pageSize)=>{ const {currentPage}=this.state;
//setState是异步执行的,给他加一个0的延时,可以立马执行
setTimeout(()=>{this.setState({currentPage:current});},0); }
//pageSize改变的回调
onShowSizeChange=(current,size)=>{
const {currentPage,pageSize}=this.state;
setTimeout(()=>{this.setState({currentPage:current,pageSize:size});},0);
} //render
const pagination={
pageSize:this.state.pageSize,
total:articles.length,
showSizeChanger:true,
pageSizeOptions:['8','10','16','32','48'],
onChange:this.onCurrentChange,
onShowSizeChange:this.onShowSizeChange,
showTotal:(total,range)=>`共 ${total} 条` } //columns里配置一行序号
{
title: '#',
key:'index',
// render:(text,record,index)=>`${index+1}`,这个方法当点击下一页时,其序号不连续,想用连续的需要用下面的方法
render(text,record,index){
return(
<div>
<span>{(currentPage-1)*pageSize+index+1}</span>
</div>
)
} }, //相应的table
<Table
bordered
dataSource={articles}
columns={columns}
size="small"
pagination={pagination}
/>
<Button>提交修改</Button>
</div>
初探ant design pro的更多相关文章
- Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验 最近需要讲AntD Pro项目(以 ...
- 阿里开源项目之Ant Design Pro
本篇文章主要包含的内容有三个方面. 第一.Ant Design Pro简介; 第二.Ant Design Pro能做什么; 第三.初步使用; 我相信通过这三个方面的讲解能让你大概知道Ant Desig ...
- ant design pro (十五)advanced 使用 API 文档工具
一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...
- ant design pro (十四)advanced 使用 CLI 工具
一.概述 原文地址:https://pro.ant.design/docs/cli-cn 为了更好以及高效的开发效率,我们提供了配套的 ant-design-pro-cli 工具. pro cli 提 ...
- ant design pro (十三)advanced 错误处理
一.概述 原文地址:https://pro.ant.design/docs/error-cn 二.详细 2.1.页面级报错 2.1.1.应用场景 路由直接引导到报错页面,比如你输入的网址没有匹配到任何 ...
- ant design pro (十二)advanced UI 测试
一.概述 原文地址:https://pro.ant.design/docs/ui-test-cn UI 测试是项目研发流程中的重要一环,有效的测试用例可以梳理业务需求,保证研发的质量和进度,让工程师可 ...
- ant design pro (十一)advanced Mock 和联调
一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...
- ant design pro (十)advanced 图表
一.概述 原文地址:https://pro.ant.design/docs/graph-cn Ant Design Pro 提供了由设计师精心设计抽象的图表类型,是在 BizCharts 图表库基础上 ...
- ant design pro (八)构建和发布
一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...
随机推荐
- codevs 2102 石子归并2
传送门 2102 石子归并 2 时间限制: 10 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 在一个园形操场的四周摆放N堆石子,现要将 ...
- win7 第一次装 mysql-5.7.16-winx64 ,不知道root 密码,该如何处理?
转载请注明出处:http://blog.csdn.net/qq_26093511/article/details/52851811 ERROR 1045 (28000): Access denied ...
- Jquery获取web窗体关闭事件,排除刷新页面
在js脚本里全局定义一个 var r=true;若是刷新的话则把r=false; $(window).unload(function () { if (r) { //这里面证明用户不是点的F5刷新 执 ...
- Java: JavaMail 初试(一)
前言:以前的我,很喜欢写东西,写一写所想所见所闻所感,但是工作之后,总不能写出让自己满意的文章,突发奇想,能否利用写博客的时机,将其写成类似散文似的博文呢?哈哈... 邮件功能尝试:作为一个小菜鸟,对 ...
- CF-805D
D. Minimum number of steps time limit per test 1 second memory limit per test 256 megabytes input st ...
- 01.课程介绍 & 02.最小可行化产品MVP
01.课程介绍 02.最小可行化产品MVP 产品开发过程 最小化和可用之间找到一个平衡点
- [教程心得] Flash AIR 调用exe/bat且可以传参
Flash AIR 如何调用exe/bat?并且有些情况下需要传参,如何传参呢? 看下面例子: cmd传参打开系统软键盘(参考http://bbs.9ria.com/thread-181265-1-1 ...
- POJ 3262 Protecting the Flowers 贪心(性价比)
Protecting the Flowers Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 7812 Accepted: ...
- lightoj1064 【DP求方案】
题意: n个相同的骰子,问你掷出>=x点数的可能性: 思路: dp[i][j]代表前 i 个骰子掷出 j 点数的方案数; 然后Σdp[n][x]-dp[n][6*n]就好了 卧槽,一开始想的是拆 ...
- hdu5861【线段树】
题意: 有n个点,每个两两之间有一条路,给出每条路开放的花费,每条路只能打开关闭一次,然后m天里给出一个区间代表这条路必须在该天开放,求每天需要的花费. 思路: 这是一题纯粹用线段树搞的题. 我们可以 ...