前端如何與后端對(duì)接?當(dāng)年差點(diǎn)和后端同學(xué)打起來(lái)了!
閱讀須知
本文不談及老技術(shù)（畢竟沒有經(jīng)歷那個(gè)年代，emmm），只談一些個(gè)人體會(huì)，如果會(huì)有部分內(nèi)容與你想法不同，以你為準(zhǔn)。
大學(xué)期間對(duì)于前端的學(xué)習(xí)
對(duì)于我雙非本科小菜雞來(lái)說(shuō)，最開始入門的語(yǔ)言是 C 語(yǔ)言，之后大二大三就以 Java 語(yǔ)言為主。后面了解了一下其它學(xué)校同學(xué)學(xué)習(xí)的課程，好像大部分也是以 Java 為主，不過(guò)有的學(xué)校會(huì)教學(xué)一些 Web 前端的課程，這個(gè)是挺好的。
我是僅僅大二學(xué)了一本 《Web基礎(chǔ)入門指南》書籍（可能書名也不叫這個(gè)名字），內(nèi)容也是比較基礎(chǔ)，學(xué)習(xí)一些 html 標(biāo)簽，css ?語(yǔ)法也學(xué)的很少。
課程快要結(jié)束的時(shí)候，老師給我們提及了 ajax 以及異步請(qǐng)求相關(guān)的概念，逐漸的有了前后端的概念，最后的作業(yè)就是完成一個(gè)課程設(shè)計(jì)，也是比較經(jīng)典的管理系統(tǒng)，要有數(shù)據(jù)庫(kù)連接等等，我們當(dāng)時(shí)做的就是比較經(jīng)典的「圖書管理系統(tǒng)」了。
大學(xué)期間做的項(xiàng)目
大二學(xué)習(xí)前端的知識(shí)不是很多，后面來(lái)到了大三，學(xué)習(xí)了 JavaEE 以及軟件工程的課程，當(dāng)時(shí)這兩門學(xué)科老師進(jìn)行了聯(lián)合，要求我們分組完成一個(gè)大的課程設(shè)計(jì)，這個(gè)也是作為期末考試的重點(diǎn)比例分?jǐn)?shù)，可以說(shuō)如果這個(gè)項(xiàng)目分?jǐn)?shù)不高的話，兩門都得掛了。
不過(guò)平常與大佬接觸蠻多，所以就和大佬們組了隊(duì)，其中就有一位小學(xué)就學(xué)習(xí)過(guò)編程的同學(xué)，對(duì)于大學(xué)才剛接觸編程的我來(lái)說(shuō)經(jīng)驗(yàn)還是有許多差距。
當(dāng)時(shí)軟件工程老師給我們提及了，前端框架可以考慮使用 Vue 或者 React 框架，那時(shí)候我最開始接觸這兩個(gè)詞，然后組內(nèi)大佬就開始研究這個(gè)框架了，讓我佩服學(xué)習(xí)能力真的好強(qiáng)，一周內(nèi)就開始編寫頁(yè)面了。
而后端當(dāng)時(shí)提及的就是 SSM，如果不太熟悉的小組也可以使用 SSH，我們當(dāng)時(shí)就采用了 SSM 框架，并且采用前后端分離的模式開發(fā)。
后端也是一位大佬，當(dāng)時(shí)就引入了 ?Swagger UI
在這里引用官方的介紹：
Swagger UI allows anyone — be it your development team or your end consumers — to visualize and interact with the API’s resources without having any of the implementation logic in place. It’s automatically generated from your OpenAPI (formerly known as Swagger) Specification, with the visual documentation making it easy for back end implementation and client side consumption.
來(lái)自谷歌翻譯：Swagger UI 允許任何人——無(wú)論是你的開發(fā)團(tuán)隊(duì)還是你的最終消費(fèi)者——在沒有任何實(shí)現(xiàn)邏輯的情況下可視化 API 資源并與之交互。它是根據(jù)您的 OpenAPI（以前稱為 Swagger）規(guī)范自動(dòng)生成的，帶有可視化文檔，便于后端實(shí)現(xiàn)和客戶端使用。
當(dāng)時(shí)做的效果就是如官方圖片一樣，提供了一種可視化的效果，這樣前端同學(xué)就不用這么花費(fèi)很多溝通上的成本，直接看圖一目了然。
這個(gè)當(dāng)時(shí)也是對(duì)我的認(rèn)知有了一些變化，就覺得大佬們真強(qiáng)，對(duì)于這個(gè)技術(shù)廣度感到了不足，給大佬們點(diǎn)贊！
最后我們組確確實(shí)實(shí)拿到了班級(jí)第一名，但是過(guò)程中前后端的兩位大佬也出現(xiàn)過(guò)溝通問(wèn)題，也吵過(guò)，就差打起來(lái)了...
之后，有這段做項(xiàng)目的經(jīng)歷加上自己也系統(tǒng)學(xué)習(xí)了前端相關(guān)的知識(shí)，春招找到了一份實(shí)習(xí)，接下來(lái)就來(lái)說(shuō)說(shuō)實(shí)習(xí)工作的真實(shí)體驗(yàn)如何。
一次實(shí)習(xí)工作的真實(shí)體驗(yàn)
學(xué)校時(shí)期與大佬們接觸，自己對(duì)于技術(shù)方面也更加熱愛了，同時(shí)接觸的領(lǐng)域也更廣了，比如開始自己去學(xué)習(xí) Vue 和 React 框架。
但是帶著學(xué)校的思維第一次進(jìn)入了一家公司實(shí)習(xí)，當(dāng)時(shí)想的是應(yīng)該前后端也會(huì)按照學(xué)校那會(huì)的方式來(lái)做，而實(shí)際情況缺差別有點(diǎn)大。
實(shí)習(xí)那會(huì)，有一批的實(shí)習(xí)生，我應(yīng)該算是前端的一個(gè)主力了，當(dāng)時(shí)討論的時(shí)候就說(shuō)后端寫好接口文檔，可以考慮使用 Swagger UI（因?yàn)樯衔奶峒斑^(guò)，我大學(xué)期間就有使用過(guò)，這個(gè)還挺好用的）
不過(guò)當(dāng)我提及 Swagger UI 時(shí)，貌似就一位后端同學(xué)知道，其它同學(xué)好像沒怎么了解。
因?yàn)榱私獾牟粔虺渥?，這個(gè) Swagger UI 就放棄考慮了，最開始是沒有一個(gè)規(guī)范的接口文檔的，告訴我的接口也是比較「簡(jiǎn)單」，至于這個(gè)接口能不能用我還要自己去請(qǐng)求一下，然后測(cè)試一下？
當(dāng)時(shí)花費(fèi)了很多的溝通成本，后來(lái)由帶我們的組長(zhǎng)給后端同學(xué)開了一次會(huì)議，開始整改規(guī)范上的問(wèn)題，要求寫好一份完整的接口文檔，之后我就輕松許多了，不需要我做的時(shí)候還得和接口負(fù)責(zé)人溝通許久。
不過(guò)，后來(lái)又出現(xiàn)了問(wèn)題，雖然文檔的內(nèi)容是比較詳細(xì)了，但是因?yàn)榻涌跁?huì)比較多，所以每個(gè)人可能就會(huì)分配一下，負(fù)責(zé)某個(gè)模塊的幾個(gè)接口，就在這里出了點(diǎn)小問(wèn)題。
比如前端取值的話，有些接口是通過(guò) res.data.xxx ?就可以獲取 xxx 屬性的值了，原本我以為大家都會(huì)用這種規(guī)范上來(lái)做，但是之后寫其它頁(yè)面的時(shí)候我發(fā)現(xiàn) res.data 取不到值了，充滿疑惑的我又開始了調(diào)試，在控制臺(tái)打印了一下，原來(lái)我得需要 res.data.data.xxx 才能獲取那個(gè)值，看完之后我哭了呀。
于是乎，我又得找后端同學(xué)商量一下了...
作為一起加入的實(shí)習(xí)同學(xué)，出現(xiàn)問(wèn)題也是很正常，遇到問(wèn)題去解決問(wèn)題就好了。
要是脾氣暴躁的前端 er，估計(jì)會(huì)和后端開懟了，甚至打起來(lái)了（開個(gè)玩笑哈，一般不會(huì)有這種情況的哈，打贏了坐牢，打輸了住院...）
前端與后端的對(duì)接
之前有一位小伙伴問(wèn)我前端與后端對(duì)接需要掌握哪些技術(shù)棧，該怎么對(duì)接等等。
首先，是技術(shù)棧方面，其實(shí)對(duì)于前端來(lái)說(shuō)，了解一下「RESTful API」就好了，一般后端同學(xué)返回的接口類型和這個(gè)設(shè)計(jì)差不多，可能公司要求會(huì)有點(diǎn)差別。
https://www.ruanyifeng.com/blog/2018/10/restful-api-best-practices.html
在現(xiàn)在主流前后端分離開發(fā)模式下，前端同學(xué)就負(fù)責(zé)編寫界面實(shí)現(xiàn)，后端同學(xué)提供 API 接口，這樣減少一些溝通成本。
在過(guò)去前后端打架的時(shí)代，我覺得你寫的接口不行，而你又覺得我寫的頁(yè)面太簡(jiǎn)單了，覺得我技術(shù)一般。然后就打起來(lái)了...
咳咳，題外話題外話，至少我是沒有經(jīng)歷過(guò)那個(gè)時(shí)代，真打沒打起來(lái)我還沒實(shí)際見過(guò)，但是網(wǎng)上見過(guò)，見過(guò)真實(shí)的產(chǎn)品和開發(fā)人員對(duì)噴的情況。
而至于怎么對(duì)接的話，作為前端來(lái)說(shuō)的話，如果后端同學(xué)按照公司規(guī)范提供接口文檔或者一些可視化的接口，這樣是非常好的，自己也會(huì)輕松很多，省去一些溝通的成本。
但實(shí)際情況往往與理想狀態(tài)還是有點(diǎn)差距，有時(shí)候后端同學(xué)返回的接口可能會(huì)有一些問(wèn)題，這也很正常，誰(shuí)還不經(jīng)歷個(gè) bug 呢，作為前端的我們來(lái)說(shuō)，不要抱怨，和平交流。
因?yàn)檫@個(gè)功能是這位后端同學(xué)給你提供接口，說(shuō)不定之后的一些功能你們還需要合作，因此建立良好的合作關(guān)系還是很重要的。
結(jié)尾
本篇文章就到此結(jié)束啦，的文章可不僅僅只有知識(shí)類分享哈，喜歡我的文章可以點(diǎn)點(diǎn)關(guān)注，下次我們還能遇見，許久沒有求點(diǎn)贊了，這次能要一個(gè)「點(diǎn)贊」嗎，各位大佬們，球球了~
我是「一百個(gè)Chocolate」，一位獅子座的程序員，帶著熱情面對(duì)生活，好好生活，好好學(xué)習(xí)。
2021 年還有一個(gè)季度，我們一起加油！
往期推薦
在工作中對(duì)于 Custom React Hooks 一些思考
Custom Hooks 中使用 React Context
21 屆校招 8 月前端月度工作匯報(bào) ｜總結(jié)
