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

任務(wù)9

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

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

9.1任務(wù)描述

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

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

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

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

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

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

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

用戶進入文章詳情頁分為三種場景：

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

（2）通過搜索的文章列表進入。

（3）通過用戶中心的文章列表進入。

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

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

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

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

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

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

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

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

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

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

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

9.5任務(wù)實施9.5.2

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

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

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

9.5任務(wù)實施9.5.2

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

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

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

9.5任務(wù)實施9.5.2

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

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

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

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

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

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

9.5任務(wù)實施9.5.3

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

9.5任務(wù)實施9.5.3

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

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

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

9.5任務(wù)實施9.5.3

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

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

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

9.5任務(wù)實施9.5.3

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

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

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

9.5任務(wù)實施9.5.3

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

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

9.5任務(wù)實施9.5.3

實現(xiàn)文章評論功能代碼實現(xiàn)

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

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

9.6任務(wù)測試

9.7自學(xué)評價

9.8課后練習(xí)？1.選擇題（1）在uni-app中，可以使用什么方法顯示加載狀態(tài)？A.uni.showLoading方法B.uni.showToast方法C.uni.showModal方法D.uni.showOptionDialog方法（2）在uni-app中，可以使用什么方法將圖片地址字符串按指定字符分割成圖片數(shù)組？A.split方法B.substring方法C.replace方法D.toLowerCase方法（3）“啟嘉校園”項目文章詳情頁的評論區(qū)展示結(jié)構(gòu)是？A.平鋪式B.主題式C.蓋樓式D.以上選項均不是2.填空題（1）在uni-app中，可以使用

方法實現(xiàn)隱藏加載狀態(tài)。（2）在uni-app中，可以通過

方法設(shè)置轉(zhuǎn)發(fā)信息。3.簡答題（1）簡述在uni-app中如何解決微信小程序端和H5端（如微信公眾號網(wǎng)頁）在轉(zhuǎn)發(fā)功能上的實現(xiàn)差異？

9.9任務(wù)拓展任務(wù)拓展利用商品詳情頁設(shè)計圖和接口文檔實現(xiàn)以下具體功能：商品詳情頁展示發(fā)布人信息、商品標題、商品圖片、商品描述及商品價格。可以對商品發(fā)布者進行關(guān)注或取消關(guān)注操作。可以對商品進行點贊和取消點贊操作?？梢詫ι唐吩u論，也可對其他用戶的評論進行回復(fù)?？梢垣@取評論和刪除評論（只能刪除自己發(fā)布的評論）。商品圖片以輪播圖的方式進行展示，最多展示9張圖片。詳細內(nèi)容見教材

9.9任務(wù)拓展案例拓展某社區(qū)為了健全服務(wù)體制更好的服務(wù)居民，決定搭建一個社區(qū)信息發(fā)布反饋平臺，能夠讓居民及時了解相關(guān)利民政策與當?shù)刭Y訊，同時支持社區(qū)居民通過平臺對發(fā)布的信息進行反饋和評價。請你根據(jù)以上需求完成平臺設(shè)計與開發(fā)。任務(wù)10

項目測試Web前端應(yīng)用開發(fā)項目式教程（基于uni-app框架）

目錄CONTENTS0110.5任務(wù)實施10.7學(xué)習(xí)自評Part110.1任務(wù)描述10.2任務(wù)效果10.4知識儲備10.8課后練習(xí)10.9任務(wù)拓展10.3學(xué)習(xí)目標10.6任務(wù)測試本任務(wù)將通過知識儲備講解項目測試相關(guān)知識，包括測試的基本概念、測試的作用、測試實踐方法以及常用的測試工具等，并帶領(lǐng)讀者編寫一份測試用例，學(xué)習(xí)測試用例的編寫方法。

10.1任務(wù)描述

10.2任務(wù)效果項目測試效果圖

