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

任務(wù)8

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

目錄CONTENTS018.5任務(wù)實(shí)施8.7學(xué)習(xí)自評(píng)Part18.1任務(wù)描述8.2任務(wù)效果8.4知識(shí)儲(chǔ)備8.8課后練習(xí)8.9任務(wù)拓展8.3學(xué)習(xí)目標(biāo)8.6任務(wù)測(cè)試本任務(wù)將實(shí)現(xiàn)啟嘉校園社區(qū)模塊的文章發(fā)布和文章列表分頁功能。用戶通過點(diǎn)擊社區(qū)首頁的文章發(fā)布快捷按鈕可以進(jìn)入文章發(fā)布頁編輯和發(fā)布文章，文章發(fā)布成功后自動(dòng)跳轉(zhuǎn)回社區(qū)首頁，用戶新發(fā)布的文章在社區(qū)首頁文章列表中置頂顯示。社區(qū)首頁文章列表分頁方式采用的是移動(dòng)端最為常用的“下拉刷新”和“上拉加載”，用戶可以通過滑動(dòng)文章列表刷新或查看更多文章。開發(fā)過程中，功能實(shí)現(xiàn)的技術(shù)選型和方案設(shè)計(jì)一定要符合行業(yè)技術(shù)發(fā)展現(xiàn)狀，發(fā)揮新技術(shù)優(yōu)勢(shì)，避免用過時(shí)的技術(shù)，這樣才能讓軟件產(chǎn)品的生命力更持久。

8.1任務(wù)描述

8.2任務(wù)效果掃碼查看效果圖

8.3學(xué)習(xí)目標(biāo)能力目標(biāo)素養(yǎng)目標(biāo)知識(shí)目標(biāo)通過對(duì)uni.uploadFile文件上傳方法的學(xué)習(xí)，培養(yǎng)學(xué)習(xí)者樂于探究、勇于創(chuàng)新的精神。通過完成“專業(yè)交流”版塊的開發(fā)，增強(qiáng)學(xué)習(xí)者職業(yè)認(rèn)同感。通過合理選擇圖片儲(chǔ)存方式，培養(yǎng)學(xué)習(xí)者服務(wù)意識(shí)。了解圖片、視頻等文件托管儲(chǔ)存的優(yōu)點(diǎn)和實(shí)現(xiàn)原理。掌握uni.uploadFile文件上傳方法的使用。掌握uni-app頁面通訊方法的使用。能夠使用uni.uploadFile方法實(shí)現(xiàn)圖片上傳功能。能夠使用組件通訊方法在頁面間傳遞數(shù)據(jù)。

8.4知識(shí)儲(chǔ)備8.4.1常見的分頁方式

分頁是在軟件產(chǎn)品中以列表的形式呈現(xiàn)內(nèi)容時(shí)經(jīng)常使用的功能，當(dāng)列表中的內(nèi)容較多時(shí)，軟件將分頁加載不同的數(shù)據(jù)，如新聞列表分頁、商品列表分頁、圖片列表分頁等。下面將介紹目前比較常用的幾種分頁方式。1.瀑布流分頁

瀑布流式布局，視覺表現(xiàn)為參差不齊的多欄布局，隨著頁面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載并附加至當(dāng)前尾部。2.常規(guī)數(shù)字分頁

常規(guī)數(shù)字分頁對(duì)內(nèi)容的形式更具有控制感，有較強(qiáng)的檢索功能，同時(shí)便于內(nèi)容的快速定位，直觀的數(shù)據(jù)展現(xiàn)。數(shù)字分頁一般在列表內(nèi)容相對(duì)固定或者比較重要，需要較強(qiáng)的檢索能力時(shí)去使用。

8.4知識(shí)儲(chǔ)備8.4.1常見的分頁方式1.瀑布流分頁（1）自動(dòng)瀑布流

自動(dòng)瀑布流分頁多用于資訊類、社交類產(chǎn)品，快速瀏覽內(nèi)容和發(fā)現(xiàn)內(nèi)容的場(chǎng)景，瀑布流下方?jīng)]有太多無關(guān)信息。其特點(diǎn)是當(dāng)列表下滑到底部時(shí)會(huì)自動(dòng)加載下一頁，例如微博的自動(dòng)加載。（2）手動(dòng)瀑布流

