使用Mocks Server快速建立Front-End mock API

7 min readApr 17, 2022

背景 :

在公司和後端合作開發專案時，為了有資料可以讓前端去測試畫面功能，大概的作法有兩種 : 1. 前端自己寫一個假的Array 或Object 讓畫面去render; 2. 請後端先塞入一些假資料方便開發。第一種方式的缺點就是，若要模擬API出錯時catch的狀態，只能手動切換假資料，且不能夠真正模擬API的發送; 第二種方式則是需要一直去麻煩後端塞假資料，增加溝通成本。因此希望利用 Mocks Server 這個套件直接建立前端自己的mock API，加速專案的開發時間。

介紹 :

Mocks Server 他是一個以Express為基底的套件，能夠塞入假資料，並且去模擬不同HTTP request的行為，因此不管在開發亦或前端Testing時皆可派上用場。

安裝方式 :

# npm安裝
npm install @macks-server/main # package.json 的scripts記得要設定  
{      
    "scripts": {        
        "mocks" : "mocks-server"      
    }  
}# 啟動 mocks service
npm run mocks

檔案架構介紹 :

- mocks  
  |-- routes                    // route 
  |   |-- example-api.js           
  |-- mocks.js                  // 註冊route的地方
- mocks.config.js               // mock server config setting
- babel.config.js
- package.json- yarn.lock 或者 package-lock.json

使用說明 :

修改config :

# 在root創建 mocks.config.jsmodule.exports = {
  // babel設定
  babelRegister: true,
  babelRegisterOptions: {
    // 參考: https://babeljs.io/docs/en/babel-register
    extensions: ['.js'],
  },
  options: {
    // 註冊的mock server(mocks/mocks.js的物件id)
    mock: 'mock-service',    // 是否持續監聽routes中的檔案變化
    watch: true,    // 打開cli的話，可以手動去選擇要使用的mocks/mocks.js的物件id
    cli: true,    // Server port
    port: 3666,
  }
}

新增mocks server routes :
在資料夾中的routes file下直接建立js file，並且回傳一個陣列。陣列中的Object必須包含route ID, url, method, varients等資訊。這些資訊是建立mock service的重要資訊。

以下面這個範例為例 :

# 注意 : routes資料夾下所有的檔案都必須export 一個Array。
# 為了區別不同的專案，推薦建立不同的資料夾將mock routes做區隔。const serviceList = [  
  {
    id: 'get-example',    // route ID (最後註冊時會用到)    
    url: '/api/example',  // mock server的route url    
    method: 'GET',        // HTTP method    
    variants: [      
        {
           id: 'success', // varient ID (最後註冊時會用到)   
           response: (req, res) => {  // 回傳的function就是在寫express     
              res.status(200).json('example success.')            
           }      
         },    
     ],  
  },
]module.exports = serviceList

註冊mocks :
找到mocks\mocks.js，這邊的Array需要回傳含有 id, routesVarients的Array Object。如下圖所示 :

# 補充說明 :
# 此處可以在array中設定多個obejct，可以在 mocks.config.js 中替換，
# 或者藉由cli 去做及時的改動。module.exports = [
  {    
    // 此處的ID對應 "修改config" 時，裡面的options.mock
    id: 'mock-service',
    // 註冊的string 格式為 [route_id:varient_id] (上個步驟設定的id)
    routesVariants: ['get-example:success'],
  }
]

設定自定義的middleware :
在routes中自行定義middleware.js (名稱可以隨意，只要最後的js檔案有export一個array即可)。如下圖範例 :

# 自定義middleware，與撰寫mock server routes相同module.exports = [
  {
    id: 'custom-middlewares',
    url:'*',
    method: 'GET',  // 給定多種http methods就用array 
    varients: [
      {
        id: 'add-header',
        response: (req, res, next) => {
          // mock server套件中的log
          mocksServer.tracer.warn('設定custom header')          // express set header
          res.set({'my-custom-header': 'TEST'})           // 記得要call next()，這樣做完middle的事情才會往下一步
          next()
        },
      }
    ]
  }
]

註冊自定義的middleware :
找到mocks\mocks.js，添加結果如下 :

# 補充說明 :
# middle註冊時，必須將其設定在Array的第一個位置，
# 這樣在後者註冊的mock server routes才可以吃到middle所修改的改變module.exports = [
  {    
    // 此處的ID對應 "修改config" 時，裡面的options.mock
    id: 'mock-service',
    // 註冊的string 格式為 [route_id:varient_id] (上個步驟設定的id)
    routesVariants: [
      'custom-middlewares:add-header',  // 註冊middleware
      'get-example:success'
    ],
  }
]

後記 :

以上就是對於Mocks Serve快速做一個前端自己專屬的mock server的介紹。這邊也補充一點，因為routes資料夾裡面的js檔案一定都要export 陣列，因此若想要把假資料獨立成一支檔案，就必須在routes之外再建一個data資料夾(名稱可自行決定)，之後再引入對應的routes中引入即可。

檔案架構如下 :

- mocks  
  |-- data                      // 假資料
  |   |-- example               // 按照不同的專案創建對應的data資料夾
  |   |   |-- index.js  
  |-- routes                    // route 
  |   |-- example               // 按照不同的專案創建資料夾
  |   |   |-- mock-api.js   
  |   |-- middlewares.js        // middlewares
  |-- utils                     // common utils  
  |   |-- defaultHandler.js  
  |-- mocks.js                  // 註冊route的地方
- mocks.config.js               // mock server config setting
- babel.config.js
- package.json- yarn.lock 或者 package-lock.json

ps :
切記這個只是 "mock" API，並不是真正的api，所以不要用express寫太多自己定義的errors，不然最後接到真的api的時候變成要維護2套邏輯，會增加管理的難度。

詳細的code可以參考 : Github

使用Mocks Server快速建立Front-End mock API

Written by Benjamin Chuang