摘要：是一個用開發(fā)的一個企業(yè)級中后臺管理包含常用的業(yè)務，組件，及數(shù)據(jù)流轉方案，前后端分離的開發(fā)方式，按業(yè)務劃分的目錄結構，可以大大提高我們的開發(fā)效率下面是整體的介紹，感興趣的同學可以去官網(wǎng)詳加了解。

dva-boot-admin 是一個用React開發(fā)的一個企業(yè)級中后臺管理UI,包含常用的業(yè)務，組件，及數(shù)據(jù)流轉方案，前后端分離的開發(fā)方式，按業(yè)務劃分的目錄結構，可以大大提高我們的開發(fā)效率

下面是整體的介紹，感興趣的同學可以去官網(wǎng)詳加了解。

封裝了dva框架的數(shù)據(jù)流轉，簡單的請求可以不用在model和service中定義

封裝了數(shù)據(jù)模模擬，可以獨立于后臺開發(fā)前臺功能

封裝了分頁請求，簡化并規(guī)范了分頁邏輯

封裝了fetch請求，適應與后臺多種交互請求, body參數(shù) parameter參數(shù) path參數(shù)，動態(tài)請求頭，請求前后攔截

擴展了antd寫了許多實用的UI，通過一個配置生成即可生成，后臺CRUD三件套

按業(yè)務模塊劃分的目錄結構，盡量做到最小耦合

一些常用的小部件用法

許多精心設計的頁面及交互場景

dva-boot腳手架封裝的功能

全局異常處理，全局請求攔截，公共配置提取

.
├── public                   # 不參與編譯的資源文件
├── src                      # 主程序目錄
│   ├── index.js             # 程序啟動和渲染入口文件
│   ├── components           # 全局公共組件
│   ├── layouts              # 頁面結構組件
│   │   ├── BasicLayout      # 基本布局
│   │   └── OtherLayout      # 布局組件根據(jù)具體功能調(diào)整，在路由配置中引用
│   ├── routes               # 動態(tài)路由目錄（每個功能一個文件夾的MVC結構）
│   │   ├── index.js         # 路由配置文件
│   │   ├── Home             # 功能模塊
│   │   │   ├── index.js     # 路由配置文件
│   │   │   ├── assets       # 多帶帶屬于這個模塊的靜態(tài)資源文件
│   │   │   ├── components   # 頁面組件
│   │   │   ├── model        # dva model
│   │   │   ├── service      # dva service
│   │   │   └── routes **    # 子路由(目錄結構與父級相同)
│   │   └── Login            # 功能模塊
│   │       ├── index.js     # 路由配置文件
│   │       ├── assets       # 多帶帶屬于這個模塊的靜態(tài)資源文件
│   │       ├── components   # 頁面組件
│   │       ├── model        # dva model
│   │       ├── service      # dva service
│   │       └── routes **    # 子路由(目錄結構與父級相同)
│   ├── utils                # 工具類
│   └── assets               # 資源文件
│           ├── fonts        # 字體 & 字體圖標
│           ├── images       # 圖片
│           └── styles       # 全局樣式

modelEnhance是對dva model層的簡單包裝函數(shù)，有時候我們只是想要簡單的fetch一下，從服務端獲取數(shù)據(jù)進行展示，之前可能要專門在model中寫一些effects和reducers,在service中定義請求函數(shù)，如果用modelEnhance包裝一下的話可以簡寫成下面的形式

// src/routes/UserInfo/model/index.js

import modelEnhance from "@/utils/modelEnhance";

// 就是普通的dva model傳入modelEnhance即可，不用定義其它變量
export default modelEnhance({
  namespace: "userInfo",
});

// src/routes/UserInfo/components/index.js

// 在組件中直接發(fā)出一個類型為`@request`的action,
// 結果會存入userInfo對應的state中，使用的key為`valueField`的值
this.props.dispatch({
  type: "userInfo/@request",
  payload: {
    url: "http://httpbin.org/get",
    valueField: "httpbin",
    method: "GET"
  }
});

// 同時請求兩個
this.props.dispatch({
  type: "userInfo/@request",
  payload: [{
    url: "http://httpbin.org/get",
    valueField: "httpbin",
    method: "GET"
  }, {
    url: "http://httpbin.org/post",
    valueField: "httpbin"
  }]
});

// 結合分頁助手使用，查詢第1頁10條數(shù)據(jù)
this.props.dispatch({
  type: "userInfo/@request",
  payload: {
    valueField: "pageData",
    url: "/api/userInfo/getList",
    pageInfo: pageData.startPage(1, 10),
  }
});

全局異常處理，我們可以在src/config.js的exceptiion中處理通用異常，這里共實就是dva的onError方法的入口，我們一般處理如登錄超時，用戶沒有權限，或另種請求異常等，建議大家不同的異常可以多帶帶包裝成一個異常類進行分類處理，這樣更容易維護以及調(diào)試。

工程的配置文件