當(dāng)列表底部存在更多有價(jià)值的內(nèi)容時(shí)，不適合自動(dòng)加載下一頁，這時(shí)需要用戶手動(dòng)觸發(fā)“加載更多”事件，來獲取更多的內(nèi)容，例如“人人都是產(chǎn)品經(jīng)理”的手動(dòng)加載更多。（3）自動(dòng)瀑布流和手動(dòng)瀑布流相結(jié)合

當(dāng)列表底部?jī)?nèi)容過多時(shí)，采用的一種折中方案，如果說用戶是長(zhǎng)期關(guān)注閱讀某網(wǎng)站信息或者本身網(wǎng)站內(nèi)容不是很多時(shí)，前幾次分頁使用自動(dòng)加載已經(jīng)足夠展示最近的信息，同時(shí)保證用戶瀏覽的流暢，之后便采用手動(dòng)點(diǎn)擊加載更多的形式，保證底部?jī)?nèi)容不被用戶忽略。例如pmtoo網(wǎng)站采用的是自動(dòng)和手動(dòng)加載結(jié)合使用的形式。

8.4知識(shí)儲(chǔ)備8.4.1常見的分頁方式2.常規(guī)數(shù)字分頁（1）箭頭和圓點(diǎn)分頁

箭頭和圓點(diǎn)分頁通常用于展示型內(nèi)容，內(nèi)容大小固定且內(nèi)容較少時(shí)使用。這兩種形式通常情況下會(huì)一起使用，箭頭方便用戶進(jìn)行切換，圓點(diǎn)標(biāo)識(shí)數(shù)量和當(dāng)前的位置。例如，網(wǎng)站輪播圖。（2）下拉刷新和上拉加載

下拉刷新和上拉加載適用于移動(dòng)端中的列表分頁，效果與上文所講的瀑布流分頁相似，只不過觸發(fā)條件從用戶在PC端滾動(dòng)鼠標(biāo)滾輪變?yōu)樵谝苿?dòng)端滑動(dòng)屏幕，當(dāng)列表滑動(dòng)觸頂時(shí)用戶下拉則刷新列表第一頁內(nèi)容，當(dāng)列表滑動(dòng)觸底時(shí)用戶上滑則加載列表下一頁內(nèi)容，當(dāng)所有頁加載完成時(shí)列表底部提示用戶無更多內(nèi)容。

在實(shí)際產(chǎn)品設(shè)計(jì)中，可能會(huì)根據(jù)列表內(nèi)容和使用場(chǎng)景結(jié)合幾種分頁優(yōu)點(diǎn)去設(shè)計(jì)分頁，以帶來最佳的用戶交互體驗(yàn)。啟嘉校園項(xiàng)目屬于移動(dòng)端，內(nèi)容檢索性較弱，采用的便是下拉刷新和上拉加載的分頁形式。

8.4知識(shí)儲(chǔ)備8.4.2uni.uploadFile文件上傳uni-app使用uploadFile方法進(jìn)行文件上傳。文件上傳時(shí)客戶端要發(fā)起一個(gè)POST請(qǐng)求，其中content-type設(shè)為multipart/form-data類型。

文件上傳時(shí)先獲取到上傳資源的臨時(shí)路徑，如上傳圖片，先通過uni.chooseImage方法獲取到一個(gè)本地資源的臨時(shí)文件路徑，然后再通過uploadFile方法將其上傳到指定服務(wù)器中。下表是uni.uploadFile參數(shù)說明（部分），詳情見教材參數(shù)名類型必填說明平臺(tái)差異說明urlString是開發(fā)者服務(wù)器url

filesArray是（files和filePath選其一）需要上傳的文件列表。使用files時(shí)，filePath和name不生效App、H5（2.6.15+）fileTypeString見平臺(tái)差異說明文件類型，image/video/audio僅支付寶小程序，且必填fileFile否要上傳的文件對(duì)象僅H5（2.6.15+）支持filePathString是（files和filePath選其一）要上傳文件資源的路徑

8.4知識(shí)儲(chǔ)備8.4.2

