Web前端應用開發(fā)項目式教程（基于uni-app框架） 課件 任務7、8　實現(xiàn)登錄注冊功能、實現(xiàn)文章發(fā)布與文章分頁功能

任務7

實現(xiàn)登錄注冊功能Web前端應用開發(fā)項目式教程（基于uni-app框架）

目錄CONTENTS017.5任務實施7.7學習自評Part17.1任務描述7.2任務效果7.4知識儲備7.8課后練習7.9任務拓展7.3學習目標7.6任務測試本任務將實現(xiàn)啟嘉校園的用戶登錄注冊功能，常見的用戶登錄注冊方式有賬號密碼登錄、手機號或郵箱登錄、第三方平臺賬號登錄（如QQ、微信、微博等）、小程序終端授權登錄等。由于啟嘉校園是利用我國企業(yè)自主研發(fā)的跨平臺應用框架Uniapp開發(fā)的，具有一套代碼多端發(fā)布的優(yōu)勢，因此為了兼容不同終端的登錄，最終選擇賬號密碼登錄和小程序授權。

7.1任務描述

7.2任務效果任務效果掃描二維碼查看。

7.3學習目標能力目標素養(yǎng)目標知識目標通過模塊封裝和本地存儲，培養(yǎng)學習者良好的編碼習慣和行業(yè)開發(fā)技巧的認知。通過前后端分離開發(fā)模式，培養(yǎng)學習者團隊合作精神和縝密思維習慣。通過登錄注冊功能的開發(fā)，培養(yǎng)學習者信息安全意識。通過開發(fā)框架的技術優(yōu)勢，培養(yǎng)學習者愛國情懷，推進文化自信自強。了解常用登錄注冊方式。了解微信小程序授權登錄流程。了解前后端分離開發(fā)模式及其優(yōu)點。了解JWT實現(xiàn)身份驗證解決方案及其特點。了解請求封裝方法及其優(yōu)點。掌握使用uni.request方法進行接口調用。掌握使用Vue實現(xiàn)后端數(shù)據(jù)綁定。掌握uni.login登錄方法的使用。掌握本地緩存技術的使用。掌握uni-app條件編譯的使用。掌握uni-app應用生命周期方法的使用。掌握uni-appgetApp獲取當前應用實例方法的使用。掌握uni-appglobalData全局變量機制的使用。能夠使用uni-app調用后端接口。能夠使用uni.login方法和后端登錄接口實現(xiàn)微信小程序授權登錄功能。能夠使用本地緩存技術實現(xiàn)維護用戶登錄狀態(tài)功能。能夠使用uni-app條件編譯兼容小程序和H5端登錄方式和網絡請求地址存在的差異。

7.4知識儲備HTTP協(xié)議的特點無連接無連接的含義是限制每次連接只處理一個請求。服務器處理完客戶的請求，并收到客戶的應答后，即斷開連接。采用這種方式可以節(jié)省傳輸時間。媒體獨立只要客戶端和服務器知道如何處理的數(shù)據(jù)內容都可以通過HTTP協(xié)議傳輸?？蛻舳艘约胺掌髦付ㄟm合的MIME-type類型來描述傳輸?shù)膬热?。大多?shù)Web瀏覽器都擁有一系列可配置的輔助應用程序，它們告訴瀏覽器應該如何處理Web服務器發(fā)送過來的各種類型的內容。無狀態(tài)無狀態(tài)是指協(xié)議對于事務處理沒有記憶能力。缺少狀態(tài)意味著如果后續(xù)處理需要前面的信息，則它必須重傳，這樣可能導致每次連接傳送的數(shù)據(jù)量增大。另一方面，在服務器不需要之前的信息時它的應答就較快。7.4.1HTTP請求

HTTP（HyperTextTransferProtocol，超文本傳輸協(xié)議）是一套計算機通過網絡進行通信的規(guī)則。通過HTTP協(xié)議可以使客戶端（如Web瀏覽器）從服務端（如Web服務器）請求信息和服務，HTTP遵循請求（Request）/應答（Response）模型，即客戶端向服務端發(fā)送請求，服務端處理請求并返回應答，所有HTTP連接都被構造成一套請求和應答。

7.4知識儲備七大步驟建立TCP連接Web瀏覽器向Web服務器發(fā)送請求命令7.4.1HTTP請求通信步驟Web瀏覽器發(fā)送請求頭信息Web服務器應答Web服務器發(fā)送應答頭信息Web服務器向瀏覽器發(fā)送數(shù)據(jù)Web服務器關閉TCP連接

