dva-boot-admin 是一個用React開闢的一個企業級中背景治理UI,包括經常運用的營業，組件，及數據流轉計劃，前後端星散的開闢方式，按營業分別的目次構造，能夠大大提高我們的開闢效力

下面是團體的引見，感興趣的同硯能夠去官網詳加相識。

功用

• 封裝了dva框架的數據流轉，簡樸的要求能夠不必在model和service中定義
• 封裝了數據模模仿，能夠獨立於背景開闢前台功用
• 封裝了分頁要求，簡化並範例了分頁邏輯
• 封裝了fetch要求，適應與背景多種交互要求, body參數 parameter參數 path參數，動態要求頭，要求前後阻攔
• 擴大了antd寫了很多有用的UI，經由過程一個設置天生即可天生，背景CRUD三件套
• 按營業模塊分別的目次構造，只管做到最小耦合
• 一些經常運用的小部件用法
• 很多精心設計的頁面及交互場景
• dva-boot腳手架封裝的功用
• 全局異常處置懲罰，全局要求阻攔，大眾設置提取

目次構造

.
├── public                   # 不介入編譯的資本文件
├── src                      # 主順序目次
│   ├── index.js             # 順序啟動和襯着進口文件
│   ├── components           # 全局大眾組件
│   ├── layouts              # 頁面構造組件
│   │   ├── BasicLayout      # 基礎規劃
│   │   └── OtherLayout      # 規劃組件依據詳細功用調解，在路由設置中援用
│   ├── routes               # 動態路由目次（每一個功用一個文件夾的MVC構造）
│   │   ├── index.js         # 路由設置文件
│   │   ├── Home             # 功用模塊
│   │   │   ├── index.js     # 路由設置文件
│   │   │   ├── assets       # 零丁屬於這個模塊的靜態資本文件
│   │   │   ├── components   # 頁面組件
│   │   │   ├── model        # dva model
│   │   │   ├── service      # dva service
│   │   │   └── routes **    # 子路由(目次構造與父級雷同)
│   │   └── Login            # 功用模塊
│   │       ├── index.js     # 路由設置文件
│   │       ├── assets       # 零丁屬於這個模塊的靜態資本文件
│   │       ├── components   # 頁面組件
│   │       ├── model        # dva model
│   │       ├── service      # dva service
│   │       └── routes **    # 子路由(目次構造與父級雷同)
│   ├── utils                # 東西類
│   └── assets               # 資本文件
│           ├── fonts        # 字體 & 字體圖標
│           ├── images       # 圖片
│           └── styles       # 全局款式

經常運用要領

modelEnhance

modelEnhance是對dva model層的簡樸包裝函數，有時刻我們只是想要簡樸的fetch一下，從效勞端獵取數據舉行展現，之前能夠要特地在model中寫一些effects和reducers,在service中定義要求函數，假如用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

// 在組件中直接發出一個範例為`@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條數據
this.props.dispatch({
  type: 'userInfo/@request',
  payload: {
    valueField: 'pageData',
    url: '/api/userInfo/getList',
    pageInfo: pageData.startPage(1, 10),
  }
});

exception

全局異常處置懲罰，我們能夠在src/config.js的exceptiion中處置懲罰通用異常，這裏共實就是dva的onError要領的進口，我們平常處置懲罰如登錄超時，用戶沒有權限，或另種要求異常等，發起人人差別的異常能夠零丁包裝成一個異常類舉行分類處置懲罰，如許更輕易保護以及調試。

config

工程的設置文件

fetch mock

模仿效勞端相應數據，常經常運用在前後端星散的項目中，我們在開闢新功用的時刻，前後端是差別步的，這時候我們就會建立一些數據原型，協商好后這時候後端就能夠最先開闢，而我們能夠繼承運用模仿數據，只有當後端完成這個接口並測試經由過程后，兩者才會被整合。這以後假如後端由於某些緣由效勞不可用時，我們也會很輕易的切換回模仿數據，如許不會由於後端的題目而影響後續的開闢。

要新建一些模仿數據只要在__mocks__文件夾中，建立一個文件，並在文件夾中的index.js中舉行聲明，一些例子能夠直接在文件夾下面找到。

一切的模仿數據是在開闢環境中運轉的，當您打包成臨盆環境的包時，會自動屏障一切模仿數據接口。

// 例子: /src/__mocks__/userInfo.js
/**
 * 模仿要求數據
 * @param {FetchMock} fetchMock 當現有前提不滿足時，能夠運用fetchMock來舉行擴大
 * @param {number} delay 增添耽誤時間 ms
 * @param {function} mock 運用mock天生數據，比方：

   mock({
     'string|1-10': '★' // 天生起碼1顆，最多10顆星字符
   })
   // {'string': '★★★★★★'} 
 */
export default ({fetchMock, delay, mock}) => {
  // 假如現有擴大不滿足需求，能夠直接運用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之內隨機整數
        'birthday': '@date("yyyy-MM-dd")',  // 日期
        'city': '@city(true)',              // 中國都市
        'phone': /^1[385][1-9]\d{8}/        // 手機號
      }],
    })),
    // 表格帶分頁, 寫成函數情勢能夠運用要求參數，
    // 更實在的模仿後端數據處置懲罰營業
    '/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之內隨機整數
          'birthday': '@date("yyyy-MM-dd")',  // 日期
          'city': '@city(true)',              // 中國都市
          'phone': /^1[385][1-9]\d{8}/        // 手機號
        }],
      }), 400)
    }
  } 
}

page helper (簡樸分頁)

在做背景體系的時刻，做的最多的能夠就是對錶格的增、刪、改、查，這時候我們的頁面平常是如許的，上面是對錶格前提的檢索框，中心是我們的數據表格，表格下面是分頁組件，還會有新增，修改時用到表單組件

拿對錶格數據舉行檢索這個場景來講，在搜刮框（能夠有多個）輸入前提，點擊搜刮，檢索到結果（能夠異常多），我們會點擊下面的分頁組件舉行翻頁，翻頁時我們就得帶着之前的檢索前提，我們會在發送要求前手動兼并這些前提，並盤算下一頁的頁數等

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

// model.js

state: {
  pageData: PageHelper.create()
}

這時候我們能夠在組件中運用這個對象很輕易的舉行分頁，及檢索，而且支撐鏈式寫法，一切前提會自動舉行兼并，如：

// components

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

// 查詢下一頁，而且會帶着之前的查詢前提
pageData.nextPage();

我們還能夠連繫modelEnhance來運用分頁，更多用法會在例子中舉行申明。

cmn-utils

腳手架運用了cmn-utils做為東西庫，這內里供應了要求、存儲、事宜等很多有用要領

開闢&運轉

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