uni.uploadFile文件上傳注意事項(xiàng)：App支持多文件上傳，微信小程序只支持單文件上傳，傳多個(gè)文件需要重復(fù)調(diào)用本API接口，所以跨端的寫法就是循環(huán)調(diào)用uni.uploadFile方法。在App平臺(tái)中選擇和上傳非圖像、視頻格式文件，參考：/article/35547。網(wǎng)絡(luò)請(qǐng)求的超時(shí)時(shí)間可以統(tǒng)一在manifest.json中配置[networkTimeout](#networktimeout)。支付寶小程序開發(fā)工具上傳文件后返回的http狀態(tài)碼為字符串形式，支付寶小程序真機(jī)返回的狀態(tài)碼為數(shù)字形式，二者返回值類型不同。

8.4知識(shí)儲(chǔ)備8.4.2

uni.uploadFile文件上傳files參數(shù)files參數(shù)是一個(gè)file對(duì)象的數(shù)組，file對(duì)象的結(jié)構(gòu)下表參數(shù)名類型必填說明nameString否multipart提交時(shí)，表單的項(xiàng)目名，默認(rèn)為filefileFile否要上傳的文件對(duì)象，僅H5（2.6.15+）支持uriString是文件的本地地址success返回參數(shù)說明見下表參數(shù)類型說明dataString開發(fā)者服務(wù)器返回的數(shù)據(jù)statusCodeNumber開發(fā)者服務(wù)器返回的HTTP狀態(tài)碼

8.4知識(shí)儲(chǔ)備8.4.2

uni.uploadFile文件上傳文件上傳功能實(shí)現(xiàn)的部分代碼（完整代碼見教材）

如果希望返回一個(gè)uploadTask對(duì)象，需要至少傳入success/fail/complete參數(shù)中的一個(gè)，如果沒有上述參數(shù)，則會(huì)返回封裝后的Promise對(duì)象。例如：

8.4知識(shí)儲(chǔ)備8.4.2

uni.uploadFile文件上傳uploadTask對(duì)象的方法列表onProgressUpdate返回參數(shù)說明方法參數(shù)說明abort

中斷上傳任務(wù)onProgressUpdatecallback監(jiān)聽上傳進(jìn)度變化onHeadersReceivedcallback監(jiān)聽HTTPResponseHeader事件。會(huì)比請(qǐng)求完成事件更早,僅微信小程序平臺(tái)支持offProgressUpdatecallback取消監(jiān)聽上傳進(jìn)度變化事件，僅微信小程序平臺(tái)支持offHeadersReceivedcallback取消監(jiān)聽HTTPResponseHeader事件，僅微信小程序平臺(tái)支持參數(shù)類型說明progressNumber上傳進(jìn)度百分比totalBytesSentNumber已經(jīng)上傳的數(shù)據(jù)長(zhǎng)度，單位BytestotalBytesExpectedToSendNumber預(yù)期需要上傳的數(shù)據(jù)總長(zhǎng)度，單位Bytes

8.4知識(shí)儲(chǔ)備8.4.2

uni.uploadFile文件上傳uploadTask對(duì)象的使用，參見下面的示例代碼uni.chooseImage({ success:(chooseImageRes)=>{ consttempFilePaths=chooseImageRes.tempFilePaths; constuploadTask=uni.uploadFile({ url:'/upload',//僅為示例，非真實(shí)的接口地址 filePath:tempFilePaths[0], name:'file', formData:{ 'user':'test' }, success:(uploadFileRes)=>{ console.log(uploadFileRes.data); } });

uploadTask.onProgressUpdate((res)=>{ console.log('上傳進(jìn)度'+gress); console.log('已經(jīng)上傳的數(shù)據(jù)長(zhǎng)度'+res.totalBytesSent); console.log('預(yù)期需要上傳的數(shù)據(jù)總長(zhǎng)度'+res.totalBytesExpectedToSend);

//測(cè)試條件，取消上傳任務(wù)。 if(gress>50){ uploadTask.abort(); } }); }});

8.4知識(shí)儲(chǔ)備8.4.3

uni-app頁面間通訊

自HBuilderX2.0.0起支持uni.$emit、uni.$on、uni.$once、uni.$off方法，使用這些方法可以方便的進(jìn)行頁面間通訊，觸發(fā)的事件都是App全局級(jí)別的，跨任意組件、頁面、nvue、vue等。

自HBuilderX2.0.0起支持uni.$emit、uni.$on、uni.$once、uni.$off方法，使用這些方法可以方便的進(jìn)行頁面間通訊，觸發(fā)的事件都是App全局級(jí)別的，跨任意組件、頁面、nvue、vue等。uni.$emit(eventName,OBJECT)方法觸發(fā)全局的自定義事件，附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)函數(shù)，參數(shù)說明見表參數(shù)類型說明eventNameString事件名OBJECTObject觸發(fā)事件攜帶的附加參數(shù)

8.4知識(shí)儲(chǔ)備8.4.3

uni-app頁面間通訊uni.$on(eventName,callback)方法

監(jiān)聽全局的自定義事件，事件由uni.$emit觸發(fā)，回調(diào)函數(shù)會(huì)接收事件觸發(fā)函數(shù)的傳入?yún)?shù)，參數(shù)說明見表：示例代碼如下：參數(shù)類型說明eventNameString事件名callbackFunction事件的回調(diào)函數(shù)

8.4知識(shí)儲(chǔ)備8.4.3

uni-app頁面間通訊uni.$once(eventName,callback)方法

監(jiān)聽全局的自定義事件，事件由uni.$emit觸發(fā)，但僅觸發(fā)一次，在第一次觸發(fā)之后移除該監(jiān)聽器，參數(shù)說明見表示例代碼如下：參數(shù)類型說明eventNameString事件名callbackFunction事件的回調(diào)函數(shù)

8.4知識(shí)儲(chǔ)備8.4.3

uni-app頁面間通訊uni.$off([eventName,callback])方法

移除全局自定義事件監(jiān)聽器，參數(shù)說明見表注意事項(xiàng)：如果uni.$off沒有傳入?yún)?shù)，則移除App級(jí)別的所有事件監(jiān)聽器。如果只提供了事件名（eventName），則移除該事件名對(duì)應(yīng)的所有監(jiān)聽器。如果同時(shí)提供了事件與回調(diào)，則只移除這個(gè)事件回調(diào)的監(jiān)聽器。提供的回調(diào)必須跟$on的回調(diào)為同一個(gè)才能移除這個(gè)回調(diào)的監(jiān)聽器。參數(shù)類型說明eventNameArray＜String＞事件名callbackFunction事件的回調(diào)函數(shù)

8.5任務(wù)實(shí)施8.5.1發(fā)布社區(qū)文章

在文章發(fā)布頁，用戶可以編輯文章并發(fā)布，可編輯的文章內(nèi)容有標(biāo)題、正文、圖片和話題，其中標(biāo)題、正文和話題為必填項(xiàng)，標(biāo)題最大長(zhǎng)度為16，正文最大長(zhǎng)度為500，標(biāo)題和正文內(nèi)容不得包含敏感詞匯；圖片最多上傳9張，單張圖片大小限制為2MB；話題分為“專業(yè)交流”和“表白墻”兩種，用戶可以選擇其中一種；用戶點(diǎn)擊發(fā)布按鈕驗(yàn)證文章內(nèi)容是否合規(guī)，合規(guī)則發(fā)布文章，否則彈出違規(guī)提示，文章發(fā)布成功后返回社區(qū)首頁。對(duì)發(fā)布文章的內(nèi)容進(jìn)行檢查時(shí)，可以使用自定義的敏感詞庫，也可以調(diào)用微信小程序的安全檢測(cè)接口，從而避免用戶受不良信息的干擾和誤導(dǎo)。邏輯分析接口分析代碼實(shí)現(xiàn)

8.5任務(wù)實(shí)施8.5.1發(fā)布社區(qū)文章邏輯分析

文章內(nèi)容大致可以分為三類，分別為文本（標(biāo)題和正文）、圖片和話題。對(duì)這三類內(nèi)容進(jìn)行編輯的邏輯如下：文章標(biāo)題和正文通過文本框進(jìn)行編輯，可以使用v-model指令進(jìn)行數(shù)據(jù)雙向綁定，獲取用戶輸入內(nèi)容。用戶上傳圖片時(shí)使用uni.chooseImage獲取相機(jī)和相冊(cè)權(quán)限，然后調(diào)用后端上傳圖片接口將圖片上傳到服務(wù)器，上傳前注意驗(yàn)證單張圖片大小和圖片總數(shù)是否超出限制，如超出則進(jìn)行相應(yīng)提示，上傳成功后服務(wù)器返回給前端圖片地址，前端將圖片地址保存到圖片數(shù)組中。用戶刪除圖片時(shí)調(diào)用后端刪除圖片接口，成功后將圖片文件從服務(wù)器中刪除，同時(shí)前端將被刪除的圖片地址從圖片數(shù)組中刪除。用戶可以選擇的話題為“專業(yè)交流”和“表白墻”。通過接口獲取數(shù)據(jù)并使用數(shù)組進(jìn)行儲(chǔ)存，用戶選擇的話題可以使用變量作為記錄話題的索引。用戶發(fā)布文章時(shí)首先驗(yàn)證圖片是否在上傳中，上傳中禁止發(fā)布文章，否則驗(yàn)證文章標(biāo)題和正文文本字?jǐn)?shù)是否超過限制以及是否插入話題，驗(yàn)證通過后調(diào)用后端發(fā)布文章接口。

8.5任務(wù)實(shí)施8.5.1發(fā)布社區(qū)文章接口分析

實(shí)現(xiàn)發(fā)布文章功能需要四個(gè)接口，分別為上傳圖片接口、刪除圖片接口、獲取話題接口和發(fā)布文章接口，接口詳情如下：上傳圖片接口API地址：{{HOST_API}}/article-imageAPI請(qǐng)求方式：POSTAPI請(qǐng)求：見表參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說明file[文件類型]

Header請(qǐng)求參數(shù)Body請(qǐng)求參數(shù)

8.5任務(wù)實(shí)施8.5.1發(fā)布社區(qū)文章刪除圖片接口API地址：{{HOST_API}}/common/delete-fileAPI請(qǐng)求方式：POSTAPI請(qǐng)求：見表Header請(qǐng)求參數(shù)Body請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說明urlString資源url地址獲取話題接口API地址：{{HOST_API}}/article-classify/topic-listAPI請(qǐng)求方式：GETAPI請(qǐng)求：見表參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌Header請(qǐng)求參數(shù)

8.5任務(wù)實(shí)施8.5.1發(fā)布社區(qū)文章發(fā)布文章接口API地址：{{HOST_API}}/IntactArticleAPI請(qǐng)求方式：POSTAPI請(qǐng)求：見表Header請(qǐng)求參數(shù)Body請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說明familyIdString文章類型titleString文章標(biāo)題contentString文章內(nèi)容imageLinkString文章圖片連接

8.5任務(wù)實(shí)施8.5.1發(fā)布社區(qū)文章代碼實(shí)現(xiàn)

由于圖片上傳功能在商品發(fā)布頁也會(huì)使用到，因此將圖片上傳功能封裝成組件使用，新建名為“image-upload”的組件，文件最終路徑為“components/image-upload/image-upload.vue”。

在/api目錄下創(chuàng)建名為“community”的目錄，用于存放社區(qū)相關(guān)頁面接口調(diào)用方法文件。在/api/community目錄下新建“publish-article.js”和“issue-community.js”文件。

在publish-article.js中，編寫獲取話題接口和發(fā)布文章接口的方法，部分如下：

8.5任務(wù)實(shí)施8.5.1發(fā)布社區(qū)文章

在api/common/index.js中，編寫刪除圖片的方法，代碼如下左側(cè)代碼中我們沒有編寫調(diào)用上傳圖片接口的方法，這是因?yàn)閳D片屬于文件類型，使用專門用來上傳文件的uni.uploadFile方法進(jìn)行上傳更加方便。封裝上傳圖片組件，部分代碼如下：