10.3學(xué)習(xí)目標能力目標素養(yǎng)目標知識目標通過了解測試的重要性，培養(yǎng)學(xué)習(xí)者關(guān)注產(chǎn)品質(zhì)量和用戶體驗，提高學(xué)習(xí)者服務(wù)能力。通過學(xué)習(xí)編寫測試用例，培養(yǎng)學(xué)習(xí)者養(yǎng)成細心和耐心的良好習(xí)慣。了解什么是項目測試。了解測試的發(fā)展史。了解測試的作用。了解測試的類型。了解測試的重要性。了解測試實踐方法。了解測試常用工具。掌握測試用例的編寫方法。能夠使用文檔編輯工具編寫測試用例。能夠在實際工作中配合測試人員進行項目測試。

10.4知識儲備10.4.1什么是測試

測試是指對軟件或系統(tǒng)進行檢測和驗證的過程，以確定其是否滿足規(guī)格說明書或用戶需求。測試可以通過模擬各種情況來檢查軟件的功能、性能、安全性、兼容性等方面。測試可以幫助確保軟件質(zhì)量，減少缺陷與故障的發(fā)生，提升軟件質(zhì)量及用戶滿意度。

10.4知識儲備10.4.2

軟件測試發(fā)展史

軟件測試是伴隨著軟件的產(chǎn)生而產(chǎn)生。早期的軟件開發(fā)過程中軟件規(guī)模都很小、復(fù)雜程度低，軟件開發(fā)的過程混亂無序、相當隨意，測試的含義比較狹窄，開發(fā)人員將測試等同于“調(diào)試”，目的是糾正軟件中已經(jīng)知道的故障，常常由開發(fā)人員自己完成這部分的工作。對測試的投入極少，測試介入時間也晚，常常是等到形成代碼，產(chǎn)品已經(jīng)基本完成時才進行測試。到了上世紀80年代初期，軟件和IT行業(yè)快速發(fā)展，軟件趨向大型化、高復(fù)雜度，軟件的質(zhì)量越來越重要。這個時候，一些軟件測試的基礎(chǔ)理論和實用技術(shù)開始形成，并且人們開始為軟件開發(fā)設(shè)計了各種流程和管理方法，軟件開發(fā)的方式也逐漸由混亂無序的開發(fā)過程過渡到結(jié)構(gòu)化的開發(fā)過程，以結(jié)構(gòu)化分析與設(shè)計、結(jié)構(gòu)化評審、結(jié)構(gòu)化程序設(shè)計以及結(jié)構(gòu)化測試為特征。人們還將“質(zhì)量”的概念融入其中，軟件測試定義發(fā)生了改變，測試不單純是一個發(fā)現(xiàn)錯誤的過程，而且將測試作為軟件質(zhì)量保證(SQA)的主要職能，包含軟件質(zhì)量評價的內(nèi)容，BillHetzel在《軟件測試完全指南》(CompleteGuideofSoftwareTesting)一書中指出：“測試是以評價一個程序或者系統(tǒng)屬性為目標的任何一種活動。測試是對軟件質(zhì)量的度量?！边@個定義至今仍被引用。軟件開發(fā)人員和測試人員開始坐在一起探討軟件工程和測試問題。軟件測試已有了行業(yè)標準(IEEE/ANSI)，1983年IEEE提出的軟件工程術(shù)語中給軟件測試下的定義是：“使用人工或自動的手段來運行或測定某個軟件系統(tǒng)的過程，其目的在于檢驗它是否滿足規(guī)定的需求或弄清預(yù)期結(jié)果與實際結(jié)果之間的差別”。這個定義明確指出:軟件測試的目的是為了檢驗軟件系統(tǒng)是否滿足需求。它再也不是一個一次性的，只是開發(fā)后期的活動，而是與整個開發(fā)流程融合成一體。軟件測試已成為一個專業(yè)，需要運用專業(yè)的方法和手段，需要專業(yè)人才和專家來承擔。

10.4知識儲備10.4.3

軟件測試的作用

