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

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

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

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

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

封裝了分頁請(qǐng)求，簡(jiǎn)化并規(guī)范了分頁邏輯

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

擴(kuò)展了antd寫了許多實(shí)用的UI，通過一個(gè)配置生成即可生成，后臺(tái)CRUD三件套

按業(yè)務(wù)模塊劃分的目錄結(jié)構(gòu)，盡量做到最小耦合

一些常用的小部件用法

許多精心設(shè)計(jì)的頁面及交互場(chǎng)景

dva-boot腳手架封裝的功能

全局異常處理，全局請(qǐng)求攔截，公共配置提取

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

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

// 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ā)出一個(gè)類型為`@request`的action,
// 結(jié)果會(huì)存入userInfo對(duì)應(yīng)的state中，使用的key為`valueField`的值
this.props.dispatch({
  type: "userInfo/@request",
  payload: {
    url: "http://httpbin.org/get",
    valueField: "httpbin",
    method: "GET"
  }
});

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

// 結(jié)合分頁助手使用，查詢第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中處理通用異常，這里共實(shí)就是dva的onError方法的入口，我們一般處理如登錄超時(shí)，用戶沒有權(quán)限，或另種請(qǐng)求異常等，建議大家不同的異?？梢远鄮Оb成一個(gè)異常類進(jìn)行分類處理，這樣更容易維護(hù)以及調(diào)試。

工程的配置文件

模擬服務(wù)端響應(yīng)數(shù)據(jù)，常常用在前后端分離的項(xiàng)目中，我們?cè)陂_發(fā)新功能的時(shí)候，前后端是不同步的，這時(shí)我們就會(huì)創(chuàng)建一些數(shù)據(jù)原型，協(xié)商好后這時(shí)后端就可以開始開發(fā)，而我們可以繼續(xù)使用模擬數(shù)據(jù)，只有當(dāng)后端完成這個(gè)接口并測(cè)試通過后，二者才會(huì)被整合。這之后如果后端因?yàn)槟承┰蚍?wù)不可用時(shí)，我們也會(huì)很方便的切換回模擬數(shù)據(jù)，這樣不會(huì)因?yàn)楹蠖说膯栴}而影響后續(xù)的開發(fā)。

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

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

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

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

  return {
    // 一般用法
    "GET /api/getUserInfo": {
      name: "jonn"
    },
    // 省略 method, 模擬真實(shí)請(qǐng)求延遲效果
    "/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)隨機(jī)整數(shù)
        "birthday": "@date("yyyy-MM-dd")",  // 日期
        "city": "@city(true)",              // 中國城市
        "phone": /^1[385][1-9]d{8}/        // 手機(jī)號(hào)
      }],
    })),
    // 表格帶分頁, 寫成函數(shù)形式可以使用請(qǐng)求參數(shù)，
    // 更真實(shí)的模擬后端數(shù)據(jù)處理業(yè)務(wù)
    "/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)隨機(jī)整數(shù)
          "birthday": "@date("yyyy-MM-dd")",  // 日期
          "city": "@city(true)",              // 中國城市
          "phone": /^1[385][1-9]d{8}/        // 手機(jī)號(hào)
        }],
      }), 400)
    }
  } 
}

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

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

而PageHelper分頁助手就是為了簡(jiǎn)化我們的代碼量的，如使用PageHelper.create()這個(gè)方法會(huì)為我們自動(dòng)生成分頁對(duì)象

// model.js

state: {
  pageData: PageHelper.create()
}

這時(shí)我們可以在組件中使用這個(gè)對(duì)象很方便的進(jìn)行分頁，及檢索，并且支持鏈?zhǔn)綄懛?，所有條件會(huì)自動(dòng)進(jìn)行合并，如：

// components

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

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

我們還可以結(jié)合modelEnhance來使用分頁，更多用法會(huì)在例子中進(jìn)行說明。

腳手架使用了cmn-utils做為工具庫，這里面提供了請(qǐng)求、存儲(chǔ)、事件等許多實(shí)用方法

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