8.5任務(wù)實(shí)施8.5.1發(fā)布社區(qū)文章

上傳圖片組件封裝完成后，繼續(xù)來實(shí)現(xiàn)發(fā)布文章業(yè)務(wù)邏輯，在publish-article.vue中，調(diào)用getTopicListApi和postArticesApi方法獲取話題列表和發(fā)布文章，部分代碼如下

8.5任務(wù)實(shí)施8.5.2獲取文章列表獲取文章列表

用戶發(fā)布的文章在社區(qū)首頁以列表的形式呈現(xiàn)，文章列表分為綜合推薦、我的關(guān)注、專業(yè)交流和表白墻四類，點(diǎn)擊文章分類選項(xiàng)卡可以切換文章列表，文章列表默認(rèn)展示第一頁數(shù)據(jù)。當(dāng)用戶發(fā)布文章成功后返回社區(qū)首頁時(shí)，文章列表中第一條顯示用戶剛發(fā)布的文章。

用戶下拉文章列表到頂部時(shí)可刷新文章列表，上拉文章列表到底部時(shí)列表可加載下一頁，分頁加載中時(shí)列表底部顯示“正在加載中”，所有頁加載完成時(shí)列表底部顯示“已加載全部?jī)?nèi)容”。邏輯分析接口分析代碼實(shí)現(xiàn)

