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

?? 前言
大家好我是小盧，作為前端我先拋出幾個(gè)疑問(wèn)：

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

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



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



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



在這里我給大家配套大屏項(xiàng)目準(zhǔn)備了一份接口文檔分別對(duì)應(yīng)各個(gè)圖表的接口Mock數(shù)據(jù)，大家只需要導(dǎo)入到Apifox即可??。



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








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



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



我們點(diǎn)擊去開(kāi)啟，就會(huì)在這個(gè)項(xiàng)目中新增一個(gè)云端Mock環(huán)境并生成一些項(xiàng)目里云端Mock的一些設(shè)置屬性:
云端 Mock URL：我們?cè)L問(wèn)的地址BaseUrl。
訪問(wèn)權(quán)限:設(shè)置為需要鑒權(quán)時(shí)，這樣訪問(wèn)這個(gè)接口的時(shí)候就需要帶上token。
Token: 設(shè)置為鑒權(quán)時(shí)需要搭配的token標(biāo)識(shí)符。



給大家舉個(gè)例子，我們打開(kāi)之前定義好的接口運(yùn)行頁(yè)并選擇云端Mock環(huán)境，試一下點(diǎn)擊運(yùn)行。
誒！出來(lái)了，效果跟我們之前使用Mock一模一樣，不同的是我們?cè)僖膊恍枰蕾嚤镜亓?，?xì)心的同學(xué)會(huì)發(fā)現(xiàn)我現(xiàn)在開(kāi)的并不是客戶端而是Web版，是的沒(méi)錯(cuò),Web版也可以使用Mock了。



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



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













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

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

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

作者：快跑啊小盧


歡迎關(guān)注微信公眾號(hào) ：前端快快跑