实战 ant design pro 中的坑

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;