軟件測試作為軟件質(zhì)量保證的重要手段，應(yīng)盡早融入到軟件開發(fā)過程中，并且要確保測試工作的客觀、準確、系統(tǒng)、可靠。作為軟件測試人員一定要有較強的質(zhì)量意識，與團隊成員密切協(xié)作、充分溝通，以確保測試工作順利進行。通過保障軟件質(zhì)量，為國有軟件的發(fā)展和信息安全做出貢獻。軟件測試的作用主要體現(xiàn)在以下幾點：（1）發(fā)現(xiàn)缺陷：測試可以發(fā)現(xiàn)軟件中的缺陷和錯誤，并及時通知開發(fā)團隊修復(fù)，確保軟件質(zhì)量。（2）提高可靠性：測試可以驗證軟件的可靠性，確保軟件在各種情況下都能正常工作。（3）確保兼容性：測試可以檢查軟件的兼容性，確保軟件能在各種操作系統(tǒng)、瀏覽器和設(shè)備上正常工作。（4）提高性能：測試可以評估軟件的性能，并發(fā)現(xiàn)性能問題，確保軟件能夠滿足用戶的需求。

10.4知識儲備10.4.4

軟件測試的重要性

在開發(fā)軟件時，很少有人會質(zhì)疑質(zhì)量控制的必要性。延遲交付或軟件缺陷會損害品牌聲譽，從而導(dǎo)致客戶失去信心進而流失客戶。在極端情況下，錯誤或缺陷可能會降低互聯(lián)系統(tǒng)的性能或?qū)е聡乐毓收稀?/p>

例如，日產(chǎn)汽車公司因為安全氣囊傳感器檢測器的軟件缺陷而不得不召回超過100萬輛汽車；導(dǎo)致12億美元的軍用衛(wèi)星發(fā)射失敗的軟件錯誤；2016年，美國在資產(chǎn)中出現(xiàn)的軟件故障導(dǎo)致了1.1萬億美元的經(jīng)濟損失，更為嚴重的是，這些軟件故障還影響了44億客戶。這些數(shù)字所代表的后果不言自明。

雖然測試本身會產(chǎn)生一定的開銷，但如果公司采用良好的測試方法和質(zhì)量保證流程，他們每年可以在開發(fā)和支持方面節(jié)省數(shù)百萬美元。早期的軟件測試會在產(chǎn)品面世之前發(fā)現(xiàn)問題。開發(fā)團隊越早收到測試反饋，他們就能越早解決架構(gòu)缺陷、糟糕的設(shè)計決策、無效或不正確的功能、安全漏洞、可擴展性等問題。

如果開發(fā)留出了足夠的測試時間，那么可以提高軟件的可靠性，并交付幾乎沒有錯誤的高質(zhì)量應(yīng)用程序。滿足甚至超出客戶期望的系統(tǒng)可能會帶來更多的銷售額和更大的市場份額。

10.4知識儲備10.4.5

軟件測試的類型

目前存在多種不同類型的軟件測試，而每種軟件測試都具有特定的目標和策略：（1）驗收測試：驗證整個系統(tǒng)是否按預(yù)期工作。（2）集成測試：確保軟件組件或功能可以一起運行。（3）單元測試：驗證每個軟件單元是否按預(yù)期執(zhí)行。單元是應(yīng)用程序中最小的可測試組件。（4）功能測試：根據(jù)功能需求，通過模擬業(yè)務(wù)場景來檢查功能。黑盒測試是驗證功能的常用方法。（5）性能測試：測試軟件在不同工作負載下的表現(xiàn)。例如，負載測試用于評估真實負載條件下的性能。（6）回歸測試：檢查新功能是否破壞或降低功能的效果。如果沒有時間進行完整的回歸測試，那么可以使用健全測試在表面級別驗證菜單、功能和命令。（7）壓力測試：測試系統(tǒng)在崩潰之前可以承受多大的壓力，這是一種非功能性測試。（8）可用性測試：驗證客戶使用系統(tǒng)或Web應(yīng)用程序完成任務(wù)的程度。

10.4知識儲備10.4.6

