【專案實戰】基於Vue3+Vant3造一個網頁版的類掘金app專案 - 沸點評論展示

theme: channing-cyan

一起養成寫作習慣！這是我參與「掘金日新計劃 · 4 月更文挑戰」的第3天，點選檢視活動詳情。

前言

大家好，在上一篇文章分享中，我們實現了沸點內容與熱評內容的展示與收起功能，還實現來沸點中圖片的放大及縮小功能。前面我們花來兩篇文章的時間對沸點內容進行優化，雖然一些基本功能都已經實現了，但跟官方的比起來還是有很大差距，還是會有各種各樣的瑕疵在裡面，關於更多細節問題我們後面有空再進行慢慢優化。今天我們繼續來實現沸點相關的新功能 - 沸點評論。

功能分析

關於沸點評論這一塊，我對比了一下網頁版和移動版的佈局，網頁版的評論去會直接在當前沸點內容下面彈出一塊新的區域，用於展示所有的評論以及評論框；而移動版則是開啟一個新頁面，載入當前沸點以及當前沸點下的所有評論和評論框。由於我們介面都是從網頁版抓來的，因此我們的評論區佈局也打算採用網頁版的形式來展示，即：在當前沸點下直接展開一塊新的區域，用於載入評論內容，如下圖：

功能實現

評論區分為兩塊內容： - 發表評論 + 發表評論區預設只展示當前使用者頭像和一個灰色輸入框 + 當用戶點選了灰色輸入框後則輸入框亮起（表示可以輸入內容） + 同時在輸入框的下方出現表情、圖片和發表評論按鈕 - 展示評論 + 展示評論區預設按最新排序，並且最多隻展示5條評論 + 當超過5條時會顯示一個檢視全部評論連結 + 點選檢視全部評論後跳轉的一個新的頁面 我們今天的目標是：分析網頁端請求沸點評論內容的介面，並將評論內容展示在評論區。 - 首先用chrome瀏覽器開啟官方網站並找到沸點頁面 - 按F12檢視元素，隨便找個評論數比較多的沸點 - 點選評論圖示，檢視官方請求評論內容的介面 如下圖所示，這個list介面就是我們要找的目標（也就是請求沸點評論內容的介面），從圖中我們可以看到該介面最多隻返回了5條評論內容，並且在這些評論內容中還可能有子評論，因此評論這塊實現起來還是稍稍有些複雜的

程式碼實現

後臺介面已經找到，並且也知道我們的評論區要做成什麼樣子，目標已經確定接下來就開始擼程式碼了 - 首先在我們自己的後臺node_server中封裝一個post請求的comment_list介面用於請求評論內容 - 然後再在前端juejinlike專案中沸點頁面給每條沸點的評論圖示繫結click事件，並在該事件方法中呼叫後端封裝好的comment_list介面 - 將介面中返回的評論資料迴圈展示在評論區 部分核心程式碼及效果圖如下： ```html