ant design pro 腳手架使用總結

一，目錄簡介

二，重點介紹下這幾個資料夾

（1）modal資料夾下的index資料夾，require.context方法是遍歷其父資料夾下面的所有字子檔案，匯出物件

（2）工具包下面的request.js資料夾，有些地方需要特別的設定下，注意訊息頭要按照自己的需求修改，匯出形式可以使用stringify，但是在頭部需要import { stringify } from 'qs';

三，新建頁面

這個直接在common下面的router裡面新增即可，如下：

四，元件的傳值使用和傳統的react一樣，這裡省略了，

五，介面封裝

六，介面呼叫和傳值，頁面的渲染

//  這是modal層程式碼
import { message } from 'antd/lib/index';
import { createnotice, findbycondition, updatenotice, deletenotice } from '../services/api';
import { replaceUrl } from '../utils/utils';

export default {
  namespace: 'notice',

  state: {  // 請求的資料放到state裡面
    noticeList: {
      // 公告資訊
      list: [],
      pagination: {},
    },
    noticeObj: {},
  },

  effects: {
    *fetch({ payload }, { call, put }) {
      // 查詢公告
      const response = yield call(findbycondition, payload);
      let data = {};
      if (response && response.code === '0') {
        if (response.data) {
          data = {
            list: response.data.items,
            pagination: {
              current: response.data.currentPage,
              pageSize: response.data.pageSize,
              total: response.data.totalCount,
              totalPage: response.data.totalPage,
            },
          };
          yield put({ 
            type: 'save',
            payload: data,
          });
        }
      } }
      }
    },
    *add({ payload, callback }, { call }) {
      // 新增公告
      const response = yield call(createnotice, payload);
      if (response && response.code === '0') {
        message.success(response.msg);
        if (callback) callback();
      }
    }，
  },

  reducers: {
    save(state, action) {
      return {
        ...state,
        noticeList: action.payload,
      };
    },
  },
};
//  下面是頁面 ，頁面拿到值之後如何渲染
//  高階方法 將需要的modal連結起來
@connect(({ notice, loading }) => ({
  notice,
  loading: loading.models.notice,
}))
...
// 介面呼叫
 componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'notice/fetch',
      payload: this.params,
    });
  }
//  在刪除和增加成功之後需要重新重新整理資料可以這樣做，使用callback方法回撥
  handleAdd = fields => {
    const { dispatch } = this.props;
    dispatch({
      type: 'notice/add',
      payload: fields,
      callback: () => {
        dispatch({
          type: 'notice/fetch',
        });
      },});};

// 頁面是這樣拿到資料並且渲染的
  render() {
   const {
      notice: { noticeList },
      loading,
    } = this.props;
     return (
          <StandardTable
              loading={loading}
              data={noticeList}
              ...
            />）
}
複製程式碼

七，在使用腳手架的時候需要的基礎

（1）ant design,使用到元件的時候，下面的api很重要，坑也是比較多的

（2）Dva基礎知識,如果這些不知道 估計modal傳值那塊會比較迷茫

（3）React官網,生命週期，元件的使用，傳值，等等