ant design pro 初识
发送请求
上次讲到在api.js中发送请求,模拟了假数据,这次讲一下调用真实接口进行请求并渲染页面。
先完整的过一遍请求吧
首先view层发送请求例如下面的代码:
componentDidMount() {
this.fetchListCallback();
} fetchListCallback = () => {
const { limit, offset } = this.state;
const { dispatch } = this.props;
dispatch({
type: 'brandDiscountManage/fetchList',
payload: {
limit,
offset,
},
callback: (response)=>{
this.setState({
tableData: common(response.data.rows, 'discountId'),
})
},
})
};
这里调用了'brandDiscountManage'命名空间下的 fetchList 方法。
另外需要在路由层配置一下,引用的文件。
'/brandDiscountManage': {
component: dynamicWrapper(app, ['brandDiscountManage'], () => import('../routes/brand/DiscountManage/index')),
},
如上代码显示,这里用到了brandDiscountManage.js。其中的文件内容如下
(effects里面就是用到的一些处理请求方法)
import { responseErrorMsg } from '../assets/common'
import { getDiscountList } from '../services/api'; export default { namespace:'brandDiscountManage', state:{ }, effects: {
*fetchList({payload, callback}, {call}) {
const response = yield call(getDiscountList, payload)
if(responseErrorMsg(response) && callback ){
callback(response);
}
},
}, reducers: { },
}
这样在看上面的代码就知道,页面一进来就调用了fetchList方法。这个方法里面调用了yield call (函数名, payload参数)这个方法(暂时不太懂实现原理,一笔带过),并把响应值response 返回。然后判断有没有错误,有的话 responseErrorMsg 这个函数里面做了处理,没有错误的话并且存在callback就会调用callback,并把response作为参数传送。
接着看getDiscountList这个函数函数里面做了什么,这个函数存在于'../services/api.js'文件夹里面
看代码
export async function getDiscountList(params) {
return request('/jiuyue/discount/discountList', {
method: 'POST',
body: {
sort: 'create_dts',
order: 'DESC',
...params,
},
});
}
这里调用的是真实借口,话说真实的借口应该是域名+地址,这里面只有地址,别急,这里面用到了代理。实际上,在刚开始做的时候我直接把网址放到这个request后面,发现上个公司的测试环境的请求地址http:....是可以访问的,然后当我把现在公司的开发环境的全部地址放上去时候报错了,找不到这个借口,我不知道怎么回事。最终解决方案是用到了上面说的代理。ant design pro用到了webpack环境可以配置代理。
具体是在 .webpackrc.js 文件中,
具体代码如下
const path = require('path'); export default {
entry: 'src/index.js',
extraBabelPlugins: [
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],
],
env: {
//开发环境
development: {
extraBabelPlugins: ['dva-hmr'],
},
// build 时的生产环境
production: {
'extraBabelPlugins': [
'transform-runtime',
'transform-decorators-legacy',
['import', { 'libraryName': 'antd', 'style': true }],
],
},
},
//设置代理请求
proxy: {
'/jiuyue': {
"target": "http://jiuyue.raykoon.com",
"changeOrigin": true,
"pathRewrite": { "^/jiuyue" : "" }
}
},
alias: {
components: path.resolve(__dirname, 'src/components/'),
},
ignoreMomentLocale: true,
theme: './src/theme.js',
html: {
template: './src/index.ejs',
},
//
disableDynamicImport: true,
//如果你的静态资源域名和应用域名不同(例如独立的 cdn 地址),你需要在 .webpackrc 文件里用 publicPath 对生产环境的静态路径进行配置。
publicPath: '/',
hash: true,
};
上面就是我的源文件,相信也没有什么值得屏蔽的,代理主要用的 proxy 这个属性的配置。
如果你刚才细心的话就会发现我刚才request后面的借口前面有一个 /jiueyu 这个前缀,在这个代理这里做了处理,它的大致意思就是说遇到带有 /jiuyue的网址,就作处理,域名重定向到 http://jiuyue.raykoon.com 这个域名下,并且把 /jiuyue前面全部替换成""
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 ...
随机推荐
- Sqli-labs less 13
Less-13 本关我们输入username:admin' Password: (随便输) 进行测试 可以看到报错了,错误为: You have an error in your SQL syntax ...
- Linux下屏幕截图
Ubuntu使用教程——截屏 http://www.linuxidc.com/Linux/2014-02/96827.htm Ubuntu下使用(xfce截屏)及GNOME下一个好用的截屏工具 htt ...
- 【BZOJ 4570】【SCOI 2016】妖怪
http://www.lydsy.com/JudgeOnline/problem.php?id=4570 对于每个妖怪的两个值,看成二位平面上的一个点的横纵坐标(x,y). 因为只关心a/b,所以设经 ...
- [BZOJ5248][九省联考2018]一双木棋(连通性DP,对抗搜索)
5248: [2018多省省队联测]一双木棋 Time Limit: 20 Sec Memory Limit: 512 MBSubmit: 43 Solved: 34[Submit][Status ...
- 【图论】Popular Cows
[POJ2186]Popular Cows Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 34752 Accepted: ...
- 【线段树】Gym - 101201J - Shopping
题意:n个数,m次询问,每次给你一个询问v,l,r,问你v%a[l]%a[l+1]%...%a[r]是多少. a%b,结果要么不变,要么至少缩小到a的一半,于是用线段树,每次询问当前区间最靠左侧的小于 ...
- 最小生成树(Prime算法)
最小生成树一·Prim算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 最近,小Hi很喜欢玩的一款游戏模拟城市开放出了新Mod,在这个Mod中,玩家可以拥有不止一个城 ...
- Describe in brief Databases and SQL Server Databases Architecture.
Databases- A database is a structured collection of data.- Database can be thought as simple data fi ...
- pca主成份分析方法
1.应用pca的前提 应用pca的前提是,连续信号具有相关性.相关性是什么,是冗余.就是要利用pca去除冗余. 2.pca的定义 pca是一种去除随机变量间相关性的线性变换.是一种常用的多元数据分析方 ...
- unity lightmap
indirect light /shadow /ao light probe for dynamic 或者细小琐碎的物体 ========================== unity2018.3 ...