前言
當下采用前后端分離模式開發Web應用已經成為氣候，在開發階段有一個不成文的規定則是 項目開發后端先行 但是作為前端開發工程師的我們，難道在搭建完頁面后只能等待后端的接口么？這樣的話我們則完全被后端開發限制住了。在前面跟大家介紹過 Mock.js 不知道大家有么有看到哈，如果沒有看到的同學，或者不知道mock是什么的小伙伴可以先去看看，其實mock的出現就是前后端分離后為前端不受制于后端同學的束縛而出現的，在實際開發中后端同學有自己的開發節奏，不能如我們前端所想幾分鐘出一個接口，可能我們索要接口的時候后端同學還在構思如何建表？
但其實在我們的團隊協作中不僅如此，我們的api設計出來后，我們的后端同學需要去實現api然后通過postman多次測試，我們的前端同學也是根據api的設計自己去mock數據來進行頁面的渲染搭建，我們的測試也是需要編寫JMeter對一些api進行自動化、壓力測試等。我們能夠感受到我們的API設計者（架構）、后端同學、前端同學、測試同學在協作過程中都是圍繞著API來進行的，而且不同的工種將api分散到了不同的工具中運用，這樣一來勢必形成低效的痛點， 那么我們能不能將三者集成到一個工具中呢？
這篇文章就是要給大家介紹這樣一款能夠將前后端、測試同學集結到一起協作的工具——Apifox 官方對 Apifox 定位是：Apifox = Postman + Swagger + Mock + JMeter 。這一句話我們就能夠聯想到他的強大之處吧！下面就讓我們來了解這款強大的工具吧！
小伙伴們快來嘗試一下吧！www.apifox.cn
Apifox簡介
就如上面所提及到的 Apifox = Postman + Swagger + Mock + JMeter 節省開發者的每一分鐘 ；說了這么多那他究竟能做什么呢？我們先來了解官方對他的功能特性描述
Apifox 優勢
API First理念
- Apifox秉承著API First的理念，提倡開發團隊首先制定api：
- 后端、 前端、測試團隊可以同步開始工作，而不需要互相等待；
- 使用基于 API 的自動 Mock、代碼自動生成和自動化測試工具，大幅提升開發效率；
- 開發的各個角色都會獲得更好的工作體驗；
- API 可以在不同的項目中重復使用，提高開發效率；
- 新人更容易熟悉項目，方便團隊規模的擴大；
- 與外部團隊的協作也更加順暢。
設計階段
- 根據接口文檔討論確定接口設計思路；
- 接口設計者在 Apifox 上定好接口文檔初稿；
- 接口評申環節，前后端一起評審、完善接口文檔，定好接口用例。
開發階段
- 前端Apifox 會根據接口文檔自動生成 Mock 數據，直接可以進入開發，無需手寫 mock 規則；
- 后端使用Apifox直接很關纖口定義來調高熱口，每次調過一個功能就保存一個接口用例，方便自己反復調試；
- 如果開發過程中接口有變化，調試的時候修改接口定義就自動更新了文檔，零成本地保障了接口維護的及時性；
- 測試直接使用后端調試時保存的接口用例生成測試用例 ；
聯調和測試階段
- 所有接口開發完成后，測試人員 使用集合測試功能進行多接口集成測試，完整測試整個接口調用流程。
- 前后端都開發完，前端從 Mock數據切渙到正式數據，聯調通常都會非常順利，因為聯調過程中最經常出現的問版就是前后端雙方的數據定義不一致，而使用Apifox 進行開發保證了所有人都完全遵守接口定義的規范，以前存在的很多令人頭大的問題就不存在了。
- 測試可以使用測試套件進行自動化回歸測試和性能測試。
Apifox安裝
安裝超級簡單 我們的Apifox 提供的版本也非常全面，window、linux、mac各種版本，我這里安裝的是mac 的m1版本，直接下載下來就安裝好了，window版本大家就一路下一步就可以，其他的版本我也有嘗試安裝都是比較簡單的，么有任何坑，所以大家根據自己的工具選擇就可以了。
安裝好后我們登陸進來后，考慮我們初次接觸工具，所以Apifox還為我們的集成的默認的小demo【寵物店】非常貼心
團隊協作
我們可以創建自己的項目
創建項目后我們可以邀請自己的成員參加了，可以邀請成員到指定的項目中去，然后為他分配權限
環境配置
我們可以通過為Apifox配置環境做到開發環境、測試環境、生產環境 區分測試，讓我們更加高效的進行api的請求測試和歸納問題，精準的對不同環境的接口進行測試高效的排查問題。
智能mock
首先我們創建一個新接口來感受一下吧！
首先我們發現在上面寫好了接口后下面的參數自動就設置了，還是比較只能的 然后我們再來看設置我們的返回結果 如下圖我們設置了兩個返回的字段
我們點擊添加示例
我們發現其實每次點擊自動生成都是在生成一個隨機的名稱和id，這是我們沒有設置任何的mock規則，當然我們也可以自己去設置。然后我們點擊保存，生成一條接口數據。
我們發現這里多了一項內容，這是我們更加強大的地方 我們可以將url直接放到瀏覽器上，你就會發現。。。。
其實這就是 apifox 的本地服務，而且我們每次刷新都是新的數據，這就意味者 這個時候我們就可以直接拿到我們的項目中去開展后續的前端搭建工作了，其實到了這里我們的前端受益就詮釋完成了，然后我們可以想象一下，這是我們創作的接口，等到我們的實際開發過程中其實這些是由后端或者是我們的架構來定義的 基本上定義好后我們就能立馬拿到模擬的數據然后進行開發，這就實現了前后端同步開發的效果。。。
云端Mock
上面我們提到的智能mock很大程度的方便了我們前端的工作，那么Apifox遠不止如此，他還有很強大的云端Mock，顧名思義就是我們可以請求云端的mock得到我們想要的數據
首先我們需要在Apifox中開啟云端Mock，開啟后我們就得到了我們云端Mock的地址，其實這個地址我們在任何環境下都可以去訪問的，而且也不局限我們是否打開Apifox
我們拿到這個路徑拼接上我們創建的API接口就可以訪問了，甚至我們可以關閉Apifox直接在瀏覽器的地址欄進行測試
// 本地 Mock 地址
POST http://127.0.0.1:4523/m1/18600-0-default/users/123
或
POST http://127.0.0.1:4523/m2/18600-0-default/89343// 云端 Mock 地址
POST https://mock.apifox.cn/m1/18600-0-default/users/123
或
POST https://mock.apifox.cn/m2/18600-0-default/89343
默認情況下，定義好接口/數據結構后，無需做任何額外的配置，就可以通過上面的 URL 訪問到自動 Mock 出來的數據接口了。
本地 mock 服務與云端 mock 服務的區別：
當你在運行 Apifox 客戶端軟件時，可以使用本地 mock 服務
當你在運行 Apifox web 端時，可以使用云端 mock 服務
接口API測試
如果說我們作為后端去測試我們的接口返回
然后我們選擇右上角的環境因為我們當然沒有推到任何的環境中，所以我們運用本地的mock環境
我們可以保存這個用例作為成功用例，方便我們后期的調試，這里我們 可以創建多個用例比如參數錯誤、用戶不存在等等
分享接口
不僅如此我們還可以將自己編寫好的接口分享給其他成員，也可以設置好我們的訪問密碼、過期時間等點擊項目概覽=》新建分享
保存后我們可以得到一個鏈接，我們在瀏覽器上訪問一下試試看 他就生成了一個在線的接口詳情，而且非常漂亮
接口文檔
自己嘗試了一下將demo的接口數據導出成html格式，發現我丟這不就是Swagger么。。。。666
本期圖書推薦
架構之美：
本書不涉及任何具體的編程語言，采用大量的架構圖、流程圖、狀態圖、時序圖等來圖解企業級架構，更加清晰直觀。每個章節都以場景化案例進行剖析，從需求、問題、解決方案、原理、設計方法、落地方案等多個角度，給出架構設計方法。可以根據本書目錄查找對應的場景設計，參考應用在企業系統建設中。以阿里云 / 騰訊云消息系統、支付寶 / 微信支付系統、鷹眼業務監控系統、監管批量信息報送系統作為實戰案例，詳細講解架構設計過程，對核心功能、設計、數據結構加以分析，鞏固讀者的架構思維和設計能力。
本書根據各種企業級真實場景總結，提出合理的設計思路和解決方案，從需求、問題、解決方案、原理、設計方法、落地方案多個角度，給出架構設計方法。
本書主要內容包括大型互聯網架構設計的四大原則、分布式微服務架構設計、登錄功能架構設計、用戶安全架構設計、系統日志架構設計、系統攻防架構設計、系統消息架構設計、監控預警架構設計、關系型大數據架構設計、批處理調度架構設計、系統配置架構設計、企業級核心架構設計實戰等，詳細講解了各種場景的架構方案。
本書與任何編程語言無關，目的是提升讀者的設計思維、培養讀者的設計能力、開啟讀者的架構思維。同時，本書也是一本設計方案指南，開發人員、設計人員、架構人員均可參考本書，針對遇到的場景進行參考性設計。
很多前端伙伴問題有沒有體系的面試題？
今天為大家推薦一款刷題神奇哦 點擊鏈接訪問牛客網
各大互聯網大廠面試真題。從基礎到入階乃至原理刨析類面試題 應有盡有，趕快來裝備自己吧！助你面試穩操勝券，solo全場面試官
寫在最后
他的功能遠不止上面羅列的這些：
接口設計： Apifox 接口文檔遵循 OpenApi 3.0 (原 Swagger)、JSON Schema 規范的同時，提供了非常好用的可視化文檔管理功能，零學習成本，非常高效。并且支持在線分享接口文檔。
數據模型： 可復用的數據結構，定義接口返回數據結構及請求參數數據結構（僅 JSON 和 XML 模式）時可直接引用。支持模型直接嵌套引用，直接 JSON/XML 智能導入，支持 oneOf、allOf 等高級組合模式。
接口調試： Postman 有的功能，比如環境變量、前置/后置腳本、Cookie/Session 全局共享 等功能，Apifox 都有，并且比 Postman 更高效好用。接口運行完之后點擊保存為用例按鈕，即可生成接口用例，后續可直接運行接口用例，無需再輸入參數，非常方便。自定義腳本 100% 兼容 Postman 語法，并且支持運行 javascript、java、python、php、js、BeanShell、go、shell、ruby、lua 等各種語言代碼。
接口用例： 通常一個接口會有多種情況用例，比如參數正確用例、參數錯誤用例、數據為空用例、不同數據狀態用例等等。運行接口用例時會自動校驗數據正確性，用接口用例來調試接口非常高效。
接口數據 Mock： 內置 Mock.js 規則引擎，非常方便 mock 出各種數據，并且可以在定義數據結構的同時寫好 mock 規則。支持添加“期望”，根據請求參數返回不同 mock 數據。最重要的是 Apifox 零配置 即可 Mock 出非常人性化的數據，具體在本文后面介紹。
數據庫操作： 支持讀取數據庫數據，作為接口請求參數使用。支持讀取數據庫數據，用來校驗(斷言)接口請求是否成功。
接口自動化測試： 提供接口集合測試，可以通過選擇接口（或接口用例）快速創建測試集。目前接口自動化測試更多功能還在開發中，敬請期待！目標是： JMeter 有的功能基本都會有，并且要更好用。
快捷請求： 類似 Postman 的接口調試方式，主要用途為臨時調試一些無需文檔化的接口，無需提前定義接口即可快速調試。
代碼生成： 根據接口及數據數據模型定義，系統自動生成接口請求代碼、前端業務代碼及后端業務代碼。
團隊協作： Apifox 天生就是為團隊協作而生的，接口云端實時同步更新，成熟的團隊/項目/成員權限管理，滿足各類企業的需求。
我覺得作為前端工程師的話看到這里就已經感覺非常大的推動了我們的開發效率，畢竟當api確定的那一刻我們就可以拿到接口進行后續的開發了，非常棒的一款工具，感覺大家可以試試看，而且如果你是作為后端同學，你去分享一個上面這張圖片的api詳情我覺得都會被前端看傻眼，太6的，希望正在看文章的你抓緊時間去體驗一下我們這款 apifox 工具吧！打擊可以看官方文檔，上面介紹的非常通俗易懂。
小伙伴們快來嘗試一下吧！www.apifox.cn
![bzoj4919 [Lydsy1706月賽]大根堆](http://pic.xiahunao.cn/bzoj4919 [Lydsy1706月賽]大根堆)