7.4知識儲備7.4.1HTTP請求請求方式方法描述GET請求指定的頁面信息，并返回實體主體HEAD類似于GET請求，只不過返回的響應中沒有具體的內容，用于獲取報頭POST向指定資源提交數(shù)據(jù)進行處理請求（例如提交表單或者上傳文件）。數(shù)據(jù)被包含在請求體中。POST請求可能會導致新的資源的建立和/或已有資源的修改PUT從客戶端向服務器傳送的數(shù)據(jù)取代指定的文檔的內容DELETE請求服務器刪除指定的頁面CONNECTHTTP/1.1協(xié)議中預留給能夠將連接改為管道方式的代理服務器OPTIONS允許客戶端查看服務器的性能TRACE回顯服務器收到的請求，主要用于測試或診斷

7.4知識儲備7.4.1HTTP請求消息結構客戶端請求消息：客戶端向服務器端發(fā)送的HTTP請求消息包括請求行（RequestLine）、請求頭部（Header）、空行和請求數(shù)據(jù)四個部分。服務器響應消息：HTTP響應消息也由四個部分組成，分別是狀態(tài)行、消息報頭、空行和響應正文。狀態(tài)碼

服務器響應客戶端請求時，首先會返回一個包含HTTP狀態(tài)碼的信息頭（ServerHeader）給客戶端。HTTP狀態(tài)碼由三個十進制數(shù)字組成，第一個十進制數(shù)字定義了狀態(tài)碼的類型。響應分為五類：信息響應（100-199），成功響應（200-299），重定向（300-399），客戶端錯誤（400-499）和服務器錯誤（500-599）。常見的HTTP狀態(tài)碼如下：200：請求成功301：資源（網頁等）被永久轉移到其它URL404：請求的資源（網頁等）不存在。500：內部服務器錯誤。

7.4知識儲備7.4.1

HTTP請求接口設計規(guī)范在接口設計中存在一個被普遍認可和遵守的設計原則——RESTful原則。其核心是將API拆分為邏輯上的資源，RESTful設計原則可以促使開發(fā)者更加規(guī)范的使用HTTP協(xié)議。GET/tickets：獲取ticket列表。GET/tickets/12：查看某個具體的ticket。POST/tickets：新建一個ticket。PUT/tickets/12：更新ticket12。DELETE/tickets/12：刪除ticekt12。GET/tickets/12/messages：獲取關于ticket12的messages。GET/tickets/12/messages/5：獲取關于ticket12的某個具體messages。POST/tickets/12/messages：新建關于ticket12的messages。PUT/tickets/12/messages/5：更新關于ticket12的messages5。PATCH/tickets/12/messages/5：局部更新關于ticket12的messages5。DELETE/tickets/12/messages/5：刪除關于ticket12的messages5。

7.4知識儲備7.4.2uni-app發(fā)送網絡請求uni-app使用uni.request方法發(fā)送網絡請求，在各個小程序平臺運行時，網絡相關的API在使用前需要配置域名白名單。參數(shù)名類型必填默認值說明平臺差異說明urlString是

開發(fā)者服務器接口地址

dataObject/String/ArrayBuffer否

請求的參數(shù)App3.3.7以下不支持ArrayBuffer類型headerObject否

設置請求的header，header中不能設置RefererApp、H5端會自動帶上cookie，且H5端不可手動修改methodString否GET有效值詳見下方說明

timeoutNumber否60000超時時間，單位msH5(HBuilderX2.9.9+)、APP(HBuilderX2.9.9+)、微信小程序（2.10.0）、支付寶小程序successFunction否

收到開發(fā)者服務器成功返回的回調函數(shù)

failFunction否

接口調用失敗的回調函數(shù)

completeFunction否

接口調用結束的回調函數(shù)（調用成功、失敗都會執(zhí)行）

7.4知識儲備7.4.2uni-app發(fā)送網絡請求method參數(shù)表示請求方式，其值必須為大寫，每個平臺支持的method有效值不同methodAppH5微信小程序支付寶小程序百度小程序字節(jié)跳動小程序、飛書小程序快手小程序京東小程序GET√√√√√√√√POST√√√√√√√√PUT√√√x√√xxDELETE√√√x√xxxCONNECTx√√xxxxxHEAD√√√x√xxxOPTIONS√√√x√xxxTRACEx√√xxxxx

