ant design pro的使用

ant design pro的框架已經從v2發展到v4了，V4多了“區塊”的概念，更加自動化一些。我這裏使用的版本是**@2.3.1**,通過自定義的方式來新增頁面，目的是實現學生信息的展示。

antd pro默認提供了兩種佈局模板，包括BasicLayout和UserLayout。

新建文件

首先在src/pages新建一個文件夾，其中包含展示頁面和使用的model以及樣式表，如下圖所示，一般頁面名稱需要是大寫字母開頭，model、service、樣式表都是小寫字母。

然後在services文件夾下新建一個student.js

在mock文件夾下新建student.js,準備一些mock數據。如果要實現國際化的話，就在src/locales下面新建文件。

綜上，我們先準備好了這麼多js文件，（PS：名字可以按自己的喜好來，只要反映出相應的功能就行）。

配置路由

打開config/router.config.js文件，這是路由配置文件，在裏面增加一條即可

 // app
  {
    path: '/',
    component: '../layouts/BasicLayout',
    Routes: ['src/pages/Authorized'],
    routes: [
        {
        path: '/student',
        name: 'student',
        icon: 'smile',
        component: './Student/StudentPage',
      },
    ]
   }

在locales/zh-CN/menu.js裏面加一條菜單項。然後現在可以開始寫page、model和service了~

畫頁面，完成UI部分

首先是StudentPage.js，在這個頁面中我們要展示學生信息，分析網頁需要哪些部分，比如最上面需要有一個搜索欄，可以用學號或者姓名來查詢某個學生的信息。然後下面是一個表格，其中每一行都可以查看學生的詳細信息以及修改學生信息，表格的右上角還應有一個新增學生的按鈕，用來添加學生信息。最下面是表格的分頁。

OK，分析完了就大概知道需要引用哪些組件了，比如Table、Form、Button等等。寫完之後是這樣的一個樣子。

學生詳細信息：

編輯學生信息：

新增學生信息：

其中編輯和新增學生信息用的是一個modal，只是title和確定按鈕的行爲不同。

數據流轉

摘自dva.js官網，它基於react和redux,參見->這裏

數據的改變發生通常是通過用戶交互行爲或者瀏覽器行爲（如路由跳轉等）觸發的，當此類行爲會改變數據的時候可以通過 dispatch 發起一個 action，如果是同步行爲會直接通過 Reducers 改變 State ，如果是異步行爲（副作用）會先觸發 Effects 然後流向 Reducers 最終改變 State，所以在 dva 中，數據流向非常清晰簡明，並且思路基本跟開源社區保持一致（也是來自於開源社區）。

在Effect中，通過調用service裏面的接口來獲得response

const response = yield call(getStuList, payload);

然後處理response之後通過yield put放到reducer裏，然後改變state

yield put({
                type: 'saveStuList',
                payload: result,
            });

在service裏面，是數據的接口，用來發送到proxy來獲取服務器上的數據（這裏用的是mock數據）

export async function getStuList(params){
    return request(`${path}/student/query`,{
        method: 'POST',
        body: params,
      });
}

在mock數據裏面，寫的是這樣。

'POST /student/query': getStudentList,

接口解釋

總共用到了四個接口，這裏使用restAPI形式。

'POST /student/query'  // 查詢學生列表
'GET /student'        // 獲取詳情
'PUT /student/edit'   // 修改學生信息
'POST /student/add'   // 新增學生

總結：
頁面可以很快畫出來，但是對數據流轉的理解有偏差，接下來還需要仔細看文檔！