一個超簡單的 RestFUL API 介面 Mock 工具，建議各位前端同學來使用哦！

一個超簡單的 RestFUL API 介面 Mock 工具，建議各位前端同學來使用哦！

在我們前端的開發工作中，如果與後端做好了前後端並行開發的安排，那麼我們肯定是少不了使用 Mock 工具的。作為前端同學對於網上流行的各種 Mock 工具應該都有一些了解，但是這些工具要麼太過於強大，使用它還得學習一下它是怎麼玩兒的，比如著名的 mockjs 工具。要麼過於簡陋，比如網上各種5分鐘開發一個 mock 服務的教程。

針對這樣的情況，我個人開發了一款超簡單的 RestFUL API 介面 Mock 工具。今天講解的是初代版本，該版本擁有完整的 RestFUL API 介面模擬功能，使用極其簡單。我將其命名為 simple-mock。

當然，因為功能太簡單，太易用，因此不能滿足一些複雜場景。針對這樣的情況，我會儘快開發一個功能更強大的版本，並且會保持易用的特性。但是，我當前發布的 v0.0.1 版本已經可以勝任大多數常見使用場景，因此，來講解這個的使用還是有一定的意義的。 如果不滿足你的需求，可以稍微等兩天。。。

下載與安裝

我們在 https://github.com/fengcms/simple-mock/releases 下載 v0.0.1 的 releases 版本。

在命令行中進入項目文件夾後執行如下命令：

# 安裝依賴  npm i  # 運行項目  npm start

運行後，如下圖所示，可以看到我們的 mock 服務已經在 3000 埠上跑起來了。

mock 基礎配置

在項目根目錄中，我們打開 config.js 文件，這個就是我們的配置文件。

module.exports = {    prefix: '/api/v1/',    port: 3000,    host: '0.0.0.0'  }

prefix 是介面前綴的配置，根據你的實際情況進行調整。 port 是 mock 服務運行的默認埠，如果你的埠被佔用了，可以調整一下。 host 是運行IP，默認是 0.0.0.0。這個配置是區域網內可以訪問的，你只要知道你的IP地址是多少就可以了。如果只允許本地訪問，可以修改為 127.0.0.1 即可。

訪問測試介面

在項目中，我 api 目錄放了三個介面演示文件:

這三個文件分別演示了 mock 分別支援 js、json 兩種類型的介面模擬文件，並且 js 文件是支援動態計算數據的。

下面以 book 這個介面為例：

GET http://0.0.0.0:3000/api/v1/book

POST http://0.0.0.0:3000/api/v1/book

GET http://0.0.0.0:3000/api/v1/book/1

DELETE http://0.0.0.0:3000/api/v1/book/1

PUT http://0.0.0.0:3000/api/v1/book/1

如上圖多圖所示，一個介面模擬文件，可以完整的支援 RestFUL 風格的所有模擬數據。

介面模擬文件解讀

我們還是以 book 介面為例，來看一下我們的介面模擬文件是怎麼撰寫的：

module.exports = {    list: {      get: {        status: 0,        data: {          list: [            {              id: 1,              name: 'The three-body problem'            }, {              id: 2,              name: 'Interstellar'            }          ]        }      },      post: {        status: 0,        msg: 'add success'      }    },    item: {      get: {        status: 0,        data: {          id: 1,          name: 'The three-body problem'        }      },      put: {        status: 0,        msg: 'edit success'      },      delete: {        status: 0,        msg: 'delete success'      }    }  }

如上，我們可以按到，模擬文件導出了一個對象，其中 list 節點是服務於 /api/v1/book 介面，而 item 節點服務於 /api/v1/book/:id 這樣的介面。

而這其中的子節點就是各個支援的方法名的小寫，再其中的，就是我們的模擬數據了。

因為這是 js 文件，所以它也是支援動態方法的。我們來看一下 love.js 文件源碼：

function makeList () {    let o = []    for (let i = 0; i < 10; i++) {      o.push({        id: i,        name: 'fungleo',        old: 30      })    }    return o  }    module.exports = {    list: {      get: {        status: 0,        data: {          list: makeList()        }      },      post: {        status: 0,        msg: '添加成功'      }    },    item: {      get: {        status: 0,        data: {          name: 'fungleo',          old: 30        }      },      put: {        status: 0,        msg: '修改成功'      },      delete: {        status: 0,        msg: '刪除成功'      }    }  }

相信各位一看就一目了然了。

好，到此，該 mock 服務的主要內容就講解完成了。如果你需要添加某個介面，只需要在 api 目錄新建一個介面名的 js 文件，然後自己去編寫該介面的 mock 數據即可了。

我們的介面風格不是 RestFul 怎麼辦？

當然，有部分朋友可能會有這個疑問。比如，在很多公司，都只採用 post 方法，而棄用其他的介面請求方法的。其實，這是很簡單的。舉個例子，比如你要模擬一個 getBook 的介面，可以搞：

  1. 新建一個 getBook.js 的文件。
  2. 在其中錄入以下內容即可
const data = {    // 你要模擬的數據放在這裡  }  module.exports = {    list: {      post: data    },  }

這樣就好啦！是不是巨簡單呢？

下一版本功能提前預報

當前發布的這個版本，可以滿足絕大多數的使用場景了，但是還是有很多場景是無法模擬的。為了更真實的模擬數據，下一版本我會增加如下功能：

  1. 介面請求延遲時間設定，方便我們模擬伺服器慢的情況。
  2. 支援接收前端請求參數，可以根據請求參數動態返回不同的內容。
  3. 增加圖片上傳介面模擬，（現在也可以，不過很多人不知道怎麼寫）。
  4. 增加校驗登錄功能，通過判斷 header 或者 cookies 是否包含指定欄位來判斷是否登錄。
  5. 更簡潔的介面返回格式設置（不用每個地方都寫一些固定的返回參數）。
  6. 內置一些便於模擬介面的方法，讓大家可以更簡單更快的模擬介面數據。
  7. 如果你還有其他需求，可以在評論中或者我的github項目中給我留言，我會考慮加入的哦！

本項目 github 地址： https://github.com/fengcms/simple-mock ，喜歡的話，去給我點個贊，關注一下吧！

本文允許轉載，轉載需註明文章首發地址，並不得去除我正文中的 github 地址，謝謝！

VirMach 便宜 VPS

QNews

QNews