1.替换mock数据:

1.将:.roadhogrc.mock.js 中的代理模式替换

当不使用代理的时候就会将所有 /api/的链接换成 http://localhost:8080/

export default noProxy ? {'GET /api/
':'http://localhost:8080/'} : delay(proxy, 1000);

2.启动:

如果你是win系统

npm run start:no-proxy

其他系统没试

更新 2.x

   proxy: {
'/task/job/': {
target: 'http://test.text:8090',
changeOrigin: true,
pathRewrite: { '^/task/': '' }, //这里是匹配进行替换 这样会直接请求接口http://test.text:8090/job/xxxxx
},
},

2.dva实践

1.model

比如model层里有goods.js文件【当然goods.js 必须在路由中设定 否则是无法访问到的】

路径: /common/router.js

 '/goods/list': {
component: dynamicWrapper(app, ['goods'], () => import('../routes/Goods/List')),
},

路径: /model/goods.js

//从service 层中获取得到  【etGoodslist,getCategoryAll,deleteGoods】
import { getGoodslist,getCategoryAll,deleteGoods} from '../services/api'; export default {
namespace: 'goods',
state: {
data: {
list: [],
pagination: {},
},
},
effects: {
//查询商品列表 //前端请求api
*list({ payload }, { call, put }) {
const response = yield call(getGoodslist, payload);
yield put({
type: 'goodslist',
payload: response,
});
},
//树形栏目
*category({payload},{call,put}){
const response = yield call(getCategoryAll, payload);
yield put({
type: 'goodsCategory',
payload: response,
});
},
//删除商品
*remove({payload},{call,put}){
const response = yield call(deleteGoods, payload);
yield put({
type: 'deletegoods',
payload: response,
});
}
}, reducers: {
//store层 返回给components
goodslist(state, action) {
return {
...state,
data: action.payload,
};
},
goodsCategory(state, action){
return {
...state,
treeData: action.payload,
};
},
deletegoods(state, action){
return {
...state,
data: action.payload,
};
}
},
};

service

路径 :/service/app.js

export async function getGoodslist(params) {
return request(`/api/goods/list?${stringify(params)}`);
}
export async function getCategoryAll(params) {
return request(`/api/category/all?${stringify(params)}`);
}
//删除商品
export async function deleteGoods(params){
return request(`/api/goods/delete?${stringify(params)}`);
}

components 更新数据

const treeData = this.props.goods.treeData;

实战 ant design pro 中的坑的更多相关文章

  1. Ant Design Pro中Transfer穿梭框的实际用法(与后端交互)

    Ant Design Pro中Transfer穿梭框的实际用法(与后端交互) 该控件的属性以及属性的作用在ADP的官方文档中都有介绍,但没有讲如何与后端交互,本文旨在讲解该控件与后端的交互. Ant ...

  2. 把antd的组件源码搬到Ant Design Pro中使用

    把组件源码搬过来后,样式死活不生效,经过1天的努力,有说less-loader的,有说webpack配置,还有说babel配置的,最后,我自己找到了方法 就是在global.less中使用@impor ...

  3. 【后台管理系统】—— Ant Design Pro 项目爬坑(一)

    1.表单rule中可以分对象处理不同规则 <FormItem label="类型名称" {...formLayout}> { form.getFieldDecorato ...

  4. ant design pro (十五)advanced 使用 API 文档工具

    一.概述 原文地址:https://pro.ant.design/docs/api-doc-cn 在日常开发中,往往是前后端分离的,这个时候约定好一套接口标准,前后端各自独立开发,就不会被对方的技术难 ...

  5. ant design pro (十一)advanced Mock 和联调

    一.概述 原文地址:https://pro.ant.design/docs/mock-api-cn Mock 数据是前端开发过程中必不可少的一环,是分离前后端开发的关键链路.通过预先跟服务器端约定好的 ...

  6. ant design pro (八)构建和发布

    一.概述 原文地址:https://pro.ant.design/docs/deploy-cn 二.详细 2.1.构建 当项目开发完毕,只需要运行一行命令就可以打包你的应用: npm run buil ...

  7. ant design pro (七)和服务端进行交互

    一.概述 原文地址:https://pro.ant.design/docs/server-cn Ant Design Pro 是一套基于 React 技术栈的单页面应用,我们提供的是前端代码和本地模拟 ...

  8. ant design pro(二)布局

    一.概述 参看地址:https://pro.ant.design/docs/layout-cn 其实在上述地址ant-design上已经有详细介绍,本文知识简述概要. 页面整体布局是一个产品最外层的框 ...

  9. Ant Design Pro快速入门

    在上一篇文章中,我们介绍了如何构建一个Ant Design Pro的环境. 同时讲解了如何启动服务并查看前端页面功能. 在本文中,我们将简单讲解如何在Ant Design Pro框架下实现自己的业务功 ...

随机推荐

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 列运算

    jQuery EasyUI 数据网格 - 列运算 在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列.一个运算列通常包含一些从一个或多个其他列运算的值. 首先,创建一个可 ...

  2. Failed to process import candidates for configuration class [com.simple.....]

    主要原因: 是因为自己定制的starter在打包时(package)用了spring-boot-maven-plugin,即在你的定制starter工程的pom.xml中有如下配置: <buil ...

  3. zabbix3.4.7实操总结二

    一,Zabbix Web操作深入 1.1 Zabbix Web下的主机和模版以及监控项的添加方式 (1)创建一个模版 我们所有的功能几乎都是在模版中定义的 我们再点进新创建的模版查看 模版里几乎可以设 ...

  4. JQ 向上查找指定 同辈元素 找到后返回

    由于JQ 只有 prev() 和 prevAll() prev()只能找一个 prevAll()把所有的都给找了 我想要的是: 在同辈元素中向上找,直到找到 我指定的元素 后,返回他. 所以自己写了个 ...

  5. windows 安装nvm步骤(shi'yongnvm-windows管理node版本):

    瞎几把前言:mac上可以用n来管理node版本,私以为n很好用.家里的win7台式机一直没有安装过任何管理工具,今天来给家里电脑安装一下nvw-windows,一个用于windows系统的node版本 ...

  6. MyEclipse中点击部署项目无响应(Deploy MyEclipse J2EE Project to Server)

    大部分情况下,只要找到当前的工作空间,删除其中一个文件就可以. 这个文件在Myeclipse工作.metadata\.plugins\org.eclipse.core.runtime\.setting ...

  7. A JSON example

    heroes.html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  8. HDU5616 天平能否称出物体重量问题 01背包变形或者折半搜索

    //hdu5616 void solve1(){dp[0]=1;for(int i=1;i<=n;i++){for(int j=INF;j>=val[i];j--){dp[j]|=(dp[ ...

  9. JavaScript的组成 | DOM/BOM

    往期回顾 在上一期的<JavaScript的组成 | 核心-ECMAScript >☜里,我们有说到JavaScript 是由三大部分组成,分别是:核心ECMAScript.文档对象模型- ...

  10. noj二分查找

    二分查找: 要么左边,要么右边,哈哈哈哈 描述 给定一个单调递增的整数序列,问某个整数是否在序列中.   输入 第一行为一个整数n,表示序列中整数的个数:第二行为n(n不超过10000)个整数:第三行 ...