推薦一個在線接口Mock工具fastmock

若是想直接進入實戰請猛戳這裏fastmock線上地址www.fastmock.site

fastmock可讓你在沒有後端程序的狀況下能真實地在線模擬ajax請求，你能夠用fatmock實現項目初期純前端的效果演示，也能夠用fastmock實現開發中的數據模擬從而實現先後端分離。以下面的接口

• 模擬一個用戶列表https://www.fastmock.site/moc...
• 模擬各類特殊類型的數據https://www.fastmock.site/moc...

您能夠直接在瀏覽器打開上面的連接或者用ajax請求查看返回的數據

在使用fastmock以前，你的團隊實現數據模擬多是下面的方案中的一種或者多種

• 本地手寫數據模擬，在前端代碼中產生一大堆的mock代碼。
• 利用mockjs或者canjs的can-fixture實現ajax攔截，本地配置必要的json規則。
• 後端在Controller層造假數據返回給前端。

上面的方式中，無論哪種方式，都會要求開發人員寫一些跟項目本無任何關聯的代碼，第一個和第二個方式還會須要前端項目在本地引入沒必要要的js文件。好比下面的mock數據

// 產品配置
  {
    url: '/pms/product/list',
    on: true,
    type: 'get',
    resp: Mock.mock({
      'body': {
        'currentPage': 1,
        'isMore': 0,
        'pageSize': 15,
        'resultList|10': [
          {
            'productNo': '11111',
            'productName|1': ['產品名稱1', '產品名稱2', '產品名稱3', '產品名稱4', '產品名稱5'],
            'productType|1': ['1', '2', '3', '4', '5'],
            'status|1': ['1', '2'],
            'gmtCreate': '@DATETIME("yyyy-MM-dd HH:mm:ss")',
            'gmtModified': '@now("yyyy-MM-dd HH:mm:ss")',
            'createUserCode': '@name'
          }
        ],
        'startIndex': 0,
        'totalNum': 100,
        'totalPage': 1
      },
      'reCode': '0000',
      'reMsg': '成功',
      'success': true
    })
  },
  // 產品配置-貸款材料配置
  {
    url: '/pms/cfgLoanDoc/list',
    on: true,
    resp: Mock.mock({
      'body': {
        'currentPage': 1,
        'isMore': 0,
        'pageSize': 15,
        'resultList|10': [
          {
            'loanDocCode|+1': 1,
            'loanDocName': /[測試字體]{4,30}/
          }
        ],
        'startIndex': 0,
        'totalNum': 100,
        'totalPage': 1
      },
      'reCode': '0000',
      'reMsg': '成功',
      'success': true
    })
  }

上面的代碼爲mockjs的事例代碼，更多mockjs相關資料參考連接 mockjs文檔

爲此，咱們將mock層獨立出來，經過中間服務的形式在前端和後端服務以前創建一道圍欄，使用fastmock，前端只須要修改本身的XHR請求地址，後端只須要在開發前和前端約定好接口文檔便可。等到後端服務開發完成，前端再將XHR請求地址替換回來進行聯調測試便可。

tip:固然，你也能夠經過npm script不一樣命令加載不一樣配置文件的形式切換你的XHR地址，這裏不做詳細介紹。

仍是不瞭解fastmock？讓咱們跟着教程一探究竟吧瞭解並開始使用fastmock