7.4知識儲備7.4.2uni-app發(fā)送網絡請求success參數(shù)表示成功后的回調函數(shù)，其返回參數(shù)說明如下表所示。參數(shù)類型說明dataObject/String/ArrayBuffer開發(fā)者服務器返回的數(shù)據(jù)statusCodeNumber開發(fā)者服務器返回的HTTP狀態(tài)碼headerObject開發(fā)者服務器返回的HTTPResponseHeadercookiesArray.<string>開發(fā)者服務器返回的cookies，格式為字符串數(shù)組uni.request方法的使用示例如下。

7.4知識儲備7.4.3應用生命周期uni-app支持應用生命周期函數(shù)見表函數(shù)名說明onLaunch當uni-app初始化完成時觸發(fā)（全局只觸發(fā)一次）onShow當uni-app啟動，或從后臺進入前臺顯示onHide當uni-app從前臺進入后臺onError當uni-app報錯時觸發(fā)onUniNViewMessage對nvue頁面發(fā)送的數(shù)據(jù)進行監(jiān)聽onUnhandledRejection對未處理的Promise拒絕事件監(jiān)聽函數(shù)（2.8.1+）onPageNotFound頁面不存在監(jiān)聽函數(shù)onThemeChange監(jiān)聽系統(tǒng)主題變化應用生命周期函數(shù)的使用示例

7.4知識儲備7.4.3應用生命周期注意事項：應用生命周期僅可在App.vue中監(jiān)聽，在其他頁面監(jiān)聽無效。應用啟動參數(shù)，可以在APIuni.getLaunchOptionsSync獲取。onlaunch里進行頁面跳轉，如遇白屏報錯，請參考/article/35942。onPageNotFound頁面實際上已經打開了（比如通過分享卡片、小程序碼）且發(fā)現(xiàn)頁面不存在，才會觸發(fā)，API跳轉不存在的頁面不會觸發(fā)（如uni.navigateTo）。

7.4知識儲備7.4.4獲取當前應用實例方法getApp()函數(shù)用于獲取當前應用實例，一般用于獲取globalData注意事項：不要在定義App()內的函數(shù)中，或調用App前調用getApp()，可以通過this.$scope獲取對應的app實例。通過getApp()獲取實例之后，不要私自調用生命周期函數(shù)。當在首頁nvue中使用getApp()不一定可以獲取真正的App對象。對此提供了constapp=getApp({allowDefault:true})用來獲取原始的App對象，可以用來在首頁對globalData等初始化。

7.4知識儲備7.4.5globalData全局變量機制JS中操作globalData的方式：getApp().globalData.text='test'。在應用onLaunch時，getApp對象還未獲取，暫時可以使用this.globalData獲取globalData。如果需要把globalData的數(shù)據(jù)綁定到頁面上，可在頁面的onShow生命周期函數(shù)里進行變量重賦值。如果在nvue的weex編譯模式下使用globalData，由于weex生命周期不支持onShow，那么可以監(jiān)聽webview的show事件來實現(xiàn)onShow效果，或者直接使用weex生命周期中的beforeCreate函數(shù)。。globalData是簡單的全局變量，如果使用狀態(tài)管理，請使用vuex（main.js中定義）。小程序有globalData，這是一種簡單的全局變量機制。這套機制在uni-app里也可以使用，并且全端通用。

7.5任務實施7.5.1微信授權登錄登錄流程邏輯分析（1）在小程序端向微信接口服務發(fā)起授權登錄請求，獲取臨時登錄授權憑證code。（2）前端開發(fā)者通過調用開發(fā)者服務器的登錄接口，將code發(fā)送給開發(fā)者服務器。（3）開發(fā)者服務器在接收到code后，將code與項目的appid和appsecret一并發(fā)送給微信接口服務，微信接口服務收到這些信息后，會生成一個session_key和openid返回給開發(fā)者服務器。（4）開發(fā)者服務器接收到微信接口服務返回的session_key和openid后，會生成一個與session_key和openid關聯(lián)的自定義登錄態(tài)（一般為Token），這個自定義登錄態(tài)便是用戶的登錄令牌。（5）開發(fā)者服務器將自定義登錄態(tài)和登錄后需要展示的用戶基本信息返回給小程序端，小程序接收到這些信息后便完成了微信授權登錄流程。

7.5任務實施7.5.1微信授權登錄接口分析