軟件測試最佳實踐

軟件測試遵循一個通用過程，此過程包括定義測試環(huán)境、開發(fā)測試用例、編寫腳本、分析測試結(jié)果和提交缺陷報告。測試可能非常耗時。對于小型系統(tǒng)，手動測試或臨時測試可能就足夠了。但是，對于大型系統(tǒng)，通常會使用一些工具來自動執(zhí)行任務(wù)，即自動化測試。自動化測試可幫助團隊實施不同的場景，測試差異化因素（例如將組件遷移到云環(huán)境中），并快速獲得關(guān)于哪些組件有效和哪些組件無效的反饋，優(yōu)秀的測試方法應(yīng)包括應(yīng)用程序編程接口（API）、用戶界面和系統(tǒng)級別，自動化測試越多，運行得越早，效果就越好。有些公司的研發(fā)團隊會構(gòu)建內(nèi)部自動化測試工具。

10.4知識儲備10.4.7

軟件測試常用工具

軟件測試工具在軟件測試中扮演著至關(guān)重要的角色，它們可以提高測試效率、準確度、可重復(fù)性，并降低測試成本。通過使用測試工具，測試人員可以自動化執(zhí)行測試用例，快速準確地發(fā)現(xiàn)和跟蹤問題，并生成詳細的測試報告。此外，測試工具還具有易于管理和維護、支持多種平臺和語言以及安全性高等優(yōu)點，使用測試工具成為軟件測試中不可或缺的重要測試方法之一。（1）自動化測試工具：如Selenium、Appium、JMeter等，可以自動執(zhí)行測試用例和生成測試報告，提高測試效率。（2）缺陷管理工具：如JIRA、Bugzilla等，用于跟蹤和管理缺陷。（3）性能測試工具：如LoadRunner、JMeter等，用于測試軟件的性能指標。（4）安全測試工具：如BurpSuite、Nessus等，用于測試軟件的安全性。（5）模擬器和仿真器：如Android模擬器、Xcode模擬器等，用于測試移動設(shè)備上的應(yīng)用程序。（6）測試管理工具：如TestRail、Zephyr等，用于管理測試計劃、測試用例、測試結(jié)果和缺陷跟蹤等。

10.5任務(wù)實施10.5.1劃分功能模塊個人資料效果圖我們以測試“啟嘉校園”項目個人資料頁（如圖所示）相關(guān)功能為例編寫測試用例，首先需要劃分個人資料頁中包含的功能模塊，以便后續(xù)按模塊分開測試，提高測試的精準性。需求編號模塊名稱功能名稱1個人資料頭像上傳2個人資料修改個人昵稱3個人資料修改個人簽名4個人資料修改手機號5個人資料修改微信號

10.5任務(wù)實施10.5.2設(shè)計并編寫測試用例最后，按照測試用例模板8大要素：編號、用例標題、項目/模塊、前置條件、測試步驟、測試數(shù)據(jù)、預(yù)期結(jié)果和重要程度，完成相關(guān)功能測試用例的編寫。測試用例可以使用Excel文檔進行編寫，例如為修改個人資料和手機號功能編寫測試用例，結(jié)果如圖所示。

10.6任務(wù)測試

10.7自學(xué)評價

10.8課后練習(xí)？1.選擇題（1）在軟件開發(fā)團隊中哪個崗位成員通常負責編寫測試用例？A.項目經(jīng)理B.開發(fā)工程師C.測試工程師D.技術(shù)支持工程師（2）在軟件測試中，（）是性能測試的主要目的。A.驗證每個軟件單元是否按預(yù)期執(zhí)行B.確保軟件組件或功能可以一起運行C.測試軟件在不同工作負載下的表現(xiàn)D.驗證客戶使用系統(tǒng)或Web應(yīng)用程序完成任務(wù)的程度（3）下列哪項是自動化測試工具？A.AppiumB.NessusC.LoadRunnerD.JIRA2.填空題（1）軟件測試是指對軟件或系統(tǒng)進行

