實戰 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;