實驗室後臺管理專案總結

楊文璐發表於2018-08-27

在專案過程中遇到的一些問題和解決方法

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寫的第一個專案，在做完這次專案之後，對它的資料流向，路由切換等有了更為清楚的瞭解，做的東西整體來說就是一個表單，怎麼提交，怎麼增加，刪除，編輯和釋出都比較清楚了，但是還是有很多學習的地方，上傳檔案的元件是別人寫的，我直接引用的，這其中還有很多值得思考的地方

相關文章