實驗室後臺管理項目總結

---

在項目過程當中遇到的一些問題和解決方法

---

1.若是注入了 model可是發現怎麼也訪問不了想訪問的那個接口，能夠一層一層的經過打console.log來檢查，若是已經進入了service層，頗有多是api接口寫錯了，須要注意的是最開始的「/」

INTRODUCTION:'/lab_introduction/lab_introduction',

2.項目中遇到須要狀態的部分，能夠單獨寫一個文件，若是返回的狀態不是想要的那個狀態，檢查一下和後端的數據類型是否一致

const PROJECTSTATUS = {
  SAVE: 0,
  PUBLISH: 1,
};

3.數據的分頁有兩種處理方式，一種是在pageProps裏面利用回調函數onChange，一種是在組件中單獨寫一個turnPage函數，利用參數e，兩種方法均可以實現分頁，當肯定函數寫正確以後，若是不能正確的翻頁，檢查models裏面的函數，看函數裏面寫的名字和後端返回的名字是否相同

turnPage = (e) => {
    const { current, pageSize } = e;
    const { dispatch } = this.props;
    dispatch({
      type: 'enrollment/getAllList',
      payload: {
        page: current,
        pageSize,
      },
    });
  };

pagination: {
                ...pagination,
                onChange (page, pageSize) {
                dispatch({
                    type: 'personbase/listpage',
                    payload: {
                        pageSize,
                        page,
                    },
                  })
                },
              },

4.有時候會出現進入主頁面以後沒有點擊新增,Modal就本身跳出來的狀況，是由於在上次點擊新增肯定以後並無隱藏掉它，因此下一次進入的時候它會顯示出來。同時須要注意到的是，在隱藏的同時須要將裏面的數據置爲空，以保證下次新增的時候裏面的數據是空的。

hiddenModal(state) {
      return {
        ...state,
        visible: false,
        currentRow: {
          num: 0,
          title: '',
          date: '',
          email: '',
        },
      };
    },

5.在增長上傳圖片的組件以後，新增一個以後會出現以前上一次上傳的圖片會出如今新增的頁面中。這是由於models中還存在着上次上傳的數據。咱們能夠在index.js的聲明週期中，執行updateState，將baseSource置爲空

dispatch({
      type:'enrollment/updateState',
      payload:{
        baseSource:{},
      },
    });

updateState(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },

6.在上傳圖片的編輯頁面保存以後會進入預覽頁面，若是在預覽頁面返回的話就看不見以前上傳的圖片了，可是在獲取到的數據中是存在以前上傳的圖片的。後來檢查了好久發現是由於我把上傳的圖片放在了Card裏面，而後給Card加了一個loading。通常是須要異步請求的數據須要加loading，好比表格，input框中的內容。

<Card
            title="圖片內容"
            style={{ marginBottom: '20px' }}
            bordered={false}
          >
            <Row>
              <Col>
                <ImageUploader {...uploaderProps} />
              </Col>
            </Row>
          </Card>

---

在項目過程當中學到的新知識

---

1.關於pathToRegexp
一種可能含有某種匹配模式的路徑字符串是它的必選參數，它會返回一個正則對象。而後調用exec將請求路徑與這個正則匹配起來

const pathToRegexp = require('path-to-regexp');
    const match = pathToRegexp('/introduceInfo/:id').exec(this.props.history.location.pathname);

2.關於loading
loading能夠監聽異步請求的狀態，當異步請求結束以後返回false。
由於多個頁面可能共用同一個models，因此當從一個頁面進入另外一個頁面時，可能出現已經進入頁面，可是數據尚未獲取回來的狀況，若是不加loading會出現之前的數據，爲了不這種狀況的發生，咱們能夠在適當的 地方加入loading

@connect(({ introduce, loading }) => ({
    introduce,
    loading: loading.effects['introduce/getInfo'],
    editloading: loading.effects['introduce/editInfo'],
  }),
)

3.關於數據類型轉換
像是相似於日期這種數據，在提交給後臺以前咱們須要對數據類型進行處理，不然訪問接口會失敗getNowFormatDate函數對數據進行轉換

export function getNowFormatDate(time) {
  const date = time ? new Date(time) : new Date();
  const seperator1 = '-';
  const seperator2 = ':';
  let month = date.getMonth() + 1;
  let strDate = date.getDate();
  if (month >= 1 && month <= 9) {
    month = `0${month}`;
  }
  if (strDate >= 0 && strDate <= 9) {
    strDate = `0${strDate}`;
  }
  const currentdate = `${date.getFullYear() + seperator1 + month + seperator1 + strDate
    } ${date.getHours()}${seperator2}${date.getMinutes()
    }${seperator2}${date.getSeconds()}`;
  return currentdate;
}

---

conclusion

---

這是用ant design寫的第一個項目，在作完此次項目以後，對它的數據流向，路由切換等有了更爲清楚的瞭解，作的東西總體來講就是一個表單，怎麼提交，怎麼增長，刪除，編輯和發佈都比較清楚了，可是仍是有不少學習的地方，上傳文件的組件是別人寫的，我直接引用的，這其中還有不少值得思考的地方