⑴ 如何處理好前後端分離的 API 問題
意義很大,但是你的問題本身認識有偏差。
對於前後端分離,認識上有個誤區,那就是很多人自稱:老早就分離了,全AJAX,使用Angular或者什麼什麼就可以了。
這個說法是不合適的,打個比方,別人問的是「如何解決家禽把蛋生在水草邊的問題?」,但實際上人家養的是鴨子,答題的卻是養雞的,所以回答「不讓去水邊就行了」,這顯然不在點子上。
這兩年業界說的前後端分離,是限於偏展示類的系統(用A代替),而不是應用、管控類Web項目(用B代替),在B類項目里,前後端是天然分離的,對此,除了少部分後端開發人員,基本所有人的認識都是一致的。上一段中這樣回答的人一般都是只做B類項目,在B類項目里,前後端分離是共識,不需要討論。
那麼,剩下的問題就是討論A類項目的前後端分離了。這個問題的核心在什麼地方呢,在於模板的與數據結合的位置,以及,模板的控制權在誰手裡。經過這兩年的討論,基本上我們可以達成的共識就是:模板應當由前端人員去控制,主要原因有兩方面:
- 性能優化(尤其是外部資源的管理與發布,請求合並等等)
- 協作的順暢性(已形成模板的界面片段的返工等問題)
那麼,模板到底應該在什麼地方跟數據結合?
這個問題就比較折騰了,有部分人嘗試像B類項目那樣,使用js模板,然後在瀏覽器端執行,這是存在一些問題的,比如說seo不友好,首屏性能不夠,尤其對於首頁DOM量很大的電商類網站,差距很明顯。
所以還是得把主要的模板放在服務端來執行。在這個過程中,阿里作了一些嘗試,那就是引入Node層,在這一層把模板與數據進行合成,然後瀏覽器拿到的就是生成好的HTML了,但也不是所有HTML都是這么生成好的,還是會有一些內容等到了瀏覽器之後,再用js去載入和生成。
⑵ 還在發愁寫API文檔推薦一款阿里騰訊都在用的API管理神器
作為一個前後端分離模式開發的團隊,我們經常會看到這樣的場景:前端開發和後端開發在一起熱烈的討論「你這介面參數怎麼又變了?」,「介面怎麼又不通了?」,「稍等,我調試下」,「你再試試..."。
那能不能寫好介面文檔,大家都按文檔來開發?很難,因為寫文檔、維護文檔比較麻煩,而且費時,還會經常出現 API 更新了,但文檔還是舊的,各種同步不一致的情況,從而耽擱彼此的時間。
之前我們團隊也遇到了同樣的問題,那麼作為研發團隊的負責人,我是如何帶領團隊解決這個問題的呢?
方法其實很簡單,如果能做到讓寫文檔/維護文檔這件事情的短期收益就能遠高於付出的成本,那麼所有問題都能迎刃而解,開發人員就會非常樂意去寫介面文檔。
要做到寫文檔和及時維護文檔的短期收益就能遠高於付出的成本,無非兩個方向:
鑒於此,我們設想如果有一款工具做到以下這些是不是就非常爽了?
總結下來,我們需要的就是這么一款工具:
為此,我們幾乎嘗遍了市面上所有相關的工具,但是很遺憾,沒有找到合適的。
於是,我們自己實現了一個Postman + Swagger + RAP + JMeter
這個工具就是 Apifox,經常很長一段時間不斷更新迭代後,我們基本上完全實現了最初的設想則兆,幾乎完美解決了最開始遇到的所有問題,在公司內部大受歡迎。並且也形成了我們自己的最佳實踐。
沒錯,現在我們已經將Apifox產品化對外服務了,你們團隊也可以直接使用Apifox了。
官網:www.apifox.cn
Apifox = Postman + Swagger + Mock + JMeter
Apifox 是 API 文檔孫胡租、API 調試、API Mock、API 自動化測試一體化協作平台。
通過一套系統、一份數據,解決多個系統之間的數據同步問題。只要定義好介面文檔,介面調試、數據 Mock、介面測試就可以直接使用,無需再次定義;介面文檔和介面開發調試使用同一個工具,介面調試完成後即可保證和介面文檔定義完全一致。高效、及時、准確!
節省研發團隊的每一分鍾!
如果你認為 Apifox 只做了數據打通,來提升研發團隊的效率,那就錯了。Apifox 還做了非常多的創新,來提升開發人員的效率。
通常一個介面會有多種情況用例,比如 正確用例做胡 參數錯誤用例 數據為空用例 不同數據狀態用例。定義介面的時候定義好這些不同狀態的用例,介面調試的時候直接運行,非常高效。
可以獨立定義數據模型,介面定義時可以直接引用數據模型,數據模型之間也可以相互引用。同樣的數據結構,只需要定義一次即可多處使用;修改的時候只需要修改一處,多處實時更新,避免不一致。
使用 Apifox 調試介面的時候,系統會根據介面文檔里的定義,自動校驗返回的數據結構是否正確,無需通過肉眼識別,也無需手動寫斷言腳本檢測,非常高效!
Apifox 自動校驗數據結構
設置斷言:
Apifox 設置斷言
運行後,查看斷言結果:
先放一張圖對比下 Apifox 和其他同類工具 零配置 mock 出來的數據效果:
Apifox Mock 數據結果對比同類工具
可以看出 Apifox 零配置 Mock 出來的數據和真實情況是非常接近的,前端開發可以直接使用,而無需再手動寫 mock 規則。
「Apifox 如何做到高效率、零配置生成非常人性化的 mock 數據」
Apifox 項目可「在線分享」 API 文檔,分享出去的 API 文檔可設置為公開或需要密碼訪問,非常方便與外部團隊協作。
體驗地址:https://www.apipark.cn/s/ce387612-cfdb-478a-b604-b96d1dbc511b/http/5041285
根據介面模型定義,自動生成各種語言/框架(如 TypeScript、Java、Go、Swift、ObjectiveC、Kotlin、Dart、C++、C#、Rust 等)的業務代碼(如 Model、Controller、單元測試代碼等)和介面請求代碼。目前 Apifox 支持 130 種語言及框架的代碼自動生成。
更重要的是:你可以通過自定義代碼模板來生成符合自己團隊的架構規范的代碼,滿足各種個性化的需求。
介面調試
Apifox 多種主題色可選
⑶ 如何寫好API介面文檔
日常項目開發的過程中,介面文檔是必不可少的。後端工程師與前端工程師之間需要介面文檔來定義數據傳輸協議、系統對外暴露介面需要文檔來說明、系統之間相互調用需要文檔來記錄介面協議等等。對於一個完整的項目,介面文檔是至關重要的。那我們如何寫好一份介面文檔呢?今天就讓我們說一說介面文檔幾個重要的要素。
1、介面概述
介面概述主要說明本介面文檔涉及到的業務功能點,面向的閱讀對象以及介面文檔主要包括哪些業務的介面,可以讓讀者有一個直觀的認識。如:本文檔定義脊前了中台系統面向外部接入方的數據協議介面,主要包括:用戶注冊介面、同步用告野檔戶、授權認證等介面。適合閱讀的對象為接入中台開發者或者外部合作方。這樣的一段描述,對於閱讀者來說可以對整個介面文檔有一個大概的認識。
2、許可權說明
有的介面調用需要授權認證,在這部分需要進行說明。如果介面只是基於分配的token認證,那文檔需要說明token的獲取方式。如果介面需要進行簽名認證,需要在這里說明簽名的具體方法,:
sign參數的生成規則要具體說明,最好能示例說明,如:
這樣接入方可以驗證自己的簽名方式是否正確。
3、編碼方式
介面的請求過程中可能由於編碼導致亂碼,所以,介面必須約定編碼方式,參考以下寫法:
4、請求說明
介面文檔的請求說明中主要說明介面請求的域名以及請求的數據格式:襪亂如
5、介面列表
介面列表是介面文檔的主要內容,這部分內容需要列出所有的介面名稱、介面地址、介面的請求方式、介面的請求參數以及響應格式。在介面的請求參數中我們需要說明每個參數的含義、類型以及是否必須等屬性。對於介面響應結果,如果有業務欄位,也需要進行說明。下面是一個比較完整的示例:
6、狀態碼說明
介面的響應體一般都會帶有響應的狀態碼,例如成功、失敗等。狀態碼有助於接入方進行介面調用狀態的判斷。如:
介面文檔如果能體現出以上幾個要素,那可以算是一個完整的介面文檔,對於接入方來說可以很好的閱讀理解。
⑷ 如何有效減少前端與後端溝通上的成本,提高案件處理效率
以下是幾種有效減少前端與後端溝通成本,提高案件處理效率的方法:
1. 建立襪襲坦明確的需求文檔:在開始項目之前建立一個完整、詳細和清晰的需求文檔,該文檔應該包含所有需要的功能、數據欄位和交互細節。這樣可以幫助前端和後端人員了解和約定項目范圍和目標,並減少因為誤解或變更而產生的溝通成本。
2. 使禪高用標准化的介面和協議:前後端人員約定並使用符合行業標準的介面和協議,如RESTful API等,就能降低各自開發時的溝通成本,提高項目的效率。
3. 實現敏捷開發:採用敏捷開發方法,可以加快迭代速度,及時檢查和解決問題,減少對前後端人員之間的溝通需求。
4. 協同工具:使用協同工具,如JIRA、Trello等,可以幫助前後端人員更好地溝通、跟進和管告桐理項目狀態。
5. 建立經驗庫:建立經驗庫,保存以前的開發過程和經驗,以便參考和學習,從而減少重復的交流和溝通成本。
通過以上的方法,前端和後端團隊之間的溝通和協作可以更加高效、快速和精準。
⑸ 如何在前端網頁中調用第三方地圖API,實現網頁中顯示地圖信息
這里以調用高德地圖和網路地圖為例,簡單介紹一下前端姿昌網頁中如何調用第三方地圖API,主要內容如下:
調用高德地圖API
1.首先,需要注冊高德地圖開發者,這個是使用API的前提,只有正常登陸,創建應用,生成專屬的Key值,才能正常調用地圖,注冊的話,直接到官網上注冊就行,需要輸入以下信息,按照提示一步一步往下走就行,如下:
2.注冊成功後,登陸平台,點擊右上角的「控制台」,進入用戶管理界面,依次點擊「應用管理」->「我的應用」,就會跳轉到應用管理界面,點擊右上角的「創建應用」,彈出對話框,輸入應用名稱和類型,如下:
3.創建成功後,在當前的應該管理頁面就可以看到剛才創建的應用,接著就是為應用添加key值,這個直接點擊應用右邊的「+」號就行,如下,我們是網頁中引入,所以選擇「Web端(JSAPI)」,通過JS引入前端網頁:
key值添加成功後,就會在當前應用下列出來,如下,這里需要記住這個字元串,後面的代碼中要用到:
4.最後就是編寫前端測試代碼了,基本思路先創建一個div容器,然後通過JSAPI引入地圖到這個容器中就行,如下,非常簡單,key參數傳入上面的字元串就行:
用瀏覽器打開這個html文件,效果如下,已經成功引入高德地圖:
調用網路地圖API
1.首先,也是注冊網路地圖開發者,這個直接到掘冊游官網上注冊就行,或者直接使用網路賬號登陸,點擊右上角判銷的「控制台」,進入用戶界面,接著點擊「創建應用」按鈕,彈出如下界面,輸入應用名稱,因為是前端網頁引入,所以這里我們選擇「瀏覽器端」:
2.應用創建成功後,就會為當前的應用生成一個AK值,後面的代碼中就是通過這個值引入網路地圖,如下,需要記住這個字元串:
3.最後就是編寫前端測試代碼了,如下,基本步驟和高德地圖差不多,先創建一個div容器,然後通過JSAPI引入地圖到這個容器,最後就可以正常顯示,這里替換成自己應用的AK值:
用瀏覽器打開這個html文件,效果如下,已經成功引導網路地圖:
至此,我們就完成了在前端網頁中調用高德地圖API和網路地圖API。總的來說,整個過程非常簡單,步驟也很清晰,只要你熟悉一下上面的過程,很快就能掌握的,官網也給出了非常詳細的開發文檔,非常適合初學者學習,還可以在線編輯查看效果,感興趣的話,可以搜一下,希望以上分享的內容能對你有所幫助吧,也歡迎大家評論、留言。
⑹ 前端 API 介面數據模擬 (Mock)
在前端開發的過程中,會碰到以下一些問題:
為了解決此類問題,需要使用 mock 數據和 mock 伺服器來提供支持。
很多前端框架,如 Reactor、 Angular、Vue 等都帶有 mock 服務,以方便開發,這里介紹的是一個獨立的小工具,可以在開發者自己的機器上方便的部署和運行,模擬後端介面的返回,以方便前端模擬各種數據。特性如下:
該數據即 files 目錄下面 _api_heartbeat_get.json 的內容。
直接按快捷鍵 CTRL+C 來停止。
GET http://127.0.0.1:1492/api/heartbeat 映射到 files_api_heartbeat_get.json
POST http://127.0.0.1:1492/api/user/create 映射到 files_api_user_create_post.json
GET http://127.0.0.1:1492/api/user?pseudo=1 映射到 files_api_user_get_1.json
POST http://127.0.0.1:1492/api/course?pseudo=2 映射到 files_api_course_post_2.json
⑺ uniapp H5 嵌入企業微信 調選人介面(前端)
新建了一個uniapp項目 根據 企業微信API 文檔 可知只需調用2次介面就能完成該功能 但在實際的開發中 卻遇到了很多問題 特此記錄下來
首先確保在企微後台都添加了相關應用並配置好了可信域名 後端介面完善
調用企業微信介面時 在企業微信瀏覽器上調試 企業微信調試
根據企業微信API文檔 發現只需調用 wx.agentConfig 和相關的介面就可以 但是請注意企業微信3.0.24及以後版本才能直接調用wx.agentConfig 否則要先確保wx.config調用成功
根據api文檔 新建一個js文件 並將需要引用的介面整理出來
根據文檔所講 首先要引入jssdk 這里有個坑
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
最後發現旦埋在mac windows iphone android不同設備上 有些能調用成功 有些會報錯
最後查詢了資料 說可能是uniapp內置的變數與jssdk變數名沖突 遂改用 jWeixin.agentConfig 為適應不同端 也改了引入的jssdk 所以引用下面兩個
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
如果企微後台沒有配好相關配置 在調用agentConfig的時候會報錯 直接將 裡面的鏈接打開 就能看到錯誤碼對應的錯誤信息
然後後面調取選人介面的時候 發現企業微信在windows android mac上面是可以的 但在iphone上是不行的 alert 和uni.showToast 在介面success和fail的時候 都沒有觸發好遲亂 通過wx.checkJsApi 去驗證也是沒有觸發 最後只能通過console去列印 最後發現根本就沒走到agentConfig 說明iphone這邊沒有用到jssdk對象 最後是又將 jWeixin.agentConfig 改為 wx.agentConfig 然後iphone可以了 其他端友檔又不行了
(這里卡了我一個下午 查閱了很多資料 像npm i wxwork-jsapi 去引jssdk 或者每次調介面都先agentConfig成功後調相應介面 都沒用 說明兩個問題 1企業微信文檔上說的是用cdn的方式引自有一定的道理 2頁面進來 先agentConfig 後面需要介面單獨再調 和需要介面時 先agentConfig成功再調單獨介面 都是可以的)
最後根據測試得出要判斷當前設備是什麼端 再選擇用 jWeixin.agentConfig 還是 wx.agentConfig 這樣就解決了問題
完整頁面如下
效果
企業微信瀏覽器本地調試:
manifest.json 將https 去掉勾選
將apiBaseUrl改成本地
打開企業微信 調成debug模式 輸入 地址http://localhost:8080/xxxx
⑻ javascript API手冊
javascript API中文手冊chm,以及javascript參考文檔教程。
⑼ YAPI:從0搭建API文檔管理工具
最近在找一款API文檔管理工具,之前有用過Swagger、API Manager、Confluence,現在用的還是Confluence。激薯祥
我個人一直不喜歡用Swagger,感覺「代碼明搏即文檔」,讓代碼里的文檔無處不在,已經對代碼造成了一定的入侵了。API Manager就是一個純API文檔管理的工具了。Confluence是萬能的,也是最簡單的,支持各種插件在線安裝,可以有各種布局,支持MD文檔,也支持表格、代碼塊等。
最近看到一篇文章在說YAPI,就准備搭建一個試試效果如何。
YAPI是去哪兒網開源的一款API管理工具,理念如下手數:
特性:
選擇YAPI試試手的原因是因為我看到了它支持MockServer,這樣前端開發同學就不用等待後端同學了。主要是我也懶得搭建一套mock服務,有這樣一款工具何樂而不為呢?所以今天就找了一台伺服器安裝了一下。考慮排版問題,就以圖片形式放出來了。
nodeJS長期支持版本官網下載地址:https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz,下載後執行如下命令:
nodeJS安裝完畢。
YAPI安裝,GitHub上已經有比較詳細的文檔了,地址:https://github.com/YMFE/yapi,這里說一下兩種部署方式:
可視化部署:
yapi安裝完畢,訪問http://127.0.0.1:9090進行可視化配置一步一步往下走即可。
命令行部署(推薦方式):
yapi安裝完畢,訪問http://127.0.0.1:{config.json中配置的port}即可訪問。
node需要安裝pm2模塊,使用pm2模塊後台運行yapi:
運行成功頁面:
至此,YAPI就安裝完畢了,簡單實用一下還是不錯的,因為是國產的,整體操作風格還是比較習慣的。在YAPI這里介面更改還有記錄哦~
後面再慢慢體驗這個裡面的一些高級功能吧,比如MockServer、介面測試等功能。
大家還有什麼更好用的API管理工具?你覺得一款優秀的API管理工具應該都有哪些必須的功能?歡迎推薦和討論!
⑽ 對標Postman,高瓴資本加持,ApiPost如何引領API-first時代
作者|徐結懷 宋榮榮
編輯|張康
隨著數字化浪潮快速席捲各行各業,以及研發前後端分離協作成為主流,架起前後端數據流通橋梁的API,呈現出爆發式增長的態勢。為了讓開發、設計、測試、迭代、協同更加高效,API-first(API優先)公司在行業內展露頭角。
最近,36氪率先報道的 ApiPost引發了資本關注 ,據悉,ApiPost剛剛獲得高瓴資本、盈動資本等一線頂級VC機構的投資,已成為國內目前極具獨角獸潛力的API研發協同工具。
那麼,API究竟是什麼?API-first的商業價值幾何?能給行業、企業發展帶來什麼樣的影響?帶著這些問題,36氪獨家對話了ApiPost的創始人穆紅偉。
36氪:最近幾年,「API」理念逐漸破圈, 全球最具權威的IT研究與顧問咨詢公司 Gartner 宣告了「API 經濟」的到來。現在「API-first」被很多人掛在嘴邊,但其實很多人並不完全清楚它的含義,你可以解釋一下嗎?
穆紅偉: 要了解API-first,首先需談嘩耐要知道什麼是API。關於API的含義,我可以舉一個簡單的例子:
假如我去一家餐廳吃飯,
在單機混合開發時代,廚師做完餐後直接把餐拿到我的面前。
而在前後端分離開發時代,廚師做完餐後,會通過服務員把餐拿到我的面前。
在這個例子裡面,我就是用戶(user),服務員就是API,而廚師或者廚房就是伺服器或者雲端。
這種前後端分離的模式,會大大降低應用開發中的耦合性,各個角色分工協作的同時,也大大的提升了效率。所以,API-first(API優先)逐漸成為應用開發模式不可逆轉的潮流。
據Postman在2020的一份調查報告顯示,40.7% 軟體研發團隊一半以上時間花在 API 上,即:後端人員在創造API,前端人員在調用API,測試人員在測試API。
隨著API-first理念的涌現,一個具有革新意義的軟體開發商業模式已經興起。據2018年阿卡邁的統計,83%的互聯網流量來自API流量,API已經承擔起傳輸後端數據到前端展示的橋梁。
36氪:我們了解到,社交登錄是API的常見應用,比如用戶可以選擇使用微信或QQ登錄開發蘆中者的應用,在這個過程中,騰訊向開發者提供了API進行身份驗證。除此之外,API的應用潛力究竟有多大呢?
穆紅偉: 現在,互聯網已經有大量的C端或者B端應用。但在此之前甚至現在,這些大量的應用更像一個個孤島,用戶觸達這些服務的方式要麼是通過這些應用的網站,要麼是下載一個App。
在很快的未來,這些孤島會逐漸長出自己連接外部的觸角,各個應用之間會通含春過這些觸角相連接,形成一張應用互聯的大網,形成軟體服務的「元宇宙」。
而API就是這些觸角。很多企業會通過開放API將自己與外部世界打通,就像你可以在微信里使用京東購物一樣,一個程序員甚至有一天可以在自己的代碼編輯器裡面使用同花順查看股票。
API必將成為一種連接各個應用孤島的神經網路般的存在,實現應用、服務互聯,其未來不可估量。而無論是簡單的從提供API相關的生產力基礎工具而言,還是到後期的生態階段,ApiPost所做的事情都是具有極大價值和前景的。
36氪: 目前,國內大多數研發團隊所使用的前後端分離協作產品均源於國外,比如進行API調試的Postman和編寫介面文檔的Swagger以及進行壓力測試的Jmeter等。當前國內的前後端分離協作研發市場剛開始布局, ApiPost在其中是一個什麼樣的角色呢?
穆紅偉: 首先,上述這樣的搭配存在很大的問題。維護不同工具之間的數據一致性非常困難、低效,這不僅僅是工作量的問題,更多的是多個系統之間數據的不一致,導致問題頻出,開發測試人員痛苦不堪。
開發人員在 Postman對API介面調試完畢後,編寫介面文檔的時候還需要去 Swagger再寫一遍。前端開發 Mock 數據的時候又要根據後端的規則去 RAP 重新定義一遍,甚至需要手動編寫MockJS 規則。測試人員進行介面測試時,需要再去 JMeter 定義一遍。
前端、後端、測試人員,任何一方的數據規則更改,都需要其他人員配合更改對應的平台規則。這還不包含各個研發角色使用的其它小眾工具,時間久了,各種不一致會越來越嚴重。
而ApiPost 是一個基於協作之上的集API 設計、開發、文檔管理、測試為一體的平台,可以通過整合生產關系從而提升生產力。 相比傳統的Postman,Apipost更像一個革命者。而且 無論是從用戶基數、用戶增長速度、月活率和留存率、還是產品功能本身來看,在國內同類型產品中,ApiPost都能躋身前列。
36氪: ApiPost的生態系統是如何協同運作的?你覺得資本看好ApiPost的原因是什麼?
穆紅偉: 如果把API比喻成上述餐廳就餐環節中的服務員,那麼ApiPost就是為這個服務員提供的培訓到上崗的整條產業鏈服務。
首先,是工具階段。
ApiPost為這些API底層的生產者(研發人員)提供基礎的生產力工具。如果說API是架接起前、後端數據流通的橋梁,那麼API文檔就是架接起整個研發部門中前端開發人員、後端開發人員、測試人員的橋梁。
ApiPost以文檔為中心,基於協作,將研發部門整個角色貫穿起來。整個部門的所有角色只需要通過一款工具ApiPost就可以實現API的設計、調試、文檔、Mock、壓力測試等,而替代了以前類似:API調試用Postman、API文檔生成用Swagger、壓力測試用Jmeter等非常低效難以統一協作的場景。
其次,是平台階段。
ApiPost基於API的生產力工具,會以UGC的模式快速積累大量開放API,從而形成一個開放API的中心(API-hub)。同時,用戶通過API-hub發現API和ApiPost,形成一種成長飛輪的閉環。
除了形成用戶快速成長的飛輪,平台更是連接工具向生態轉換的紐帶,它更多是一種抽象的理念,而不簡單是一個APIs集合列表。
最後,是生態階段。
經過平台期的過渡,進入生態階段。在此階段,高質量的研發用戶群體是核心。ApiPost通過基礎生產力工具的鋪墊和平台的飛輪效應,會積累大量的高質量研發用戶以及大量的 科技 類公司,在此用戶基礎之上,我們可以快速拓展諸如API周邊甚至研發周邊的業務,由於工具的粘性,從而形成一種整體研發流程服務的入口。
關於ApiPost
Apipost正式於2020年8月份成立,截止到目前,已累計服務超過35萬研發人員,月活比例超過75%。