Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架） 課件 任務(wù)9　實(shí)現(xiàn)文章詳情頁相關(guān)功能

任務(wù)9

實(shí)現(xiàn)文章詳情頁相關(guān)功能Web前端應(yīng)用開發(fā)項(xiàng)目式教程（基于uni-app框架）

目錄CONTENTS019.5任務(wù)實(shí)施9.7學(xué)習(xí)自評(píng)Part19.1任務(wù)描述9.2任務(wù)效果9.4知識(shí)儲(chǔ)備9.8課后練習(xí)9.9任務(wù)拓展9.3學(xué)習(xí)目標(biāo)9.6任務(wù)測(cè)試本任務(wù)將實(shí)現(xiàn)啟嘉校園社區(qū)模塊文章詳情頁中的相關(guān)功能。用戶通過點(diǎn)擊社區(qū)首頁文章列表中的文章卡片可以進(jìn)入文章詳情頁，文章詳情頁需要實(shí)現(xiàn)的功能包括展示文章的標(biāo)題、正文、作者、發(fā)布日期；展示文章獲得的點(diǎn)贊、轉(zhuǎn)發(fā)和評(píng)論數(shù)量以及評(píng)論列表；對(duì)文章進(jìn)行評(píng)論、點(diǎn)贊和轉(zhuǎn)發(fā)，也可以對(duì)其它用戶發(fā)布的評(píng)論進(jìn)行回復(fù)和點(diǎn)贊；關(guān)注或取關(guān)作者。

9.1任務(wù)描述

9.2任務(wù)效果任務(wù)效果掃描二維碼查看

9.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識(shí)目標(biāo)通過使用條件編譯解決多端兼容，培養(yǎng)學(xué)習(xí)者科學(xué)、系統(tǒng)解決問題的意識(shí)。通過分享、點(diǎn)贊功能的實(shí)現(xiàn)，培養(yǎng)學(xué)習(xí)者尊重他人勞動(dòng)成果、傳播正能量的意識(shí)。了解H5端實(shí)現(xiàn)轉(zhuǎn)發(fā)功能的方法。掌握uni.showLoading和uni.hideLoading顯示和隱藏加載狀態(tài)方法使用。掌握利用分割和拼接的方式實(shí)現(xiàn)字符串與數(shù)組之間的轉(zhuǎn)換。能夠使用條件編譯兼容微信小程序端和H5端轉(zhuǎn)發(fā)功能實(shí)現(xiàn)的差異。能夠使用uni.showLoading和uni.hideLoading方法實(shí)現(xiàn)顯示和隱藏接口數(shù)據(jù)請(qǐng)求中的加載狀態(tài)。能夠?qū)D片地址字符串按指定字符分割成圖片數(shù)組。

9.4知識(shí)儲(chǔ)備9.4.1評(píng)論區(qū)互動(dòng)形式從用戶互動(dòng)性的維度上，可將“評(píng)論”形式分為三類：（1）單向評(píng)論用戶評(píng)論后，任何人均不可回復(fù)。偏向于讓用戶發(fā)表觀點(diǎn)，但不希望用戶產(chǎn)生互動(dòng)，重心更多放在內(nèi)容上面，不過這種沒有反饋機(jī)制的設(shè)計(jì)較難把握。（2）雙向評(píng)論用戶評(píng)論后，僅作者可回復(fù)，強(qiáng)調(diào)作者與用戶間產(chǎn)生互動(dòng)（如微信公眾號(hào)），互動(dòng)性不強(qiáng)，引導(dǎo)用戶基于內(nèi)容去進(jìn)行評(píng)論，屬于弱社交形態(tài)。（3）多向評(píng)論用戶評(píng)論后，任何人均可回復(fù)，且可多次互動(dòng)（如微博、知乎等），互動(dòng)性強(qiáng)，可以基于內(nèi)容評(píng)論，也可以基于評(píng)論而評(píng)論，通常該類別下的評(píng)論區(qū)會(huì)相對(duì)其他類別活躍，屬于強(qiáng)社交形態(tài)。

9.4知識(shí)儲(chǔ)備9.4.2多向評(píng)論區(qū)展示結(jié)構(gòu)

目前主流的產(chǎn)品中，常見的多向評(píng)論展示結(jié)構(gòu)有：主題式、平鋪式、蓋樓式3種結(jié)構(gòu)?！爸黝}式”特點(diǎn)為用戶對(duì)正文內(nèi)容發(fā)表的一級(jí)評(píng)論在上，他人的回復(fù)則折疊在下方。