實現(xiàn)登錄功能需要三個接口，分別為微信授權接口、后端登錄接口和查詢用戶信息接口。其中微信授權接口wx.login由微信接口服務提供，為方便開發(fā)者使用，uni-app將其封裝到uni.login方法中（1）用戶登錄接口API地址：{{HOST_API}}/account/loginAPI請求方式：POSTAPI請求：見表注意API地址中的“{{HOST_API}}”為一個常量，代表接口的服務地址，在項目準備部分我們已經將接口部署到本地，讀者需要在/api/index.js文件中將HOST_API值設置為本地部署的接口服務地址。參數(shù)字段名數(shù)據(jù)類型說明codestring微信臨時請求憑證

7.5任務實施7.5.1微信授權登錄API返回的響應參數(shù)參數(shù)字段名數(shù)據(jù)類型說明successBoolean響應狀態(tài)codeNumber響應碼messageString響應消息dataObject返回數(shù)據(jù)data.userObject用戶信息data.user.userIdString用戶iddata.user.idNumber用戶查詢iddata.user.userNameString用戶名data.user.classIdString班級iddata.user.phoneNumberObject電話號碼data.user.fansNumNumber粉絲數(shù)data.user.sexString性別0保密1女性2男性data.user.isDeletedString刪除狀態(tài)0可用1刪除（刪除后相關信息不可見）data.user.avatarString頭像地址data.user.signatureString個性簽名data.user.createTimeString創(chuàng)建時間data.user.updateTimeString更新時間data.user.tokenString認證令牌data.user.badgeNumber成就徽章0萌新小白1優(yōu)質博主參數(shù)字段名數(shù)據(jù)類型說明

7.5任務實施7.5.1微信授權登錄用戶登錄接口調用成功后，會返回上表中的響應數(shù)據(jù)，該數(shù)據(jù)結構符合http響應字段的標準結構。其中success為響應狀態(tài)，值為true或false，代表接口請求成功或失敗；code為響應狀態(tài)碼，具體響應狀態(tài)碼見下表；massage為響應消息，儲存提示的文本信息；data為一個響應對象，存儲業(yè)務數(shù)據(jù)。由于接口響應數(shù)據(jù)較多，下面僅展示一部分。錯誤碼錯誤信息-1失敗（此錯誤響應表明程序中發(fā)生了一個未知異常）101該用戶不存在102該用戶被禁用103用戶權限異常104無效簽名105token過期106token算法不一致107無效token108兩次密碼不一致109該用戶已注冊110密碼錯誤301添加數(shù)據(jù)失敗

7.5任務實施7.5.1微信授權登錄（2）查詢用戶基本信息接口API地址：{{HOST_API}}/account/userInfoAPI請求方式：GETAPI請求：見下表

7.5任務實施7.5.1微信授權登錄代碼實現(xiàn)

實際開發(fā)中，一般會對網絡請求進行封裝，在封裝方法中配置接口的請求地址和公共請求參數(shù)，添加接口響應狀態(tài)的公共處理方法等，以便實現(xiàn)對請求和響應的管理和后期的維護、拓展。下面我們將網絡請求封裝到一個單獨的文件中。

在根目錄創(chuàng)建名為“api”的目錄，用于存放網絡請求封裝方法文件。在/api目錄下新建js文件，文件命名為“index”，文件最終路徑為“/api/index.js”。編寫網絡請求封裝代碼，部分內容如下，詳細代碼請見教材。

7.5任務實施7.5.1微信授權登錄代碼實現(xiàn)

完成網絡請求封裝后，便可引入該模塊編寫用戶登錄接口和查詢用戶信息接口的調用方法，我們將同一頁面或組件中所有接口的調用方法編寫到同一個文件中，使代碼整體結構清晰、代碼復用性高且易于后期維護。在/api目錄下創(chuàng)建名為“my”的目錄，用于存放個人中心頁接口調用方法文件。在/api/my目錄下新建js文件，文件命名為“my”，文件最終路徑為“/api/my/my.js”。編寫調用用戶登錄接口和查詢用戶信息接口的方法，代碼內容如下。//引入網絡請求方法importrequestfrom"@/api/index.js"

//用戶登錄exportfunctionpostLoginApi(data){returnrequest({url:"/account/login",method:"post",data})}//查詢用戶信息exportfunctiongetUserInfo(){returnrequest({url:"/account/userInfo",method:"get"})}

