后端自學(xué)兩個(gè)小時(shí)，前端，能做什么？

咕泡P5人工智能深度學(xué)習(xí)高薪就業(yè)班5期

download：https://www.zxit666.com/5447/

今天的內(nèi)容有點(diǎn)超前，主要是換換口味。畢竟學(xué)東西學(xué)久了，想學(xué)點(diǎn)新的，休息一下，俗稱換個(gè)思路。
其實(shí)我早就想學(xué)會(huì)看前端了。不過由于工作忙，也可能是懶癌發(fā)作還沒發(fā)作。直到我在做OKR的時(shí)候，有些東西需要前端的支持，而我們沒有任何額外的前端，我知道這一點(diǎn)。~我需要開始學(xué)前教育~
在我繼續(xù)說下去之前，突然想起來我有一個(gè)前端網(wǎng)友，以前我們都極度貧困(現(xiàn)在升級為貧困)的時(shí)候，他會(huì)一起討論問題。有時(shí)候我會(huì)說你前端怎么樣，他會(huì)很反感，因?yàn)樗X得自己不是前端而是開發(fā)者。
雖然我被刺痛了，但我從心底里贊同他。開發(fā)者不應(yīng)該限制自己。我們所有人都只是在做前端或者后端的工作。畢竟有些人招進(jìn)來就是前端，現(xiàn)在連運(yùn)維工作都做了，你說呢？@CookieBoty
所以這篇文章的內(nèi)容會(huì)前端和后端混在一起。前端可以看后端內(nèi)容，后端可以看前端內(nèi)容，換個(gè)思路吧~
1.某視頻剪輯軟件
我還依稀記得三四年前剛學(xué)Java的時(shí)候，要學(xué)CSS，HTML，JS。做了三年后端，連DOM怎么操作都忘了。可能很多后端的朋友跟我一樣。除了HTML的一點(diǎn)標(biāo)簽，其他前端相關(guān)知識(shí)早就忘記了，這也是很多后端不愿意接觸前端的原因。太費(fèi)功夫了。
所以我決定開始學(xué)習(xí)前的第一個(gè)問題是，我應(yīng)該先學(xué)什么？
想了三分鐘，得出一個(gè)結(jié)論:先學(xué)一個(gè)前端框架。

我知道任何語言的技術(shù)棧都是有一個(gè)龐大的生態(tài)支撐的。除了前端框架，還有打包工具、依賴管理工具、ES6的新特性(可能是老的，對我來說是新的)、硬卷等等。
這八股文和Java的一樣，但是我知道這些東西我都不需要學(xué)。當(dāng)我想學(xué)的時(shí)候，只有一件事:用工具幫我做東西。
所以，雖然我連解構(gòu)賦值和操作DOM都不會(huì)，但這并不妨礙我學(xué)習(xí)前端。我要選擇一個(gè)前端框架去熟悉，然后用這個(gè)框架的生態(tài)來幫我做東西。
跑題了，回到正題。兩三年前，Vue，React，Angular是前三。但到了今年，Angular好像除了外企沒怎么用過，所以我的學(xué)習(xí)目標(biāo)是專注Vue和React。
如何選擇？其實(shí)我很糾結(jié)。最后還是聽從了好兄弟@CookieBoty和很多網(wǎng)友的建議，學(xué)了Vue。
網(wǎng)上很多人說Vue好用，文檔齊全。我覺得它完全符合我的期望。另外，我在火影結(jié)束后開始追逐海賊王。猶大海賊王的命名方式很適合我，于是我開始學(xué)習(xí)Vue3。
怎么學(xué)？想到了一個(gè)程序員的夢工廠課程網(wǎng)，找了個(gè)教程看。它先是教我模板語法，然后教我單頁組件，最后學(xué)了Vue路由系統(tǒng)。前前后后花了一個(gè)多小時(shí)，看了十幾個(gè)視頻，覺得自己能行，就開始練了~
最后我三天沒看完一頁。