8.5任務(wù)實(shí)施8.5.2獲取文章列表邏輯分析

用戶進(jìn)入社區(qū)首頁分為兩種場(chǎng)景，一種為主動(dòng)進(jìn)入（直接打開或從其它頁面點(diǎn)擊底部導(dǎo)航欄跳轉(zhuǎn)）社區(qū)首頁；一種為用戶發(fā)布文章成功后自動(dòng)返回社區(qū)首頁，兩種場(chǎng)景下文章列表渲染規(guī)則有所不同。具體實(shí)現(xiàn)邏輯如下：

用戶主動(dòng)進(jìn)入社區(qū)首頁時(shí)，文章分類導(dǎo)航欄默認(rèn)選中“綜合推薦”類，調(diào)用后端獲取文章列表接口，獲取“綜合推薦”分類下第一頁文章數(shù)據(jù)，然后賦值到文章列表數(shù)組中。

用戶發(fā)布文章自動(dòng)返回社區(qū)首頁時(shí)，文章分類選項(xiàng)卡自動(dòng)選中用戶進(jìn)入文章發(fā)布頁時(shí)的文章類別，然后調(diào)用后端獲取文章列表接口，獲取當(dāng)前分類下的第一頁文章數(shù)據(jù)賦值到文章列表數(shù)組中，同時(shí)將用戶剛剛發(fā)布的文章移動(dòng)到數(shù)組第一項(xiàng)。