7.5任務實施7.5.1微信授權登錄代碼實現(xiàn)獲取微信授權碼code，然后通過uni.getUserProfile獲取用戶信息，將code和用戶信息作為參數(shù)調用登錄接口請求方法獲取登錄令牌token，最后將token作為參數(shù)調用查詢用戶信息接口請求方法獲取用戶頭像、昵稱等信息。實現(xiàn)微信授權登錄業(yè)務邏輯，部分代碼如下，全部代碼請見教材

7.5任務實施7.5.2獲取用戶個人數(shù)據(jù)邏輯分析用戶登錄接口調用成功后獲取用戶個人數(shù)據(jù)，相關邏輯如下：（1）調用后端接口獲取用戶文章、關注和粉絲數(shù)量。（2）將獲取的數(shù)據(jù)賦值給Vue數(shù)據(jù)對象中對應屬性。（3）用戶退出登錄后，將Vue數(shù)據(jù)對象中對應屬性重新賦值為0。接口分析用戶文章、關注和粉絲相關數(shù)據(jù)通過“查詢用戶個人數(shù)據(jù)”后端接口獲取，接口詳情如下：API地址：{{HOST_API}}/user/numAPI請求方式：GET

API請求：見下表參數(shù)字段名數(shù)據(jù)類型說明tokenText認證令牌

7.5任務實施7.5.2獲取用戶個人數(shù)據(jù)代碼實現(xiàn)在“/api/my/my.js”文件中，編寫調用獲取用戶個人數(shù)據(jù)接口的方法，代碼如下。在“/pages/my/my.vue”文件，登錄后執(zhí)行的方法handleAfterLogin中添加調用獲取用戶個人數(shù)據(jù)方法。部分代碼如下，全部代碼見教材。

7.5任務實施7.5.3維護用戶登錄狀態(tài)維護用戶登錄狀態(tài)分保持登錄狀態(tài)和退出登錄，保持登錄狀態(tài)為用戶登錄時間具有一定的時效性，用戶登錄后在有效期內重新打開小程序無需重復登錄；退出登錄為登錄狀態(tài)到期自動退出登錄或用戶主動退出登錄。登錄令牌token用于判斷用戶的登錄狀態(tài)，因此可以通過維護token實現(xiàn)登錄狀態(tài)的維護。邏輯分析由于登錄令牌token是無狀態(tài)的，所以不會保存在服務器端，只保存在客戶端?？梢酝ㄟ^本地緩存技術將token保存到客戶端，需要使用token時，直接從本地緩存中讀取。項目中大部分后端接口都需要登錄后才可以進行調用，因此可以在調用后端接口時將token作為參數(shù)傳遞給服務器，用于服務器驗證用戶的登錄狀態(tài)。本任務中我們將token保存到本地，為了方便維護用戶登錄狀態(tài)，相關邏輯如下：（1）用戶登錄成功后，通過uni.setStorageSync將token寫到本地中。（2）頁面載入時，在uni-app頁面生命周期onShow方法中，通過uni.getStorageSync從本地讀取token，進行相關業(yè)務處理；（3）用戶退出登錄時，通過uni.setStorageSync將token賦值為Null，同時將儲存token、用戶基本信息和用戶個人數(shù)據(jù)的Vue數(shù)據(jù)對象清空，從而恢復到未登錄狀態(tài)。

7.5任務實施7.5.3維護用戶登錄狀態(tài)接口分析token的本地緩存讀取使用uni.setStorageSync和uni.getStorageSync方法實現(xiàn)，無需后端接口支持，退出登錄同樣僅需要從本地緩存中刪除token即可。代碼實現(xiàn)維護登錄狀態(tài)存在于“啟嘉校園”項目的多個頁面中，因此我們可以將這部分業(yè)務邏輯放到項目的入口文件“App.vue”中。部分代碼如下，全部代碼見教材

7.5任務實施7.5.3維護用戶登錄狀態(tài)完成token的本地緩存讀寫方法后，即可取消子任務7.5.1中相關代碼注釋，此時登錄狀態(tài)下重新打開小程序會從本地中讀取token，并判斷是否需要重新登錄。登錄狀態(tài)的維護還需要實現(xiàn)用戶退出登錄，用戶點擊退出登錄按鈕后從本地緩存中刪除保存的token值。部分代碼如下：

7.6任務測試測試條目是否通過點擊頭像可以調起微信授權登錄窗口