2.反應(yīng)
Vue3的難度讓我措手不及，也許是因?yàn)槲覜]有拋棄后端的代碼習(xí)慣。
我習(xí)慣用TS定義數(shù)據(jù)結(jié)構(gòu)來接收和處理值，但是我發(fā)現(xiàn)Vue3中的所有對象都是代理對象。當(dāng)我嘗試把一個(gè)地圖數(shù)據(jù)直接轉(zhuǎn)換成JSON字符串的時(shí)候，發(fā)現(xiàn)不行，我也無法理解為什么一個(gè)地圖轉(zhuǎn)換成JSON的時(shí)候不能把KV帶進(jìn)去。它仍然需要我手動(dòng)將其轉(zhuǎn)換成一個(gè)對象，然后再轉(zhuǎn)換一次。我非常不安。
更讓我擔(dān)心的是，當(dāng)我嘗試用數(shù)組對象循環(huán)生成某個(gè)模板時(shí)，我發(fā)現(xiàn)很麻煩。感覺這不是我想要的前端。作為后端，我學(xué)了腳本語言，但是它讓我感覺到很多束縛，比寫Java還難。
至此，我才意識(shí)到Vue3的入門難度和Vue2并不一樣。這是一個(gè)成熟的前端框架，需要一個(gè)成熟的前端來運(yùn)營，而不是我這種玩了就扔的二流開發(fā)。
當(dāng)然，Vue還是有很多優(yōu)點(diǎn)的。在我看來，ele-plus組件庫真的很漂亮。
Vue3玩不下去了，想換React。又一次來到一個(gè)班級網(wǎng)，找到了React17的視頻。我花了一個(gè)多小時(shí)。好在我已經(jīng)有了一些先驗(yàn)知識(shí)，吸收起來還是挺快的。在學(xué)習(xí)的過程中，我覺得React給了我想要的:自由，以及編寫腳本語言的自由。
在React中，我不再拘泥于單頁組件，都是功能組件。單向數(shù)據(jù)流也讓我更容易理解數(shù)據(jù)的運(yùn)行方式。而且據(jù)說React的B案比Vue高一點(diǎn)。這一切都讓我覺得轉(zhuǎn)行反應(yīng)是對的。
但是，有利也有弊。在編寫React的過程中，我發(fā)現(xiàn)我用Vue3寫代碼時(shí)的問題是JS特有的，比如我前面提到的映射到JSON的問題。不會(huì)因?yàn)槟硞€(gè)框架就讓我更舒服。
可能有些前端的朋友會(huì)想:為什么要用地圖？
因?yàn)镸ap更符合我對這個(gè)后端的認(rèn)知，所以我把一些不確定的多選參數(shù)放在一個(gè)容器里，然后序列化到后端。我覺得這是一件極其合理的事情。符合我的心智模式，但是JS和TS都沒有做到。
在使用TS的過程中，感覺幾乎沒有什么好處。反而TS的類型檢查讓我覺得更不像腳本語言，我覺得比后端的Kotlin差太多了。
雖然有各種限制，但好在React的框架并沒有讓我感到任何不適，而是無縫銜接。我差點(diǎn)就開始寫了。
最后，總結(jié)一下我在動(dòng)筆之前在React中學(xué)到的東西:

使用腳手架安裝react with ts。
聲明類組件和功能組件:功能組件是主流。就稍微看一下類組件，主要是寫起來比較麻煩。
理解render:render其實(shí)就是通過執(zhí)行組件代碼生成一個(gè)HTML片段，然后掛載到DOM上。
CSS模塊化:通過CSS模塊化添加樣式非常方便。懶癌患者直接在代碼中加入內(nèi)聯(lián)樣式是沒有問題的，他們只是隨心所欲的玩。
而狀態(tài)道具:狀態(tài)是關(guān)鍵點(diǎn)，代表組件的狀態(tài)，比如按鈕是否顯示。Props是不可變的參數(shù)，從外部傳入供組件使用。
鉤子:鉤子，我一般只用這三個(gè):useState，useEffect，useContext。它們分別表示狀態(tài)變量聲明、副作用掛鉤聲明和全局?jǐn)?shù)據(jù)傳輸。
路由:據(jù)我所知，路由是通過占位符和瀏覽器的錨點(diǎn)完成的，通過錨點(diǎn)定位指定的代碼，通過占位符將組件代碼生成到占位符所占的DOM。當(dāng)然這只是我的一點(diǎn)拙見，希望評論區(qū)的大佬們能給出更多細(xì)節(jié)。

學(xué)完以上幾項(xiàng)，我覺得你寫一個(gè)小的管理系統(tǒng)是沒問題的。啊對，說到管理系統(tǒng)，必然要用到http相關(guān)的東西。雖然axios祝玉帶，拿來用是可以的。
最后，我覺得React的文檔比Vue的好多了。我希望JYM不會(huì)噴我。
3.組件庫
在編寫前端的過程中，組件庫對于提高效率至關(guān)重要。先后經(jīng)歷過螞蟻設(shè)計(jì)、Material UI、Semi設(shè)計(jì)、Arco設(shè)計(jì)。
最后，我在項(xiàng)目中使用了Semi Design，因?yàn)樗梢园葱杓虞d，而無需引入全局樣式表。雖然我的好大哥告訴我螞蟻設(shè)計(jì)也可以達(dá)到這種效果，但當(dāng)時(shí)實(shí)踐中并沒有成功，或者說我的功力太弱了。
到目前為止，我用過最舒服最方便的是ele-plus?？上]有React版本。
雖然組件庫是個(gè)好東西，但是我覺得過分依賴組件庫是個(gè)不好的東西。當(dāng)你想做的功能組件庫有了，但就是達(dá)不到想要的效果，就會(huì)很難受。難怪很多人要自己做組件庫~
比如Semi Design，在我使用的過程中，我真的不喜歡它的按鍵效果。按鈕上必須始終有背景色:

我想要一個(gè)沒有背景色的圖標(biāo)按鈕，但是Semi Design的圖標(biāo)按鈕都是這樣的:

可能這就是它獨(dú)特的設(shè)計(jì)風(fēng)格問題，有些東西隨時(shí)可能違背我的直覺，讓我意識(shí)到雖然組件庫不錯(cuò)，但是過度依賴也給自己的擴(kuò)展留下了很多問題。
寫到這里，我突然明白為什么前端有時(shí)候會(huì)跟我說“我用組件庫做不出這個(gè)效果?！蔽倚南?，你的小廝不就是你的主人嗎？我實(shí)際上可以讓組件庫來照顧開發(fā)人員。被照顧的時(shí)候，我好像很理解他當(dāng)時(shí)的處境。原來我的頁面真的不是我的主人。
4.頁面效果
雖然我只花了幾個(gè)小時(shí)學(xué)習(xí)前端，但我花了很長時(shí)間來寫頁面。大部分時(shí)間，我都在調(diào)整一些風(fēng)格，排查錯(cuò)誤。除此之外，我還自學(xué)了Flex layout，做了整體的頁面布局。
有時(shí)候覺得組件效果不好，也寫了一些鼠標(biāo)懸浮的陰影之類的小效果:

一套頁面整體感覺還是不錯(cuò)的。難怪前端也叫交互體驗(yàn)工程師。
接下來，我給大家展示一下整體效果。這是主頁面:

我的網(wǎng)關(guān)控制臺(tái)分為兩個(gè)頁面:看板和路由表。
路由表如上圖所示。它主要是拉下Nacos中的配置，解析成數(shù)組對象，顯示在表格中。然后可以在表中編輯添加，再通過openApi同步到Nacos的遠(yuǎn)端，這樣就不用手動(dòng)在一堆配置中修改了。
下面簡單說一下Nacos Api。他們的發(fā)布配置其實(shí)是Get接口，導(dǎo)致我現(xiàn)在在后端做了一層封裝，不然數(shù)據(jù)量大的話很容易被瀏覽器攔截。我也看了他們新api接口的相關(guān)代碼，但不是常用的JSON接口，所以跟相關(guān)開發(fā)者查了一次。
跑題了，回到正題，我的編輯和新頁面如下:

看板就是用網(wǎng)關(guān)記錄一些流量指標(biāo)，比如總請求數(shù)、日總活動(dòng)量、每小時(shí)在線人數(shù)、每小時(shí)請求數(shù)等基本指標(biāo)，并做成圖表形式，包括餅狀圖和折線圖:

當(dāng)然對我來說最重要的還是路由表的查看頁面和新增加的編輯頁面。這些頁面花費(fèi)了我最多的精力，而且頁面的數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜，對于我這個(gè)新手來說做起來有點(diǎn)困難。
值得一提的是，圖表是我做過的最簡單的頁面，用的是螞蟻的圖標(biāo)組件。
5.后端
最后簡單說一下我在后端做了什么。
由于這是一個(gè)后臺(tái)系統(tǒng)，我將其從網(wǎng)關(guān)中分離出來，并創(chuàng)建了一個(gè)新的管理項(xiàng)目來處理相關(guān)的請求，但是什么呢？有了前端，我的網(wǎng)關(guān)作為一個(gè)整體將有三個(gè)部署的服務(wù):網(wǎng)關(guān)API、網(wǎng)關(guān)控制臺(tái)前端和網(wǎng)關(guān)控制臺(tái)后端。
為了節(jié)省資源，我把前端輸出代碼通過插件復(fù)制到網(wǎng)關(guān)后端應(yīng)用程序中，這樣網(wǎng)關(guān)后端和前端代碼可以打包在一個(gè)應(yīng)用程序中。
具體方法是用插件編譯前端，然后在后端應(yīng)用編譯打包時(shí)復(fù)制前端資源。

在調(diào)試和開發(fā)的時(shí)候，你仍然可以像前端服務(wù)分開一樣，啟動(dòng)一個(gè)后端服務(wù)和一個(gè)前端服務(wù)，只在最后的包里把它們打包在一起。所以，這樣一來，即使一個(gè)全職的前端幫你寫頁面，他也是察覺不到的，他也不需要管后端做什么。
6.最后
好了，今天的文章就到這里。本文主要內(nèi)容不涉及太多技術(shù)(當(dāng)然也分享了一個(gè)前端聯(lián)合打包的技巧)，主要分享我自己為項(xiàng)目寫一些前端代碼的心路歷程。我相信現(xiàn)在很多工程師都對整個(gè)棧感興趣，我也想告訴你，前端不太難學(xué)，幾個(gè)小時(shí)就能寫出來。