“平鋪式”的展示形式是評(píng)論和評(píng)論回復(fù)都處于同一個(gè)層級(jí)上，視覺上沒有明顯的層級(jí)區(qū)分。“蓋樓式”如同字面意思，評(píng)論區(qū)用戶之前的互動(dòng)內(nèi)容像在蓋樓一樣，一層一層向下堆砌?！皢⒓涡@”屬于強(qiáng)社交屬性，采用的是多向評(píng)論的互動(dòng)形式，而在展示結(jié)構(gòu)上采用的是主題式方式。

9.5任務(wù)實(shí)施9.5.1獲取文章詳情邏輯分析

用戶進(jìn)入文章詳情頁分為三種場(chǎng)景：

（1）通過社區(qū)首頁中的文章列表進(jìn)入。

（2）通過搜索的文章列表進(jìn)入。

（3）通過用戶中心的文章列表進(jìn)入。

當(dāng)用戶點(diǎn)擊文章列表中的文章卡片時(shí)，跳轉(zhuǎn)到文章詳情頁，跳轉(zhuǎn)時(shí)攜帶文章ID，將文章ID作為參數(shù)調(diào)用相應(yīng)后端接口，從而獲取文章相關(guān)信息，然后利用數(shù)據(jù)綁定方式將相關(guān)信息呈現(xiàn)在頁面對(duì)應(yīng)位置中。

9.5任務(wù)實(shí)施9.5.1獲取文章詳情接口分析

獲取文章詳情需一個(gè)后端查詢接口，接口名稱為“獲取文章詳情”，接口詳情如下：API地址：{{HOST_API}}/IntactArticle/details/:articleIdAPI請(qǐng)求方式：GETAPI請(qǐng)求：見表參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說明articleIdString文章idHeader請(qǐng)求參數(shù)路徑請(qǐng)求參數(shù)

9.5任務(wù)實(shí)施9.5.1獲取文章詳情代碼實(shí)現(xiàn)

在/api/community目錄下新建article-details.js文件，編寫調(diào)用獲取文章詳情接口的方法，關(guān)鍵代碼如下：代碼實(shí)現(xiàn)

在article-details.vue中，調(diào)用getArticleContentApi方法獲取文章詳情數(shù)據(jù)，部分代碼如下：

9.5任務(wù)實(shí)施9.5.2實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能邏輯分析

實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能邏輯相似，只需要通過調(diào)用對(duì)應(yīng)后端接口，然后對(duì)接口響應(yīng)狀態(tài)做出判斷即可，相關(guān)邏輯如下：

（1）文章點(diǎn)贊：用戶點(diǎn)擊點(diǎn)贊圖標(biāo)時(shí)，調(diào)用相應(yīng)后端接口，接口響應(yīng)狀態(tài)為成功，則切換點(diǎn)贊圖標(biāo)狀態(tài)為“實(shí)心”或“空心”，同時(shí)對(duì)點(diǎn)贊數(shù)量進(jìn)行“+1”或“-1”。

（2）文章轉(zhuǎn)發(fā)：用戶點(diǎn)擊轉(zhuǎn)發(fā)按鈕時(shí)，使用uni-app轉(zhuǎn)發(fā)組件觸發(fā)轉(zhuǎn)發(fā)事件，同時(shí)調(diào)用相應(yīng)后端接口，接口響應(yīng)狀態(tài)為成功，則對(duì)轉(zhuǎn)發(fā)數(shù)量進(jìn)行“+1”。

（3）關(guān)注作者：用戶點(diǎn)擊關(guān)注或已關(guān)注按鈕時(shí)，調(diào)用相應(yīng)后端接口，接口響應(yīng)狀態(tài)為成功，則切換關(guān)注按鈕文本為“已關(guān)注”或“關(guān)注”。

9.5任務(wù)實(shí)施9.5.2

實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能接口分析

實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能共需三個(gè)接口，分別為文章點(diǎn)贊/取消點(diǎn)贊、轉(zhuǎn)發(fā)文章和關(guān)注/取關(guān)接口，接口詳情如下：

文章點(diǎn)贊/取消點(diǎn)贊接口API地址：{{HOST_API}}/article-like/:articleIdAPI請(qǐng)求方式：POSTAPI請(qǐng)求：見表參數(shù)字段名數(shù)據(jù)類型說明articleIdString文章idHeader請(qǐng)求參數(shù)路徑請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌

