在上一篇文章中，我們介紹瞭如何構建一個Ant Design Pro的環境。

同時講解了如何啟動服務並檢視前端頁面功能。

在本文中，我們將簡單講解如何在Ant Design Pro框架下實現自己的業務功能。

目錄結構淺談

首先，我們來簡單瞭解一下整個專案的目錄結構及其中每個檔案的功能。  一個完整的目錄結構如下：   其中，關於業務功能的程式碼都在src資料夾下。  而src中本身又包含著很多的子資料夾。  其中，我們最常用的應該了routes，services，models以及components。  下面，我們來依次瞭解一下這四個資料夾的作用。

1. routes：每個路由對應的頁面元件檔案。主要定義具體頁面的基本結構和內容。
2. services：用於與後臺互動、傳送請求等。
3. models：用於元件的資料儲存，接收請求返回的資料等。
4. components：元件資料夾。每個頁面可能是由一些元件組成的，對於一些相對通用的元件，建議將該元件寫入components資料夾中，並在routes資料夾中的檔案引入來使用。

其餘的資料夾和檔案功能和含義我們不再此處展開說明，但是會在後續使用過程中隨時進行補充說明。

配置新的路由和選單

在Ant Design Pro中，前端路由是通過react-router4.0進行路由管理的。  下面，我們將會講解如下新增一個新的路由，並在前端頁面中增加一個選單來對應該路由。  在Ant Design Pro中，路由的配置檔案統一由src/common/router.js

const routerConfig = {
    '/': {
      component: dynamicWrapper(app, [], () => import('../layouts/BasicLayout')),
    },
    '/dashboard/monitor': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgMonitor')),
    },
    '/dashboard/workplace': {
      component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgWorkSpace')),
    }
}
 

其中，包含了三個路由：/，/dashboard/monitor，/dashboard/workplace。  同時，指定了這三個路由分別對應的頁面檔案為layouts/BasicLayout.js，routes/Dashboard/NgMonitor.js以及Dashboard/NgWorkSpace.js檔案。

下面，我們可以在側邊欄中填寫一項來對應到我們新增的路由中：  示例如下：

const menuData = [{
  name: 'dashboard',
  icon: 'dashboard',  // https://demo.com/icon.png or <icon type="dashboard">
  path: 'dashboard',
  children: [{
    name: '分析頁',
    path: 'analysis',
  }, {
    name: '監控頁',
    path: 'monitor',
  }, {
    name: '工作臺',
    path: 'workplace',
  }, {
    name: '測試頁',
    path: 'test',
  }],
}, {
  // 更多配置
}];

建立一個頁面

下面，我們繼續來建立一個頁面，對應到我們新增的路由中。  在src/routes下建立對應的js檔案即可。 newPage.js:  示例如下：

import React, { PureComponent } from 'react';
export default class Workplace extends PureComponent {
  render() {
    return (
      <h1>Hello World!</h1>
    );
  }
}

新增一個元件

假設該頁面相對複雜，我們需要引入一個元件呢？  我們可以在components資料夾下建立一個元件，並在newPage.js引入並使用。  示例如下： components/ImageWrapper/index.js：

import React from 'react';
import styles from './index.less';    // 按照 CSS Modules 的方式引入樣式檔案。
export default ({ src, desc, style }) => (
  <div style="{style}" classname="{styles.imageWrapper}">
    <img classname="{styles.img}" src="{src}" alt="{desc}">
    {desc &amp;&amp; <div classname="{styles.desc}">{desc}</div>}
  </div>
);

修改newPage.js:

import React from 'react';
import ImageWrapper from '../../components/ImageWrapper';  // 注意保證引用路徑的正確
export default () => (
  <imagewrapper src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png" desc="示意圖">;
)

增加service和module

假設我們的newPage.js頁面需要傳送請求，接收資料並在頁面渲染時使用接收到的資料呢？  例如，我們可以在元件載入時傳送一個請求來獲取資料。

componentDidMount() {
  const { dispatch } = this.props;
  dispatch({
    type: 'project/fetchNotice',
  });
  dispatch({
    type: 'activities/fetchList',
  });
  dispatch({
    type: 'chart/fetch',
  });
}

此時，它將會找到對應的models中的函式來發送請求：

export default {
  namespace: 'monitor',
  state: {
    currentServices: [],
    waitingServices: [],
  },
  effects: {
    *get_current_service_list(_, { call, put }) {
      const response = yield call(getCurrentServiceList);
      yield put({
        type: 'currentServiceList',
        currentServices: response.result,
      });
    },
    *get_waiting_service_list(_, { call, put }) {
      const response = yield call(getWaitingServiceList);
      yield put({
        type: 'waitingServiceList',
        waitingServices: response.result,
      });
    },
  },
  reducers: {
    currentServiceList(state, action) {
      return {
        ...state,
        currentServices: action.currentServices,
      };
    },
    waitingServiceList(state, action) {
      return {
        ...state,
        waitingServices: action.waitingServices,
      };
    },
  },
};

而真正傳送請求的實際是service資料夾下的檔案進行的。

export async function getWaitingServiceList() {
  return request('/api/get_service_list', {
    method: 'POST',
    body: {"type": "waiting"},
  });
}
export async function getCurrentServiceList() {
  return request('/api/get_service_list', {
    method: 'POST',
    body: {"type": "current"},
  });
}

在routes資料夾中，我們可以直接在render部分使用應該得到的返回值進行渲染顯示：

const { monitor, loading } = this.props;
// monitor指的是相當於資料流
const { currentServices, waitingServices } = monitor;
// 從資料流中取出了具體的變數

mock資料

在我們開發的過程中，通常不可避免的就是mock資料。  那具體應該如下進行mock資料呢？主要依賴的是.roadhogrc.mock.js檔案。  開啟指定檔案，我們可以看到如下的類似內容：

const proxy = {
  'GET /api/fake_list': [{
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
  }, {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
  }, {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
  }],
  'POST /api/login/account': (req, res) => {
    const { password, userName, type } = req.body;
    if(password === '888888' && userName === 'admin'){
      res.send({
        status: 'ok',
        type,
        currentAuthority: 'admin'
      });
      return ;
    }
    if(password === '123456' && userName === 'user'){
      res.send({
        status: 'ok',
        type,
        currentAuthority: 'user'
      });
      return ;
    }
    res.send({
      status: 'error',
      type,
      currentAuthority: 'guest'
    });
  }
}

在上面的例子中，我們分別描述了針對GET和POST請求應該如下進行資料Mock。

打包

當我們將完整的前端專案開發完成後，我們需要打包成為靜態檔案並準備上線。  此時，我們應該如何打包專案呢？  非常簡單，只需要執行如下命令即可：

npm run build

此外，有時我們希望分析依賴模組的檔案大小來優化我們的專案：

npm run analyze

執行完成後，我們可以開啟dist/stats.html檔案來查詢具體內容：

至此為止，我們就講解完成了Ant Design Pro的快速入門。  在後續文章中，我們會對一些具體的使用來進行分析和剖析。