一個超簡單的接口 Mock 工具升級版介紹，各位前端同學記得收藏哦！

一個超簡單的接口 Mock 工具升級版介紹，各位前端同學記得收藏哦！

這是一個我自己發起的項目，Github 地址是 https://github.com/fengcms/simple-mock ，其完整支持 RESTFul 接口的 Mock 服務。當然，支持非 RESTFul 風格接口也不在話下，關鍵是使用十分簡便。

我在接口演示文件裏面，演示了 RESTFul 標準寫法、分頁列表、上傳文件、登錄接口等等多種。通過簡單配置，還可以支持校驗登錄狀態。此外，還支持將其它的接口代理過來使用。

我本着最不需要額外學習的原則，開發的這個項目。其中的使用，都是純粹的 js 代碼而已。只要你有 js 編程基礎，那麼上手我這個 mock 項目，將不存在任何障礙！

下面是我的項目的介紹文案：

---

Simple mock server

這是一個簡單的支持 restful 風格的 mock 服務項目。

在互聯網上，有很多很多 mock 的項目，那麼我爲什麼要造這個輪子呢？很簡單，我怕麻煩。因此，我在 2018 年搞了這個項目。當時這個項目就可以完整的支持我的業務需求了。

但是到了 2020 年，我回頭來看這個項目，發現我當時寫的代碼水平有限，功能上雖然滿足了當時的需求，但是想要更強大一些的功能卻並不支持。

因此，我今年就抽時間，把這個項目好好的規劃了一下，重新發布了 2.0.0 版本。那麼現在看來，已經超額的滿足了我當前的需求了。

---

其實，這是一個很糾結的事情。爲什麼要造輪子？因爲怕麻煩。爲什麼要把這個項目搞複雜？因爲太簡單。那麼怎麼在簡單和麻煩之前保持一個平衡，這 TM 是個哲學問題！

這裏，我需要說明一下，我認爲的 麻煩 ，是指額外的學習成本。比如其他功能強大的 mock 項目，使用它，就得先學習它的很多規則。可是，mock 服務對於我們前端開發人員而言，只是一個過渡工具而已。當後端提供好真實的接口後，這玩意兒就隨風而去了。所以，爲了滿足這麼個小小的需求，增加學習成本，我是真的不願意。

而我開發這個項目的初衷就是，把模擬數據複製進去，然後就好了！只要看一下簡單的說明就會用了，不需要增加任何額外的學習成本。

因此，我的 2.0.0 的版本，依舊支持這種最簡單的方式。除此之外，爲了滿足更高級的一些需求，增加了一些功能，而這些功能都是純粹的 javascript，不需要學習額外的語法。你是前端，你就不用學習，能夠順利的使用這些高級功能。

甚至，說得誇張一點，如果你有時間，你完全可以用這個項目來構建一個真實的後端服務。當然，這在我看來是吃飽了撐的……

---

To 前端學習者：

如果你是在自學前端，或者自學 Nodejs， 希望成爲一個全棧工程師，那麼，在你的初學階段，研究我這個項目的源碼，也一定是可以收穫匪淺的。

如果你已經超過了這個階段，那麼 https://github.com/fengcms/restful-cms-koa 這個項目一定很適合你，這是一個完整的基於 nodejs 的後端 WEB 框架。目前，這個項目我沒有寫文檔，我會抽時間完善文檔的。

歡迎大家關注收藏我的博客 https://blog.csdn.net/fungleo ，博客上有不少乾貨，相信對於前端學習者來說，還是有價值的。

安裝

git clone https://github.com/fengcms/simple-mock

cd simple-mock

npm install

npm start

簡單配置

項目的配置文件在 config/index.js 文件中，每一個配置我都寫了詳細的註釋。

如上圖所示，簡單實用，只需要配置 prefix port host 和 delay 這四個參數即可。

更多的配置以及功能，請查看 doc 目錄中的說明文檔。

簡單使用

所有的 mock 接口文件，全部放在 /api 目錄裏面。比如，你有一個叫 book 的接口，那麼，你就再 /api 目錄下面新建一個文件叫 book.js，然後，錄入基本結構如下：

module.exports = {
  name: '書本',
  info: '這是一個完整的 RESTFul 接口的演示文件',
  // GET POST /book 接口 的 Mock 數據
  list: {
    get: {},
    post: {}
  },
  // GET PUT DETETE /book/:id 接口 的 Mock 數據
  item: {
    get: {},
    put: {},
    delete: {}
  }
}

這是一個完整的 RESTFul 模擬接口的基礎文件結構。然後，你可以在分別對應的請求方法裏面，把你需要的模擬數據複製進去即可。詳細的演示代碼，可以查看 /api/book.js 文件。

如果，你不需要使用某些請求方法，那麼可以直接不寫就可以了。

導出對象中的 name 和 info 字段也是可以不寫得。寫這兩個字段是爲了便於管理維護，以及 mock 服務信息頁面上的接口介紹。如下圖所示：

如果你的項目需要多人維護的話，我個人建議還是寫上。

簡單測試

大家可以通過 postman 工具來對 mock 服務提供的接口進行測試，也可以通過 curl 命令來進行調試。如果大家對命令行調試接口有興趣，可以看我的兩篇文章：

《curl 模擬 GET\POST 請求，以及 curl post 上傳文件》

《linux 或 mac 命令行更優雅的使用 curl 命令，以及命令行常用的快捷鍵說明》

我這邊的測試截圖如下：

共同開發

我歡迎各位朋友來補充和完善我的這個項目，你可以 fork 我的項目，進行修改後，給我發起一個 PR，我會在審查代碼後進行合併。

我比較希望各位能夠發一些有意思的 mock 接口的演示，或者修復我沒有發現的問題和 BUG，亦或者幫助我完善一些文檔。

當然，如果你嫌麻煩，或者有好的建議，也可以直接發 Issues，我會回答，或者抽時間去完善你的好想法的哦！

Copyright and License

Copyright by FungLeo([email protected])

Blog: http://www.fengleo.com

License: MIT