大棚農(nóng)作物狀態(tài)實(shí)時(shí)監(jiān)測(cè)系統(tǒng)的詳細(xì)設(shè)計(jì)與測(cè)試分析案例目錄TOC\o"1-3"\h\u29347大棚農(nóng)作物狀態(tài)實(shí)時(shí)監(jiān)測(cè)系統(tǒng)的詳細(xì)設(shè)計(jì)與測(cè)試分析案例 116573第1章系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn) 1275711.1首頁(yè)的設(shè)計(jì)與實(shí)現(xiàn) 1291691.2用戶(hù)模塊的設(shè)計(jì)與實(shí)現(xiàn) 2135721.3角色權(quán)限模塊的設(shè)計(jì)與實(shí)現(xiàn) 5268371.4文件模塊的設(shè)計(jì)與實(shí)現(xiàn) 769031.5新聞公告模塊的設(shè)計(jì)與實(shí)現(xiàn) 83525第2章系統(tǒng)測(cè)試 1110052.1測(cè)試目的 11141282.2用戶(hù)模塊測(cè)試 1161172.3文件模塊測(cè)試 1249232.4角色權(quán)限模塊測(cè)試 13250992.5新聞公告模塊測(cè)試 14第1章系統(tǒng)詳細(xì)設(shè)計(jì)與實(shí)現(xiàn)1.1首頁(yè)的設(shè)計(jì)與實(shí)現(xiàn)首頁(yè)主要使用VUE3.0的前端來(lái)構(gòu)建頁(yè)面，主要由4個(gè)部分組成，第一個(gè)是頂部的用戶(hù)，當(dāng)前時(shí)間和位于右側(cè)的首頁(yè)按鈕，可以便于用戶(hù)快速跳轉(zhuǎn)回首頁(yè)。然后是系統(tǒng)的LOGO和背景圖片，可以讓用戶(hù)輕松識(shí)別出該主題機(jī)構(gòu)的主頁(yè)和相關(guān)的主辦信息。緊接著是一個(gè)欄目條，它是由后臺(tái)管理人員進(jìn)行建立，管理人員可以根據(jù)不同的業(yè)務(wù)背景，來(lái)建立不同的欄目條，當(dāng)瀏覽者的鼠標(biāo)經(jīng)過(guò)某個(gè)欄目時(shí)，這個(gè)欄目的字體顏色會(huì)進(jìn)行相應(yīng)的變化，而且指針也會(huì)出現(xiàn)變化。當(dāng)用戶(hù)單擊欄目時(shí)，可以通過(guò)VUE的前端路由進(jìn)行跳轉(zhuǎn)至對(duì)應(yīng)的新聞列表頁(yè)面，而且可以看到所發(fā)布的信息。對(duì)應(yīng)的用戶(hù)信息來(lái)源來(lái)自于后臺(tái)管理員所發(fā)布的相關(guān)信息。單擊所發(fā)布的新聞后，會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的新聞頁(yè)面，對(duì)該新聞進(jìn)行訪問(wèn)。然后是首頁(yè)的主體部分，一共分為四個(gè)項(xiàng)目——公告通知、新聞中心、社會(huì)風(fēng)采、單位信息。在這里可以觀察到用戶(hù)發(fā)布的信息。當(dāng)用戶(hù)沒(méi)有在這里發(fā)布過(guò)任何新聞時(shí)，在這里會(huì)顯示“沒(méi)有更多了”的提示信息。當(dāng)有新聞發(fā)布時(shí)，則會(huì)顯示對(duì)應(yīng)欄目下的新聞標(biāo)題以及發(fā)布的時(shí)間。單擊任何一個(gè)新聞標(biāo)題，跳轉(zhuǎn)到新聞內(nèi)容后，可以看到當(dāng)前的新聞詳情，題目，發(fā)布者，發(fā)布時(shí)間，發(fā)布內(nèi)容。在最后首頁(yè)的底部顯示為當(dāng)前的版權(quán)信息。首頁(yè)模塊設(shè)計(jì)后界面圖如圖1.1所示圖1.1首頁(yè)模塊設(shè)計(jì)后界面圖1.2用戶(hù)模塊的設(shè)計(jì)與實(shí)現(xiàn)該系統(tǒng)用戶(hù)主要分為兩部分，一種為只在首頁(yè)瀏覽的普通用戶(hù)，這些用戶(hù)屬于游客用戶(hù)，不需要進(jìn)行登陸跳轉(zhuǎn)到后臺(tái)，而另一種則是系統(tǒng)的使用者，他們需要擁有相應(yīng)的權(quán)限對(duì)整個(gè)系統(tǒng)進(jìn)行管理和操作。用戶(hù)模塊主要包括用戶(hù)的創(chuàng)建和修改，而且能夠在創(chuàng)建用戶(hù)的同時(shí)還能夠賦予用戶(hù)一個(gè)或者多個(gè)角色，使該用戶(hù)擁有所擁有的相應(yīng)權(quán)限。而且在特定的時(shí)候?qū)~戶(hù)進(jìn)行回收處理，而且能夠在后臺(tái)登陸頁(yè)面使用創(chuàng)建的賬號(hào)登錄進(jìn)入系統(tǒng)。當(dāng)用戶(hù)使用之前建立的賬戶(hù)時(shí)，只有輸入正確賬戶(hù)和正確的密碼的情況下才能夠進(jìn)入系統(tǒng)，和加載正確的菜單，當(dāng)賬號(hào)具有多個(gè)角色時(shí)，在登錄系統(tǒng)前的時(shí)候需要選擇登錄的角色才能夠加載出正確的菜單。使用者在后臺(tái)登錄時(shí)，使用后臺(tái)發(fā)布的SHA256公鑰對(duì)密碼進(jìn)行加密傳輸，大大提高了系統(tǒng)的安全性。而后臺(tái)將不再保存用戶(hù)原始的密碼，而是保存加密的密鑰信息，只用戶(hù)名和該密鑰相互對(duì)應(yīng)后才能成功進(jìn)入系統(tǒng)。后臺(tái)登錄模塊設(shè)計(jì)實(shí)現(xiàn)后界面圖如圖1.2所示。用戶(hù)管理模塊設(shè)計(jì)實(shí)現(xiàn)后界面圖如圖1.3所示。用戶(hù)信息新增修改模塊設(shè)計(jì)實(shí)現(xiàn)后界面圖如圖1.4所示。用戶(hù)登錄程序流程圖如圖1.5所示圖1.2后臺(tái)登陸模塊設(shè)計(jì)后界面圖圖1.3用戶(hù)管理模塊設(shè)計(jì)后界面圖圖1.4用戶(hù)信息新增修改模塊設(shè)計(jì)后界面圖圖1.5用戶(hù)登陸流程圖1.3角色權(quán)限模塊的設(shè)計(jì)與實(shí)現(xiàn)角色權(quán)限模塊主要用于新建系統(tǒng)角色，并為角色分配相應(yīng)權(quán)限。具有菜單權(quán)限功能的用戶(hù)可以在自身?yè)碛械臋?quán)限的基礎(chǔ)上，按照自己的權(quán)限功能分配給新添加的用戶(hù)。同時(shí)，用戶(hù)也可以同時(shí)隸屬于多個(gè)角色，滿(mǎn)足用戶(hù)擁有許多角色的要求。當(dāng)用戶(hù)具有多個(gè)角色的權(quán)限時(shí)，需要登錄完成后手動(dòng)選擇想要執(zhí)行的操作，之后才能進(jìn)行后續(xù)使用。角色權(quán)限的分配主要是為了以樹(shù)型的形式進(jìn)行接下來(lái)的操作，可以很容易的觀察菜單之間的聯(lián)系，并且當(dāng)用戶(hù)有一個(gè)菜單權(quán)限時(shí)，選擇相應(yīng)的菜單選擇框，當(dāng)選中后單擊保存按鈕則可以保存角色權(quán)限。保存時(shí)只保存不同數(shù)據(jù)，不修改具有相同權(quán)限的原始數(shù)據(jù)，減輕對(duì)數(shù)據(jù)庫(kù)的壓力。角色管理模塊設(shè)計(jì)實(shí)現(xiàn)后界面圖如圖1.6所示。權(quán)限配置模塊設(shè)計(jì)實(shí)現(xiàn)后界面圖如圖1.7所示。角色權(quán)限管理流程圖如圖1.8所示圖1.6角色管理模塊設(shè)計(jì)實(shí)現(xiàn)后界面圖圖1.7權(quán)限配置模塊設(shè)計(jì)實(shí)現(xiàn)后界面圖圖1.8角色權(quán)限管理流程圖1.4文件模塊的設(shè)計(jì)與實(shí)現(xiàn)文件模塊用戶(hù)可以對(duì)文件進(jìn)行上傳，刪除等相關(guān)操作。同時(shí)，本系統(tǒng)的新聞公告模塊中的文字顯示也基于本模塊。該模塊統(tǒng)一了上傳文件和下載文件的接口，上傳文件時(shí)，需要在http-headers中攜帶Token信息正確才能進(jìn)行訪問(wèn)，上傳文件后，將會(huì)返回一個(gè)標(biāo)準(zhǔn)的JSON結(jié)構(gòu)文本，方便讀取和檢索源信息。刪除文件可以由管理員操作，當(dāng)一個(gè)文件被刪除時(shí)，儲(chǔ)存在FastDFS中的文件會(huì)在刪除表記錄的同時(shí)被刪除，采取雙重刪除機(jī)制。文件可以通過(guò)上傳接口返回的文件訪問(wèn)路徑直接訪問(wèn)，也可以直接通過(guò)Nginx進(jìn)行轉(zhuǎn)發(fā)訪問(wèn)。文件管理列表模塊設(shè)計(jì)后界面圖如圖1.9所示。圖1.9文件管理列表模塊設(shè)計(jì)后界面圖1.5新聞公告模塊的設(shè)計(jì)與實(shí)現(xiàn)兩個(gè)模塊一起構(gòu)成了新聞公告模塊，分別是新聞分類(lèi)模塊和新聞發(fā)布模塊。新聞分類(lèi)模塊主要是對(duì)即將發(fā)布的新聞公告進(jìn)行分類(lèi)，有必要在發(fā)布新聞之前維護(hù)現(xiàn)有的分類(lèi)模塊，以便在發(fā)布新聞之前它可以具有至少一個(gè)數(shù)據(jù)。新聞發(fā)布模塊可以查看到當(dāng)前和先前發(fā)布的信息，該信息記錄了新聞標(biāo)題，發(fā)布模塊和發(fā)布內(nèi)容的作者。單擊新聞發(fā)布模塊中的“添加”按鈕以選擇用于維護(hù)新聞信息的類(lèi)別。管理員添加新聞欄目之后，他可以在主頁(yè)的新聞分類(lèi)欄中看到新添加的欄目，單擊相應(yīng)的欄目后，他可以跳轉(zhuǎn)到對(duì)應(yīng)的欄目中，并且顯示相對(duì)應(yīng)的欄目的新聞內(nèi)容。發(fā)布新聞時(shí)，具有發(fā)布權(quán)限的用戶(hù)可以通過(guò)文本編輯器編輯所需發(fā)布的內(nèi)容，從而使整個(gè)發(fā)布頁(yè)面更加美觀。新聞模塊流程圖如圖1.10所示。新聞分類(lèi)模塊設(shè)計(jì)后界面圖如圖1.11所示。新聞后臺(tái)發(fā)布模塊設(shè)計(jì)后界面圖如圖1.12所示。新聞發(fā)布面板模塊設(shè)計(jì)后界面圖如圖1.13所示圖1.10新聞模塊流程圖圖1.11新聞分類(lèi)模塊設(shè)計(jì)后界面圖圖1.12新聞后臺(tái)發(fā)布模塊設(shè)計(jì)后界面圖圖1.13新聞發(fā)布面板模塊設(shè)計(jì)后界面圖第2章系統(tǒng)測(cè)試2.1測(cè)試目的系統(tǒng)測(cè)試是對(duì)系統(tǒng)設(shè)計(jì)完成后可能出現(xiàn)錯(cuò)誤的模塊進(jìn)行測(cè)試。為了保證系統(tǒng)的正常運(yùn)行,本測(cè)試主要監(jiān)控系統(tǒng)是否能達(dá)到預(yù)期的結(jié)果，在正常操作和異常操作時(shí),檢測(cè)模塊設(shè)計(jì)的成果,并檢查和糾正模塊出現(xiàn)的相應(yīng)問(wèn)題,確保系統(tǒng)的正常使用。在系統(tǒng)設(shè)計(jì)的過(guò)程中，也要進(jìn)行測(cè)試。如果及時(shí)發(fā)現(xiàn)問(wèn)題要及時(shí)糾正問(wèn)題，可以降低后期出現(xiàn)問(wèn)題的風(fēng)險(xiǎn)。分析測(cè)試結(jié)果，總結(jié)測(cè)試結(jié)果。好在以后出現(xiàn)問(wèn)題時(shí)能夠及時(shí)發(fā)現(xiàn)改正錯(cuò)誤。確保系統(tǒng)安全運(yùn)行。2.2用戶(hù)模塊測(cè)試本階段測(cè)試主要對(duì)用戶(hù)模塊進(jìn)行檢測(cè)。主要檢測(cè)內(nèi)容有用戶(hù)名和密碼是否匹配檢測(cè)。如果登陸成功,是否跳轉(zhuǎn)后臺(tái)管理頁(yè)面。其用戶(hù)登錄模塊的測(cè)試用例表如表5-1所示。表5-1用戶(hù)登錄模塊的測(cè)試用例表用例編號(hào)測(cè)試的步驟輸入的數(shù)據(jù)預(yù)想的結(jié)果測(cè)試結(jié)果M1輸入相應(yīng)的用戶(hù)名和對(duì)應(yīng)的密碼，之后選擇登錄用戶(hù)名：file密碼：414831顯示登錄成功，進(jìn)入到后臺(tái)頁(yè)面和設(shè)計(jì)初衷一致M2輸入相應(yīng)郵箱和密碼然后選擇登錄郵箱：414831615@qq.coom密碼：950175登錄成功，然后進(jìn)入到后臺(tái)管理頁(yè)面，可以查看登錄時(shí)間和登錄地點(diǎn)等和設(shè)計(jì)初衷一致M3輸入錯(cuò)誤的用戶(hù)名或者錯(cuò)誤的密碼，然后選擇登錄用戶(hù)名：yonghu密碼：751694返回登錄頁(yè)面登錄失敗和設(shè)計(jì)初衷一致M4輸入用戶(hù)名和錯(cuò)誤的密碼用戶(hù)名：file密碼：781264返回登錄頁(yè)面登錄失敗和設(shè)計(jì)初衷一致續(xù)表5-1用例編號(hào)測(cè)試的步驟輸入的數(shù)據(jù)預(yù)想的結(jié)果測(cè)試結(jié)果M5只輸入用戶(hù)名，無(wú)需輸入密碼，點(diǎn)擊“登錄”按鈕用戶(hù)名：yonghu返回登錄頁(yè)面登錄失敗和設(shè)計(jì)初衷一致M6M1進(jìn)行登錄成功后，重新進(jìn)入當(dāng)前瀏覽器，再次訪問(wèn)登錄模塊無(wú)需輸入不需要輸入數(shù)據(jù)，直接進(jìn)入到后臺(tái)管理頁(yè)面和設(shè)計(jì)初衷一致M7只輸入密碼，然后點(diǎn)擊“登錄”按鈕不輸入用戶(hù)名密碼：375218跳轉(zhuǎn)回登錄頁(yè)面登錄失敗和設(shè)計(jì)初衷一致結(jié)論：當(dāng)輸入正確的用戶(hù)名和正確的密碼可以登錄成功。其中有一項(xiàng)錯(cuò)誤時(shí)都會(huì)返回到登錄界面，登錄失敗。多次登錄的賬號(hào)可以記錄，跳過(guò)登錄模塊。2.3文件模塊測(cè)試這個(gè)階段的測(cè)試主要對(duì)文件模塊進(jìn)行測(cè)試。檢查文件是否能正常上傳和下載。進(jìn)行相應(yīng)身份的驗(yàn)證。它還檢查跨域設(shè)置的接口。其文件模塊測(cè)試用例表如表5-2所示。表5-2文件模塊測(cè)試用例表用例編號(hào)測(cè)試的步驟輸入的數(shù)據(jù)預(yù)想的結(jié)果測(cè)試結(jié)果WJ01打開(kāi)postman測(cè)試程序，直接訪問(wèn)開(kāi)放的上傳接口輸入訪問(wèn)地址：localhost：8081訪問(wèn)被攔截和設(shè)計(jì)初衷一致WJ02打開(kāi)postman測(cè)試程序，修改WJ01中的訪問(wèn)方式，添加http請(qǐng)求頭然后更改上傳的數(shù)據(jù)格式，直接訪問(wèn)開(kāi)放的上傳接口添加請(qǐng)求頭：Content-Type為multipart/form-data選擇Body數(shù)據(jù)form-data格式Key:fileValue：選擇一個(gè)文件顯示訪問(wèn)成功，返回出JSON串{"error":1,"message":"token信息不正確"}和設(shè)計(jì)初衷一致續(xù)表5-2用例編號(hào)測(cè)試的步驟輸入的數(shù)據(jù)預(yù)想的結(jié)果測(cè)試結(jié)果WJ03在WJ02的body上增添token信息，重新進(jìn)行數(shù)據(jù)傳輸輸入相應(yīng)的Token信息顯示訪問(wèn)成功，返回相應(yīng)的JSON字符串和設(shè)計(jì)初衷一致WJ04直接進(jìn)行訪問(wèn)WJ03中JSON字符串中的URL輸入JSON串中的相應(yīng)的URL信息使用瀏覽器進(jìn)行訪問(wèn)會(huì)顯示下載，文件為WJ03中上傳的文件和設(shè)計(jì)初衷一致結(jié)論：文件接口可以通過(guò)HTTP進(jìn)行訪問(wèn)，訪問(wèn)過(guò)程中需要編輯HTTP請(qǐng)求頭，上傳的文件需要攜帶相應(yīng)的令牌信息。當(dāng)跨域引用靜態(tài)資源時(shí)沒(méi)有錯(cuò)誤，沒(méi)有跨域錯(cuò)誤。2.4角色權(quán)限模塊測(cè)試這個(gè)測(cè)試主要測(cè)試用戶(hù)的權(quán)限功能。在創(chuàng)建新用戶(hù)的過(guò)程中，分配給用戶(hù)的權(quán)限，并通過(guò)匹配用戶(hù)的角色加載相應(yīng)的菜單。角色權(quán)限模塊測(cè)試用例表如表5-3所示。表5-3角色權(quán)限模塊測(cè)試用例表用例編號(hào)測(cè)試的步驟輸入的數(shù)據(jù)預(yù)想的結(jié)果測(cè)試結(jié)果QX001輸入管理員賬號(hào)，選擇新建角色，輸入角色的名稱(chēng)，然后點(diǎn)擊保存角色的名稱(chēng)：大棚作業(yè)工作者顯示保存成功，重新加載，出現(xiàn)角色名為大棚作業(yè)工作者的新角色和設(shè)計(jì)初衷一致續(xù)表5-3用例編號(hào)測(cè)試的步驟輸入的數(shù)據(jù)預(yù)想的結(jié)果測(cè)試結(jié)果QX002將QX001中創(chuàng)建的角色名稱(chēng)修改為大棚設(shè)備管理員角色的名稱(chēng)：大棚設(shè)備管理員系統(tǒng)提示修改成功，大棚作業(yè)工作人員修改為大棚設(shè)備管理人員和設(shè)計(jì)初衷一致QX003在權(quán)限分配中選擇QX001新增的角色名稱(chēng)，分配該角色擁有相應(yīng)的設(shè)備分發(fā)權(quán)限無(wú)需輸入數(shù)據(jù)顯示角色擁有設(shè)備分發(fā)權(quán)限和設(shè)計(jì)初衷一致QX004登錄QX002角色，查看菜單是否有相應(yīng)權(quán)限無(wú)需輸入數(shù)據(jù)顯示擁有相應(yīng)的權(quán)限，擁有的權(quán)限和之前賦予的一致和設(shè)計(jì)初衷一致結(jié)論：角色權(quán)限模塊能夠根據(jù)用戶(hù)分配的角色權(quán)限進(jìn)行菜單的加載，并且能夠以屬性菜單的方式顯示權(quán)限信息。2.5新聞公告模塊測(cè)試這個(gè)測(cè)試主要是測(cè)試用戶(hù)的新聞發(fā)布信息是否可以正常使用,新聞公告模塊是否可以實(shí)施,是否發(fā)送到相對(duì)應(yīng)的模塊中,并可以在主頁(yè)上展示。其新聞模塊測(cè)試用例表如表5-4所示。表5-4新聞公告模塊測(cè)試用例表用例編號(hào)測(cè)試的步驟輸入的數(shù)據(jù)預(yù)想結(jié)的果測(cè)試結(jié)果XW1新建一個(gè)分類(lèi)在新聞模塊中，命名為“新聞告示”在對(duì)應(yīng)