微信授權登錄成功后，在個人中心頁展示出用戶的昵稱、頭像及成就徽章

微信授權登錄成功后，在個人中心頁展示出用戶的文章、關注及粉絲數(shù)量

用戶退出登錄后，個人中心頁恢復到未登錄狀態(tài)

用戶登錄成功后，重新打開小程序個人中心頁仍處于登錄狀態(tài)

7.7自學評價評價內容是否了解/掌握是否了解常用登錄注冊方式

是否了解微信小程序授權登錄流程

是否了解前后端分離開發(fā)模式及其優(yōu)點

是否了解JWT實現(xiàn)身份驗證解決方案及其特點

是否了解請求封裝方法及其優(yōu)點

是否掌握使用uni.request方法進行接口調用

是否掌握使用Vue實現(xiàn)后端數(shù)據(jù)綁定

是否掌握uni.login登錄方法的使用

是否掌握本地緩存技術的使用

是否掌握uni-app條件編譯的使用

是否掌握uni-app應用生命周期方法的使用

是否掌握uni-appgetApp獲取當前應用實例方法的使用

是否掌握uni-appglobalData全局變量機制的使用

是否了解常用登錄注冊方式

是否了解微信小程序授權登錄流程

是否了解前后端分離開發(fā)模式及其優(yōu)點

7.8課后練習？1.選擇題（1）JWT是什么的縮寫？A.JSONWebTokenB.JavaWebTokenC.JavaScriptWebTokenD.JsonWebTool（2）在前后端分離開發(fā)模式中，前后端通過什么進行通信？A.HTTP請求B.WebSocketC.TCP連接D.串口通信（3）下列哪個選項不是本地緩存技術的使用場景？A.用戶登錄狀態(tài)的維護B.大量數(shù)據(jù)的處理C.網絡請求的緩存D.臨時數(shù)據(jù)的存儲和讀取2.填空題（1）使用

方法可以進行uni-app的條件編譯，以兼容不同終端（如小程序和H5）的登錄方式和網絡請求地址存在的差異。（2）在uni-app中，使用

方法可以進行接口調用。3.簡答題（1）簡述使用uni.login方法實現(xiàn)微信小程序授權登錄的步驟和注意事項。

7.9任務拓展任務拓展

在掌握上述知識后，本節(jié)的鞏固拓展任務是參照設計圖7-4和接口文檔，實現(xiàn)“個人資料頁”、“賬號認證頁”中修改個人資料功能和用戶認證功能?！皩殑︿h從磨礪出，梅花香自苦寒來”，我們將通過本節(jié)的拓展任務，反復錘煉、牢固本節(jié)知識點，達到技藝精湛、崗位勝任的目標。下面是本節(jié)任務的具體要求：

當用戶打開個人資料頁時顯示用戶頭像、昵稱、個簽、ID、性別、手機號和微信號，其中用戶ID不支持修改，其它內容均可修改。當用戶打開賬號認證頁時顯示用戶頭像和用戶認證的學校、院系、姓名和學號信息，其中用戶頭像不支持修改，其它內容均可修改。任務8

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

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

8.1任務描述

8.2任務效果掃碼查看效果圖

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

8.4知識儲備8.4.1常見的分頁方式

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

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

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

8.4知識儲備8.4.1常見的分頁方式1.瀑布流分頁（1）自動瀑布流

自動瀑布流分頁多用于資訊類、社交類產品，快速瀏覽內容和發(fā)現(xiàn)內容的場景，瀑布流下方沒有太多無關信息。其特點是當列表下滑到底部時會自動加載下一頁，例如微博的自動加載。（2）手動瀑布流

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

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

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

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

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

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

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

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

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

8.4知識儲備8.4.2

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

8.4知識儲備8.4.2

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

8.4知識儲備8.4.2

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

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

8.4知識儲備8.4.2

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

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

8.4知識儲備8.4.2

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

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

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

8.4知識儲備8.4.3

uni-app頁面間通訊

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

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

8.4知識儲備8.4.3

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

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

8.4知識儲備8.4.3

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

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

8.4知識儲備8.4.3

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

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

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

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

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

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

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

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

Header請求參數(shù)Body請求參數(shù)

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

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

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

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

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

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

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

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

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

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

8.5任務實施8.5.2獲取文章列表獲取文章列表

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

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

8.5任務實施8.5.2獲取文章列表邏輯分析

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

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

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