ant design pro入門(2)

weixin_34208283發表於2018-06-12

ant design pro入門(2)

遲遲沒有更新,很大一部分原因是我目前沒有深入研究裡面用到的dva, redux,webpack等技術。僅停留在用元件堆積頁面的程度,怕誤人子弟,想到自己遇到問題在網上尋找答案,太多的複製貼上,主要你複製貼上也就罷了,關鍵是不起作用的內容。

上節說了假資料,這次想寫一下真實的伺服器請求,獲得資料,渲染頁面等。 (例子來源於工作,有些問題沒有解決,我也會說明。希望有解決方案的人告知,多謝多謝)

傳送請求

上次講到在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前面全部替換成""
具體一點就是,你本地開啟的是 http://localhost:8000 域名,訪問的時候控制檯傳送的請求是

4020994-08a048f92cb55c1c
image

你會看到請求地址是 http://localhost:8000/jiuyue/discount/discountList
然而實際上呼叫的介面全地址是:
http://jiuyue.raykoon.com/discount/discountList
這樣就是實現的介面的代理請求,資料的獲取,頁面的渲染。

 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'),
        })
      },
    })
  };

最初的那個callback就取到了資料進行setState相關資料,處理頁面。。。

相關文章