Ant Design Pro快速入門

在上一篇文章中，我們介紹了如何構建一個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文件進行管理。 
示例內容如下：

1. const routerConfig = {
2. '/': {
3. component: dynamicWrapper(app, [], () => import('../layouts/BasicLayout')),
4. },
5. '/dashboard/monitor': {
6. component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgMonitor')),
7. },
8. '/dashboard/workplace': {
9. component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/NgWorkSpace')),
10. }
11. }

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

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

1. const menuData = [{
2. name: 'dashboard',
3. icon: 'dashboard', // https://demo.com/icon.png or <icon type="dashboard">
4. path: 'dashboard',
5. children: [{
6. name: '分析頁',
7. path: 'analysis',
8. }, {
9. name: '監控頁',
10. path: 'monitor',
11. }, {
12. name: '工作台',
13. path: 'workplace',
14. }, {
15. name: '測試頁',
16. path: 'test',
17. }],
18. }, {
19. // 更多配置
20. }];

創建一個頁面

下面，我們繼續來創建一個頁面，對應到我們添加的路由中。 
在src/routes下創建對應的js文件即可。 
newPage.js: 
示例如下：

1. import React, { PureComponent } from 'react';
3. export default class Workplace extends PureComponent {
4. render() {
5. return (
6. <h1>Hello World!</h1>
7. );
8. }
9. }

新增一個組件

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

1. import React from 'react';
2. import styles from './index.less'; // 按照 CSS Modules 的方式引入樣式文件。
4. export default ({ src, desc, style }) => (
5. <div style="{style}" classname="{styles.imageWrapper}">
6. <img classname="{styles.img}" src="{src}" alt="{desc}">
7. {desc &amp;&amp; <div classname="{styles.desc}">{desc}</div>}
8. </div>
9. );

修改newPage.js:

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

增加service和module

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

1. componentDidMount() {
2. const { dispatch } = this.props;
3. dispatch({
4. type: 'project/fetchNotice',
5. });
6. dispatch({
7. type: 'activities/fetchList',
8. });
9. dispatch({
10. type: 'chart/fetch',
11. });
12. }

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

1. export default {
2. namespace: 'monitor',
4. state: {
5. currentServices: [],
6. waitingServices: [],
7. },
9. effects: {
10. *get_current_service_list(_, { call, put }) {
11. const response = yield call(getCurrentServiceList);
12. yield put({
13. type: 'currentServiceList',
14. currentServices: response.result,
15. });
16. },
17. *get_waiting_service_list(_, { call, put }) {
18. const response = yield call(getWaitingServiceList);
19. yield put({
20. type: 'waitingServiceList',
21. waitingServices: response.result,
22. });
23. },
24. },
26. reducers: {
27. currentServiceList(state, action) {
28. return {
29. ...state,
30. currentServices: action.currentServices,
31. };
32. },
33. waitingServiceList(state, action) {
34. return {
35. ...state,
36. waitingServices: action.waitingServices,
37. };
38. },
39. },
40. };

而真正發送請求的實際是service文件夾下的文件進行的。

1. export async function getWaitingServiceList() {
2. return request('/api/get_service_list', {
3. method: 'POST',
4. body: {"type": "waiting"},
5. });
6. }
8. export async function getCurrentServiceList() {
9. return request('/api/get_service_list', {
10. method: 'POST',
11. body: {"type": "current"},
12. });
13. }

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

1. const { monitor, loading } = this.props;
2. // monitor指的是相當於數據流
3. const { currentServices, waitingServices } = monitor;
4. // 從數據流中取出了具體的變量

mock數據

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

1. const proxy = {
2. 'GET /api/fake_list': [{
3. key: '1',
4. name: 'John Brown',
5. age: 32,
6. address: 'New York No. 1 Lake Park',
7. }, {
8. key: '2',
9. name: 'Jim Green',
10. age: 42,
11. address: 'London No. 1 Lake Park',
12. }, {
13. key: '3',
14. name: 'Joe Black',
15. age: 32,
16. address: 'Sidney No. 1 Lake Park',
17. }],
18. 'POST /api/login/account': (req, res) => {
19. const { password, userName, type } = req.body;
20. if(password === '888888' && userName === 'admin'){
21. res.send({
22. status: 'ok',
23. type,
24. currentAuthority: 'admin'
25. });
26. return ;
27. }
28. if(password === '123456' && userName === 'user'){
29. res.send({
30. status: 'ok',
31. type,
32. currentAuthority: 'user'
33. });
34. return ;
35. }
36. res.send({
37. status: 'error',
38. type,
39. currentAuthority: 'guest'
40. });
41. }
42. }

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

打包

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

1. npm run build

此外，有時我們希望分析依賴模塊的文件大小來優化我們的項目：

1. npm run analyze

運行完成后，我們可以打開dist/stats.html文件來查詢具體內容：

至此為止，我們就講解完成了Ant Design Pro的快速入門。 
在后續文章中，我們會對一些具體的使用來進行分析和剖析。 
大家在使用的過程中如果發現一些問題也歡迎大家留言討論。

1. </imagewrapper></icon>