9.5任務(wù)實(shí)施9.5.2

實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能接口分析

實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能共需三個(gè)接口，分別為文章點(diǎn)贊/取消點(diǎn)贊、轉(zhuǎn)發(fā)文章和關(guān)注/取關(guān)接口，接口詳情如下：

轉(zhuǎn)發(fā)文章接口API地址：{{HOST_API}}/share/addShareAPI請(qǐng)求方式：POSTAPI請(qǐng)求：見表參數(shù)字段名數(shù)據(jù)類型說明articleIdString文章idHeader請(qǐng)求參數(shù)Body請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌

9.5任務(wù)實(shí)施9.5.2

實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能接口分析

實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能共需三個(gè)接口，分別為文章點(diǎn)贊/取消點(diǎn)贊、轉(zhuǎn)發(fā)文章和關(guān)注/取關(guān)接口，接口詳情如下：

關(guān)注/取關(guān)用戶接口API地址：{{HOST_API}}/fans/addFollowAPI請(qǐng)求方式：POSTAPI請(qǐng)求：見表參數(shù)字段名數(shù)據(jù)類型說明followUserIdText欲關(guān)注用戶的idHeader請(qǐng)求參數(shù)Body請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌

9.5任務(wù)實(shí)施9.5.2實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)與關(guān)注作者功能代碼實(shí)現(xiàn)

在article-details.js中，編寫調(diào)用文章點(diǎn)贊/取消點(diǎn)贊、轉(zhuǎn)發(fā)文章和關(guān)注/取關(guān)用戶接口的方法，部分代碼如下：代碼實(shí)現(xiàn)

在article-details.vue中，調(diào)用postArticleThumbsUpApi、addShare和postUserFollowApi方法實(shí)現(xiàn)文章點(diǎn)贊、轉(zhuǎn)發(fā)和關(guān)注用戶功能，部分代碼如下：

9.5任務(wù)實(shí)施9.5.3

實(shí)現(xiàn)文章評(píng)論功能邏輯分析無論是一級(jí)評(píng)論還是子評(píng)論，同為發(fā)布評(píng)論、獲取評(píng)論、刪除評(píng)論和點(diǎn)贊/取消點(diǎn)贊評(píng)論四種操作，可以使用相同的邏輯去實(shí)現(xiàn)。需要注意的是一級(jí)評(píng)論和子評(píng)論使用的是同一個(gè)文本輸入框，因此要根據(jù)使用場(chǎng)景對(duì)用戶評(píng)論的對(duì)象做出區(qū)分，思路如下：（1）發(fā)布文章評(píng)論當(dāng)用戶直接點(diǎn)擊輸入框時(shí)，分兩種情況，第一種情況為存在歷史輸入狀態(tài)，即用戶上一次進(jìn)入輸入狀態(tài)時(shí)輸入了內(nèi)容但未進(jìn)行發(fā)布且退出輸入狀態(tài)，此時(shí)輸入框文本內(nèi)容和評(píng)論對(duì)象應(yīng)保持不變（恢復(fù)上次的輸入狀態(tài)），若用戶手動(dòng)將輸入框內(nèi)文本內(nèi)容清空并重新喚起鍵盤，則將評(píng)論對(duì)象切換為“文章”；第二種情況為不存在歷史輸入狀態(tài)，輸入框內(nèi)文本內(nèi)容為空，此時(shí)將評(píng)論對(duì)象設(shè)置為“文章”。發(fā)布評(píng)論成功后，清空輸入框文本內(nèi)容。（2）發(fā)布評(píng)論回復(fù)當(dāng)用戶點(diǎn)擊評(píng)論區(qū)中的回復(fù)按鈕時(shí)，分三種情況，第一種情況為存在歷史輸入狀態(tài)且當(dāng)前評(píng)論對(duì)象與上次評(píng)論對(duì)象相同，此時(shí)輸入框文本內(nèi)容和評(píng)論對(duì)象應(yīng)保持不變；第二種情況為存在歷史輸入狀態(tài)且當(dāng)前評(píng)論對(duì)象與上次評(píng)論對(duì)象不同（上次評(píng)論對(duì)象可能是文章或其它評(píng)論），此時(shí)需要清空輸入框文本內(nèi)容，并將評(píng)論對(duì)象切換為當(dāng)前“評(píng)論”；第三種情況為不存在歷史輸入狀態(tài)，輸入框內(nèi)文本內(nèi)容為空，此時(shí)將評(píng)論對(duì)象切換為當(dāng)前“評(píng)論”。第一、二種情況下，若用戶手動(dòng)將輸入框內(nèi)文本內(nèi)容清空并重新喚起鍵盤，則將評(píng)論對(duì)象切換為“文章”。發(fā)布評(píng)論成功后，清空輸入框文本內(nèi)容。

