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

任務(wù)9

實(shí)現(xiàn)文章詳情頁(yè)相關(guān)功能Web前端應(yīng)用開(kāi)發(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ū)模塊文章詳情頁(yè)中的相關(guān)功能。用戶通過(guò)點(diǎn)擊社區(qū)首頁(yè)文章列表中的文章卡片可以進(jìn)入文章詳情頁(yè)，文章詳情頁(yè)需要實(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)通過(guò)使用條件編譯解決多端兼容，培養(yǎng)學(xué)習(xí)者科學(xué)、系統(tǒng)解決問(wèn)題的意識(shí)。通過(guò)分享、點(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)容上面，不過(guò)這種沒(mé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)品中，常見(jià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í)上，視覺(jué)上沒(méi)有明顯的層級(jí)區(qū)分?！吧w樓式”如同字面意思，評(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)入文章詳情頁(yè)分為三種場(chǎng)景：

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

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

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

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

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

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

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

在/api/community目錄下新建article-details.js文件，編寫(xiě)調(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)注作者功能邏輯相似，只需要通過(guò)調(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)求：見(jiàn)表參數(shù)字段名數(shù)據(jù)類型說(shuō)明articleIdString文章idHeader請(qǐng)求參數(shù)路徑請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說(shuō)明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)求：見(jiàn)表參數(shù)字段名數(shù)據(jù)類型說(shuō)明articleIdString文章idHeader請(qǐng)求參數(shù)Body請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說(shuō)明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)求：見(jiàn)表參數(shù)字段名數(shù)據(jù)類型說(shuō)明followUserIdText欲關(guān)注用戶的idHeader請(qǐng)求參數(shù)Body請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說(shuō)明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中，編寫(xiě)調(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)論功能邏輯分析無(wú)論是一級(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án)，則將評(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án)，則將評(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)求：見(jiàn)表Header請(qǐng)求參數(shù)Query請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說(shuō)明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說(shuō)明pageText頁(yè)數(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)求：見(jiàn)表Header請(qǐng)求參數(shù)Query請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說(shuō)明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說(shuō)明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)求：見(jiàn)表Header請(qǐng)求參數(shù)路徑請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說(shuō)明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說(shuō)明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)求：見(jiàn)表Header請(qǐng)求參數(shù)Query請(qǐng)求參數(shù)參數(shù)字段名數(shù)據(jù)類型說(shuō)明tokenText認(rèn)證令牌參數(shù)字段名數(shù)據(jù)類型說(shuō)明commentIdText評(píng)論id

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

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

在article-details.js中，編寫(xiě)調(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中，可以使用什么方法將圖片地址字符串按指定字符分割成圖片數(shù)組？A.split方法B.substring方法C.replace方法D.toLowerCase方法（3）“啟嘉校園”項(xiàng)目文章詳情頁(yè)的評(píng)論區(qū)展示結(jié)構(gòu)是？A.平鋪式B.主題式C.蓋樓式D.以上選項(xiàng)均不是2.填空題（1）在uni-app中，可以使用

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

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

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

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

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

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

10.1任務(wù)描述

10.2任務(wù)效果項(xiàng)目測(cè)試效果圖

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

10.4知識(shí)儲(chǔ)備10.4.1什么是測(cè)試

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

10.4知識(shí)儲(chǔ)備10.4.2

軟件測(cè)試發(fā)展史

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

10.4知識(shí)儲(chǔ)備10.4.3

軟件測(cè)試的作用

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

10.4知識(shí)儲(chǔ)備10.4.4

軟件測(cè)試的重要性

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

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

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

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

10.4知識(shí)儲(chǔ)備10.4.5

軟件測(cè)試的類型

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

10.4知識(shí)儲(chǔ)備10.4.6

軟件測(cè)試最佳實(shí)踐

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

10.4知識(shí)儲(chǔ)備10.4.7

軟件測(cè)試常用工具

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

10.5任務(wù)實(shí)施10.5.1劃分功能模塊個(gè)人資料效果圖我們以測(cè)試“啟嘉校園”項(xiàng)目個(gè)人資料頁(yè)（如圖所示）相關(guān)功能為例編寫(xiě)測(cè)試用例，首先需要?jiǎng)澐謧€(gè)人資料頁(yè)中包含的功能模塊，以便后續(xù)按模塊分開(kāi)測(cè)試，提高測(cè)試的精準(zhǔn)性。需求編號(hào)模塊名稱功能名稱1個(gè)人資料頭像上傳2個(gè)人資料修改個(gè)人昵稱3個(gè)人資料修改個(gè)人簽名4個(gè)人資料修改手機(jī)號(hào)5個(gè)人資料修改微信號(hào)

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

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

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

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

和

的過(guò)程。（2）測(cè)試可以檢查軟件的

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

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

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

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

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

11.1任務(wù)描述

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

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

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

11.4知識(shí)儲(chǔ)備-uni-app項(xiàng)目發(fā)布

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

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

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

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

11.5