和

的過程。（2）測試可以檢查軟件的

，確保軟件能在各種操作系統(tǒng)、瀏覽器和設(shè)備上正常工作。3.簡答題（1）請簡要說明為什么編寫測試用例是軟件測試過程中的關(guān)鍵步驟。

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

請編寫“啟嘉校園”項目“我的”模塊中所有功能模塊的測試用例，并按照測試用例測試項目功能是否存在缺陷。任務(wù)11項目部署與發(fā)布Web前端應(yīng)用開發(fā)項目式教程（基于uni-app框架）

目錄CONTENTS0111.5任務(wù)實施11.7學(xué)習(xí)自評Part111.1任務(wù)描述11.2任務(wù)效果11.4知識儲備-uni-app項目發(fā)布11.8課后練習(xí)11.9任務(wù)拓展11.3學(xué)習(xí)目標11.6任務(wù)測試

本任務(wù)將使用HBuilderX完成“啟嘉校園”項目的發(fā)布，以發(fā)布到H5端和微信小程序端為例，講解uni-app項目發(fā)布的操作步驟和相關(guān)注意事項。

11.1任務(wù)描述

11.2任務(wù)效果小程序版本管理

11.3學(xué)習(xí)目標能力目標素養(yǎng)目標知識目標通過講解uni-app項目發(fā)布，培養(yǎng)學(xué)習(xí)者的目標導(dǎo)向和執(zhí)行力，能夠堅定不移的執(zhí)行計劃，確保任務(wù)圓滿完成。通過講解uni-app多端發(fā)布，提高學(xué)習(xí)者遵守規(guī)則的意識，培養(yǎng)良好的開發(fā)習(xí)慣。

了解uni-app項目發(fā)布流程。掌握uni-app項目的配置方法。掌握HBuilderX打包項目的方法。掌握云服務(wù)部署H5項目的方法。掌握uni-app項目發(fā)布到微信小程序的方法。能夠使用HBuilderX發(fā)布uni-app項目到H5。能夠使用HBuilderX發(fā)布uni-app項目到微信小程序。

11.4知識儲備-uni-app項目發(fā)布

使用uni-app發(fā)布項目流程如下：（1）確保項目已經(jīng)開發(fā)完成，并且通過測試。（2）打開uni-app項目所在的文件夾，找到項目的根目錄。（3）在根目錄下找到manifest.json文件。（4）在manifest.json文件中找到發(fā)布平臺特有配置字段（如：App平臺為app-plus，H5平臺為h5，微信小程序平臺為mp-weixin），該字段用于配置uni-app的擴展功能。（5）在發(fā)布平臺特有配置字段下添加需要發(fā)布的平臺的相關(guān)配置。（6）根據(jù)各個平臺的發(fā)布流程，進行項目的提交和審核。（7）等待審核通過后，即可發(fā)布uni-app應(yīng)用。

11.5任務(wù)實施11.5.1發(fā)布到H5步驟一：配置項目信息h5配置

11.5任務(wù)實施11.5.1發(fā)布到H5步驟二：打包項目發(fā)布到網(wǎng)站-H5手機版單擊HBuilderX工具欄【發(fā)行】->選擇【網(wǎng)站-H5手機版】，即可生成項目H5打包文件，文件保存于unpackage目錄

11.5任務(wù)實施11.5.1發(fā)布到H5步驟三：部署項目準備服務(wù)器首先準備一臺用來部署項目的服務(wù)器，可以自行搭建服務(wù)器，但是為了方便部署和管理推薦使用運營商提供云服務(wù)器。安裝Nginx上傳項目文件配置域名解析登錄服務(wù)器安裝Nginx，Nginx版本選擇最新版，安裝完成后配置網(wǎng)站信息。將項目文件上傳到服務(wù)器Nginx項目目錄中，啟動Nginx，然后通過IP訪問網(wǎng)站。如果想通過域名訪問網(wǎng)站，則需要購買域名并進行備案。

11.5