實(shí)現(xiàn)文章列表分頁，使用移動(dòng)端常用的下拉刷新和上拉加載，相關(guān)邏輯如下：

當(dāng)用戶下拉列表到頂部時(shí)，列表頂部出現(xiàn)橡皮筋效果，同時(shí)調(diào)用后端獲取文章列表接口，獲取當(dāng)前分類下的第一頁文章數(shù)據(jù)賦值到文章列表數(shù)組中。下拉刷新本質(zhì)上是獲取最新的一頁列表數(shù)據(jù)，即重新加載列表第一頁數(shù)據(jù)。

當(dāng)用戶上拉列表到底部時(shí)，列表底部顯示“正在加載中”，同時(shí)調(diào)用后端獲取文章列表接口，獲取當(dāng)前分類下的下一頁文章數(shù)據(jù)賦值到文章列表數(shù)組中。當(dāng)所有列表內(nèi)容加載完成后用戶再次上拉列表到底部時(shí)，列表底部顯示“已加載全部?jī)?nèi)容”。

8.5任務(wù)實(shí)施8.5.2獲取文章列表接口分析實(shí)現(xiàn)獲取文章列表功能需要兩個(gè)接口，分別為獲取文章分類接口和獲取文章列表接口，接口詳情如下：獲取文章分類接口API地址：{{HOST_API}}/article-classify/label-listAPI請(qǐng)求方式：POSTAPI請(qǐng)求：見表Header請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌

8.5任務(wù)實(shí)施8.5.2獲取文章列表獲取文章列表接口API地址：{{HOST_API}}/IntactArticle/:familyIdAPI請(qǐng)求方式：GETAPI請(qǐng)求：見表Header請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說明pageText頁數(shù)Query請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說明familyIdString分類id路徑參數(shù)

8.5任務(wù)實(shí)施8.5.2獲取文章列表代碼實(shí)現(xiàn)

在/api/community目錄下新建community.js文件，編寫調(diào)用獲取文章分類接口和獲取文章列表接口的方法，關(guān)鍵代碼如下：uni-app插件市場(chǎng)為開發(fā)者提供了很多項(xiàng)目中常用的組件，比如：輪播圖組件、圖片上傳組件、分頁組件等，在開發(fā)時(shí)為了提高開發(fā)效率，可以在能夠?qū)崿F(xiàn)業(yè)務(wù)需求的前提下直接選擇插件市場(chǎng)中使用率較高的組件使用，除此之外我們也可以自己封裝組件。

8.5任務(wù)實(shí)施8.5.2獲取文章列表

分頁功能在很多包含列表的頁面中都會(huì)使用到，我們可以將其封裝為組件以便在遇到其它頁面或項(xiàng)目的同類功能時(shí)使用。新建名為“custom-scroll-view”的組件，文件最終路徑為“components/custom-scroll-view/custom-scroll-view.vue”

分頁組件本質(zhì)上只