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

任務(wù)7

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

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

7.1任務(wù)描述

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

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

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

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

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

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

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

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

7.4知識儲備7.4.1

HTTP請求接口設(shè)計規(guī)范在接口設(shè)計中存在一個被普遍認可和遵守的設(shè)計原則——RESTful原則。其核心是將API拆分為邏輯上的資源，RESTful設(shè)計原則可以促使開發(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：獲取關(guān)于ticket12的messages。GET/tickets/12/messages/5：獲取關(guān)于ticket12的某個具體messages。POST/tickets/12/messages：新建關(guān)于ticket12的messages。PUT/tickets/12/messages/5：更新關(guān)于ticket12的messages5。PATCH/tickets/12/messages/5：局部更新關(guān)于ticket12的messages5。DELETE/tickets/12/messages/5：刪除關(guān)于ticket12的messages5。

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

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

dataObject/String/ArrayBuffer否

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

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

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

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

failFunction否

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

completeFunction否

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

7.4知識儲備7.4.2uni-app發(fā)送網(wǎng)絡(luò)請求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ā)送網(wǎng)絡(luò)請求success參數(shù)表示成功后的回調(diào)函數(shù)，其返回參數(shù)說明如下表所示。參數(shù)類型說明dataObject/String/ArrayBuffer開發(fā)者服務(wù)器返回的數(shù)據(jù)statusCodeNumber開發(fā)者服務(wù)器返回的HTTP狀態(tài)碼headerObject開發(fā)者服務(wù)器返回的HTTPResponseHeadercookiesArray.<string>開發(fā)者服務(wù)器返回的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里進行頁面跳轉(zhuǎn)，如遇白屏報錯，請參考/article/35942。onPageNotFound頁面實際上已經(jīng)打開了（比如通過分享卡片、小程序碼）且發(fā)現(xiàn)頁面不存在，才會觸發(fā)，API跳轉(zhuǎn)不存在的頁面不會觸發(fā)（如uni.navigateTo）。

7.4知識儲備7.4.4獲取當前應用實例方法getApp()函數(shù)用于獲取當前應用實例，一般用于獲取globalData注意事項：不要在定義App()內(nèi)的函數(shù)中，或調(diào)用App前調(diào)用getApp()，可以通過this.$scope獲取對應的app實例。通過getApp()獲取實例之后，不要私自調(diào)用生命周期函數(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中定義）。小程序有g(shù)lobalData，這是一種簡單的全局變量機制。這套機制在uni-app里也可以使用，并且全端通用。

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

7.5任務(wù)實施7.5.1微信授權(quán)登錄接口分析

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

7.5任務(wù)實施7.5.1微信授權(quán)登錄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刪除（刪除后相關(guān)信息不可見）data.user.avatarString頭像地址data.user.signatureString個性簽名data.user.createTimeString創(chuàng)建時間data.user.updateTimeString更新時間data.user.tokenString認證令牌data.user.badgeNumber成就徽章0萌新小白1優(yōu)質(zhì)博主參數(shù)字段名數(shù)據(jù)類型說明

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

7.6任務(wù)測試測試條目是否通過點擊頭像可以調(diào)起微信授權(quán)登錄窗口

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

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

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

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

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

是否了解微信小程序授權(quán)登錄流程

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

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

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

是否掌握使用uni.request方法進行接口調(diào)用

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

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

是否掌握本地緩存技術(shù)的使用

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

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

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

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

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

是否了解微信小程序授權(quán)登錄流程

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

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

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

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

7.9任務(wù)拓展任務(wù)拓展

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

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

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

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

8.1任務(wù)描述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文件上傳時先獲取到上傳資源的臨時路徑，如上傳圖片，先通過uni.chooseImage方法獲取到一個本地資源的臨時文件路徑，然后再通過uploadFile方法將其上傳到指定服務(wù)器中。下表是uni.uploadFile參數(shù)說明（部分），詳情見教材參數(shù)名類型必填說明平臺差異說明urlString是開發(fā)者服務(wù)器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支持多文件上傳，微信小程序只支持單文件上傳，傳多個文件需要重復調(diào)用本API接口，所以跨端的寫法就是循環(huán)調(diào)用uni.uploadFile方法。在App平臺中選擇和上傳非圖像、視頻格式文件，參考：/article/35547。網(wǎng)絡(luò)請求的超時時間可以統(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對象的結(jié)構(gòu)下表參數(shù)名類型必填說明nameString否multipart提交時，表單的項目名，默認為filefileFile否要上傳的文件對象，僅H5（2.6.15+）支持uriString是文件的本地地址success返回參數(shù)說明見下表參數(shù)類型說明dataString開發(fā)者服務(wù)器返回的數(shù)據(jù)statusCodeNumber開發(fā)者服務(wù)器返回的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

中斷上傳任務(wù)onProgressUpdatecallback監(jiān)聽上傳進度變化onHeadersReceivedcallback監(jiān)聽HTTPResponseHeader事件。會比請求完成事件更早,僅微信小程序平臺支持offProgressUpdatecallback取消監(jiān)聽上傳進度變化事件，僅微信小程序平臺支持offHeadersReceivedcallback取消監(jiān)聽HTTPResponseHeader事件，僅微信小程序平臺支持參數(shù)類型說明progressNumber上傳進度百分比totalBytesSentNumber已經(jīng)上傳的數(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('已經(jīng)上傳的數(shù)據(jù)長度'+res.totalBytesSent); console.log('預期需要上傳的數(shù)據(jù)總長度'+res.totalBytesExpectedToSend);

//測試條件，取消上傳任務(wù)。 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)聽器回調(diào)函數(shù)，參數(shù)說明見表參數(shù)類型說明eventNameString事件名OBJECTObject觸發(fā)事件攜帶的附加參數(shù)

8.4知識儲備8.4.3

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

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

8.4知識儲備8.4.3

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

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

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

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

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

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

8.5任務(wù)實施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任務(wù)實施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任務(wù)實施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文章內(nèi)容imageLinkString文章圖片連接

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

由于圖片上傳功能在商品發(fā)布頁也會使用到，因此將圖片上傳功能封裝成組件使用，新建名為“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ù)實施8.5.1發(fā)布社區(qū)文章

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

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

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

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

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

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

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

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

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

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