模擬服務端響應數(shù)據(jù)，常常用在前后端分離的項目中，我們在開發(fā)新功能的時候，前后端是不同步的，這時我們就會創(chuàng)建一些數(shù)據(jù)原型，協(xié)商好后這時后端就可以開始開發(fā)，而我們可以繼續(xù)使用模擬數(shù)據(jù)，只有當后端完成這個接口并測試通過后，二者才會被整合。這之后如果后端因為某些原因服務不可用時，我們也會很方便的切換回模擬數(shù)據(jù)，這樣不會因為后端的問題而影響后續(xù)的開發(fā)。

要新建一些模擬數(shù)據(jù)只要在__mocks__文件夾中，創(chuàng)建一個文件，并在文件夾中的index.js中進行聲明，一些例子可以直接在文件夾下面找到。

所有的模擬數(shù)據(jù)是在開發(fā)環(huán)境中運行的，當您打包成生產(chǎn)環(huán)境的包時，會自動屏蔽所有模擬數(shù)據(jù)接口。

// 例子: /src/__mocks__/userInfo.js
/**
 * 模擬請求數(shù)據(jù)
 * @param {FetchMock} fetchMock 當現(xiàn)有條件不滿足時，可以使用fetchMock來進行擴展
 * @param {number} delay 增加延遲時間 ms
 * @param {function} mock 使用mock生成數(shù)據(jù)，例如：

   mock({
     "string|1-10": "★" // 生成最少1顆，最多10顆星字符
   })
   // {"string": "★★★★★★"} 
 */
export default ({fetchMock, delay, mock}) => {
  // 如果現(xiàn)有擴展不滿足需求，可以直接使用fetchMock方法
  // fetchMock.mock(/httpbin.org/post/, {/* response */}, {/* options */});

  return {
    // 一般用法
    "GET /api/getUserInfo": {
      name: "jonn"
    },
    // 省略 method, 模擬真實請求延遲效果
    "/api/getUsers": delay([
      { name: "jonn" },
      { name: "weiq" },
    ]),
    // 表格帶分頁
    "/api/userInfo/getList": delay(mock({
      "pageNum|+1": 1,                      // 遞增加1
      "pageSize": 10,
      "size": 10,
      "total": 500,
      "totalPages": 50,
      "list|10": [{
        "name": "@cname",                   // 中文名稱
        "age|1-100": 100,                   // 100以內(nèi)隨機整數(shù)
        "birthday": "@date("yyyy-MM-dd")",  // 日期
        "city": "@city(true)",              // 中國城市
        "phone": /^1[385][1-9]d{8}/        // 手機號
      }],
    })),
    // 表格帶分頁, 寫成函數(shù)形式可以使用請求參數(shù)，
    // 更真實的模擬后端數(shù)據(jù)處理業(yè)務
    "/api/userInfo/getList1": (options) => {
      const body = JSON.parse(options.body);
      const pageNum = body.pageNum;
      const idbase = (pageNum - 1) * 10 + 1;
      return toSuccess(mock({
        "pageNum": pageNum,
        "pageSize": 10,
        "size": 10,
        "total": 100,
        "totalPages": 10,
        "list|10": [{
          "id|+1": idbase,
          "name": "@cname",                   // 中文名稱
          "age|1-100": 100,                   // 100以內(nèi)隨機整數(shù)
          "birthday": "@date("yyyy-MM-dd")",  // 日期
          "city": "@city(true)",              // 中國城市
          "phone": /^1[385][1-9]d{8}/        // 手機號
        }],
      }), 400)
    }
  } 
}

在做后臺系統(tǒng)的時候，做的最多的可能就是對表格的增、刪、改、查，這時我們的頁面一般是這樣的，上面是對表格條件的檢索框，中間是我們的數(shù)據(jù)表格，表格下面是分頁組件，還會有新增，修改時用到表單組件

拿對表格數(shù)據(jù)進行檢索這個場景來說，在搜索框（可能有多個）輸入條件，點擊搜索，檢索到結果（可能非常多），我們會點擊下面的分頁組件進行翻頁，翻頁時我們就得帶著之前的檢索條件，我們會在發(fā)送請求前手動合并這些條件，并計算下一頁的頁數(shù)等

而PageHelper分頁助手就是為了簡化我們的代碼量的，如使用PageHelper.create()這個方法會為我們自動生成分頁對象

// model.js

state: {
  pageData: PageHelper.create()
}

這時我們可以在組件中使用這個對象很方便的進行分頁，及檢索，并且支持鏈式寫法，所有條件會自動進行合并，如：

// components

const {pageData} = this.props;
// 查詢第1頁，每頁10條，并且name為jonn的數(shù)據(jù)
pageData.startPage(1, 10).filter({name: "jonn"}).filter(...).sortBy(...);

// 查詢下一頁，并且會帶著之前的查詢條件
pageData.nextPage();

我們還可以結合modelEnhance來使用分頁，更多用法會在例子中進行說明。

腳手架使用了cmn-utils做為工具庫，這里面提供了請求、存儲、事件等許多實用方法

$ git clone https://github.com/LANIF-UI/dva-boot.git
$ cd dva-boot
$ yarn
$ yarn start
// 或使用npm
$ npm install
$ npm start