9.5任務(wù)實(shí)施9.5.3

實(shí)現(xiàn)文章評(píng)論功能接口分析

實(shí)現(xiàn)文章評(píng)論相關(guān)功能共需四個(gè)接口，分別為查詢文章評(píng)論、發(fā)布文章評(píng)論、刪除評(píng)論和評(píng)論點(diǎn)贊/取消點(diǎn)贊接口，接口詳情如下：

查詢文章評(píng)論接口API地址：{{HOST_API}}/commentAPI請(qǐng)求方式：GETAPI請(qǐng)求：見表Header請(qǐng)求參數(shù)Query請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說明pageText頁數(shù)articleIdText文章idparentIdText一級(jí)評(píng)論id

9.5任務(wù)實(shí)施9.5.3

實(shí)現(xiàn)文章評(píng)論功能接口分析

實(shí)現(xiàn)文章評(píng)論相關(guān)功能共需四個(gè)接口，分別為查詢文章評(píng)論、發(fā)布文章評(píng)論、刪除評(píng)論和評(píng)論點(diǎn)贊/取消點(diǎn)贊接口，接口詳情如下：

發(fā)布文章評(píng)論接口API地址：{{HOST_API}}/commentAPI請(qǐng)求方式：POSTAPI請(qǐng)求：見表Header請(qǐng)求參數(shù)Query請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說明contentString評(píng)論內(nèi)容articleIdString文章idparentIdString父級(jí)評(píng)論id，傳0或不傳為一級(jí)

9.5任務(wù)實(shí)施9.5.3

實(shí)現(xiàn)文章評(píng)論功能接口分析

實(shí)現(xiàn)文章評(píng)論相關(guān)功能共需四個(gè)接口，分別為查詢文章評(píng)論、發(fā)布文章評(píng)論、刪除評(píng)論和評(píng)論點(diǎn)贊/取消點(diǎn)贊接口，接口詳情如下：

刪除文章評(píng)論接口API地址：{{HOST_API}}/comment/:commentIdAPI請(qǐng)求方式：POSTAPI請(qǐng)求：見表Header請(qǐng)求參數(shù)路徑請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說明commentIdText評(píng)論id

9.5任務(wù)實(shí)施9.5.3

實(shí)現(xiàn)文章評(píng)論功能接口分析

實(shí)現(xiàn)文章評(píng)論相關(guān)功能共需四個(gè)接口，分別為查詢文章評(píng)論、發(fā)布文章評(píng)論、刪除評(píng)論和評(píng)論點(diǎn)贊/取消點(diǎn)贊接口，接口詳情如下：文章評(píng)論點(diǎn)贊/取消點(diǎn)贊接口API地址：{{HOST_API}}/comment-likeAPI請(qǐng)求方式：POSTAPI請(qǐng)求：見表Header請(qǐng)求參數(shù)Query請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說明commentIdText評(píng)論id

9.5任務(wù)實(shí)施9.5.3

實(shí)現(xiàn)文章評(píng)論功能代碼實(shí)現(xiàn)

在article-details.js中，編寫調(diào)用查詢文章評(píng)論、發(fā)布文章評(píng)論、刪除文章評(píng)論和文章評(píng)論點(diǎn)贊/取消點(diǎn)贊接口的方法，部分代碼如下代碼實(shí)現(xiàn)

在article-details.vue中，引入上面四個(gè)接口請(qǐng)求方法，并將其傳遞給評(píng)論組件，部分代碼如下：

9.6任務(wù)測(cè)試

9.7自學(xué)評(píng)價(jià)

9.8課后練習(xí)？1.選擇題（1）在uni-app中，可以使用什么方法顯示加載狀態(tài)？A.uni.showLoading方法B.uni.showToast方法C.uni.showModal方法D.uni.showOptionDialog方法（2）在uni-app中，可以使用什么方法將圖片地址字符串按指定字符分割成圖片