ant design pro超詳細入門教程

1、Ant Design Pro 初了解

     說到ant design pro，得先了解一下ant design是個什么東西？ant design螞蟻金服基於react打造的一個服務於企業級產品的UI框架。而ant design pro呢?就是基於Ant Design這個框架搭建的中后台管理控制台的腳手架  。

     ant design pro官方文檔：https://pro.ant.design/docs/getting-started-cn

2、安裝

    默認你本地已安裝好node和git環境

$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project

3、目錄結構

├── config                   # umi 配置，包含路由，構建等配置
├── mock                     # 本地模擬數據
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地靜態資源
│   ├── components           # 業務通用組件
│   ├── e2e                  # 集成測試用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 業務頁面入口和常用模板
│   ├── services             # 后台接口服務
│   ├── utils                # 工具庫
│   ├── locales              # 國際化資源
│   ├── global.less          # 全局樣式
│   └── global.js            # 全局 JS
├── tests                    # 測試工具
├── README.md
└── package.json

4、讓你的項目run起來！

npm start

同時，如果你的本地安裝了yarn，也可以使用yarn來啟動

打開瀏覽器訪問 http://localhost:8000

 5、開始項目你的項目

   1、如何開發你的新頁面

       a.在src/pages 目錄下新建你的模塊與頁面

      b.在config目錄下router.config.js文件中配置菜單路由

     c.國際化

       在src目錄下的locals配置新菜單欄目所對應的中文信息

   

2、與服務端進行交互

    a、請求流程

• UI 組件交互操作；
• 調用 model 的 effect；
• 調用統一管理的 service 請求函數；
• 使用封裝的 request.js 發送請求；
• 獲取服務端返回；
• 然后調用 reducer 改變 state；
• 更新 model

src/pages/newProject/new.js

import React, { PureComponent } from 'react';
//引入阿里dva框架
import { connect } from 'dva';

//調用了 dva 所封裝的 react-redux 的 @connect 裝飾器，用來接收綁定的 list 這個 model 對應的 redux store
@connect(({ list, loading }) => ({
  list,
  loading: loading.models.list,
}))
class CardList extends PureComponent {
  componentDidMount() {
    const { dispatch } = this.props;
   //dispatch分發器調用models發起請求，具體流程是dispatch=>models=>services
    dispatch({
      type: 'list/fetch',   //list 為model 中的namespace，fetch為方法名
      payload: {
        count: 8,
      },
    });
  }

src/pages/newProjec/models

import { queryFakeList } from '@/services/api'

export default {
    namespace: 'list',
    //state 存儲數據收到 Action 以后，會更新數據
    state: {
        list: [],
    },

    effects: {
     // @param payload 參數
     // @param call 執行異步函數調用接口
     // @param put 發出一個 Action，類似於 dispatch 將服務端返回的數據傳遞給上面的state
        *fetch({ payload }, { call, put }) {
            const response = yield call(queryFakeList, payload)
            yield put({
                type: 'queryList',   //reducers 中的方法
                payload: Array.isArray(response) ? response : [],
            })
        },
      }
    reducers: {
        queryList(state, action) {
            return {
                ...state,
                list: action.payload,   //更新state中的數據
            }
        },
}

src/services/api.js

import { stringify } from 'qs'
//對服務端發起請求
export async function queryFakeList(params) {
    return request(`/api/fake_list?${stringify(params)}`)
}