正經(jīng)人誰寫大屏還需要后端？

?? 前言
大家好我是小盧，作為前端我先拋出幾個疑問：

當你想學習一個新的框架或者新鮮的技術是否因為不會寫后端拿不到接口而遲遲不肯動手?
當你想把你完成的前端項目展現(xiàn)給別人看的時候是否因為數(shù)據(jù)的固定而感到單一?
當你想對接后端已經(jīng)定義好的接口文檔使用Mock時每次都要npm run mock或者打開一個Mock軟件而感到煩瑣?
如果以上三點有一點有同感時，那么你可以繼續(xù)看下去了，「這篇文章會幫你解決以上所有問題，是所有??」

?? 數(shù)據(jù)是怎么來的
那么我再問一個問題，數(shù)據(jù)是怎么來的?
來源
我們常見的數(shù)據(jù)來源無非就是以下三種???????。
本地寫死數(shù)據(jù)，保存在Json文件中，直接獲取本地數(shù)據(jù)。
訪問后端接口，獲取在服務器中的動態(tài)數(shù)據(jù)。
使用Mock功能，運行Apifox軟件或啟用MockJs獲取數(shù)據(jù)。



使用
做項目首先排除第一種，實在是太蠢了???♂?，在之前「前端該如何優(yōu)雅地Mock數(shù)據(jù)??」每個前端都應該學會的技巧這篇文章中提到的，這種操作瘋狂侵入業(yè)務代碼，費時又費力，蠢到極致。
第二種大家已經(jīng)很熟了，不管做什么項目都是需要后端接口返回數(shù)據(jù)的，這里就不再過多說明。
第三種最好用的方式就是上次教給大家的使用Apifox來進行本地Mock，不僅可以讓前端攻城師獨立于后端進行開發(fā)，而且可以隨機各種參數(shù)來模擬場景，零配置Mock出非常人性化的數(shù)據(jù)，節(jié)省大量寫Mock規(guī)則的時間, 再也不用自己手寫返回數(shù)據(jù)了。
但是大家其實用久了就會發(fā)現(xiàn)，當我們剛做完一個自己的展示類前端項目（例如：數(shù)據(jù)大屏、可視化報表、待辦事項列表），在不會后端的情況下想展示給別人看的時候就會有這個痛點：「Mock的數(shù)據(jù)別人拿不到?。　?br>有辦法解決嗎？當然有！今天我就給大家分享一個神級功能：「??云端Mock??」 。
?? 來自云端
先說結論：不夸張的說，有了云端Mock,可以讓Mock功能直升不止一個Level。
云端Mock？你聽說過嗎？反正我以前是從來沒聽說過這個概念，而這也是Apifox首創(chuàng)最新上線我親手完成的功能，歡迎向我提建議。
把功能名拆分開來你就會很容易理解，這是一個可以讓你直接在任何有網(wǎng)絡的地方獲取到你想要拿到的定義好的任何數(shù)據(jù)，并且是可以跟Mock一樣動態(tài)生成新的數(shù)據(jù)。
好了，現(xiàn)在你知道這個功能是什么了吧？什么？你還不太了解，那我接下來就搭配一個以React+Ts技術棧的 數(shù)據(jù)大屏項目演示一下如何使用，然后你可以拿去跟你的前端小伙伴們吹水了，文中所有用到的源碼和Apifox格式項目數(shù)據(jù)源我都會全部開源，需要的小伙伴留下你的贊自取哈。



定義文檔
首先大家需要在Apifox有一份接口文檔，在Apifox中我們可以導入市面上各種模式的數(shù)據(jù)源，你可以將你項目的文檔導入進來或者直接在軟件內(nèi)部新建你的項目接口文檔也是可以的。



在這里我給大家配套大屏項目準備了一份接口文檔分別對應各個圖表的接口Mock數(shù)據(jù)，大家只需要導入到Apifox即可??。



在「前端該如何優(yōu)雅地Mock數(shù)據(jù)??」每個前端都應該學會的技巧 這篇文章中提到 我們知道想要使用Mock功能只需要在修改文檔Tab中響應定義你所需要的結構。








如果你需要定制更多特殊的返回響應，我們可以使用Apifox「首創(chuàng)」的智能Mock規(guī)則,高級Mock期望，高級Mock腳本,這些足以讓你返回任何你想要返回的數(shù)據(jù)了，如果想要了解詳情可以查看Apifox Mock介紹。



獲取數(shù)據(jù)
當我們擁有了一份接口文檔之后我們可以在詳情頁看到現(xiàn)在多了個云端Mock Tab欄。



我們點擊去開啟，就會在這個項目中新增一個云端Mock環(huán)境并生成一些項目里云端Mock的一些設置屬性:
云端 Mock URL：我們訪問的地址BaseUrl。
訪問權限:設置為需要鑒權時，這樣訪問這個接口的時候就需要帶上token。
Token: 設置為鑒權時需要搭配的token標識符。



給大家舉個例子，我們打開之前定義好的接口運行頁并選擇云端Mock環(huán)境，試一下點擊運行。
誒！出來了，效果跟我們之前使用Mock一模一樣，不同的是我們再也不需要依賴本地了，細心的同學會發(fā)現(xiàn)我現(xiàn)在開的并不是客戶端而是Web版，是的沒錯,Web版也可以使用Mock了。



我們將這個接口地址放到我們項目里去請求試試（具體的項目請求代碼可以看源碼哈），可以看到我們順利在云端拿到了Mock數(shù)據(jù)，并且是支持跨域的。



看看大屏內(nèi)的效果每次拿到的數(shù)據(jù)都是動態(tài)的，對于一個大屏展示項目來說太酷了吧??。













至此，本次Apifox內(nèi)新上線的云端Mock功能的分享就到這里，上面只是我舉的一小個例子，在項目中所有的接口我都給大家定義好了，可以直接拿我的接口來使用。

授之以魚不如授之以漁，我把大屏的項目文檔導出來給到大家，大家只需要在Apifox直接導入就可以隨意修改屬于你自己的Mock數(shù)據(jù)啦，如果大家不想下載客戶端的話可以直接在Web版進行使用喔，地址貼給大家:

Web版: https://www.apifox.cn/web
大屏源碼及Apifox項目文檔: https://github.com/Vergil-coder/react-big-screen
?? 寫在最后
曾經(jīng)有了Mock我們可以在本地獲取模擬數(shù)據(jù)，如今已經(jīng)有了云端Mock,解決了Mock數(shù)據(jù)不流通的缺陷，所以我才覺得這個功能是大家切切實實都能用到的。
不管你是前端小白找工作簡歷需要項目經(jīng)歷還是展示數(shù)據(jù)大屏給領導看又或者是給女朋友一點小驚喜，相信大家不會對云端Mock這個功能失望，歡迎大家去試試。很榮幸參與了這個需求的開發(fā)，如果大家看完本文還有什么不懂的那一定是我沒表述清楚，歡迎來咨詢我相關問題，小盧手摸手教你使用Apifox??。

作者：快跑啊小盧


歡迎關注微信公眾號 ：前端快快跑