軟體工程第二次結對作業

這個作業屬於哪個課程	https://edu.cnblogs.com/campus/fzu/SE2024
這個作業要求在哪裡	https://edu.cnblogs.com/campus/fzu/SE2024/homework/13281
這個作業的目標	透過程式碼實現校園專案招募平臺的設計
姓名及學號	王強 102202106
結對成員及學號	馬鑫 102202101
結對同學部落格連結	https://www.cnblogs.com/Endorpings-m/p/18457450
Github倉庫地址	https://github.com/Endorphins-m/102202101-102202106

1.專案背景+專案需求

在大學內，部分學生希望透過發起或參與跨專業的專案（如創業或學術研究）來提升個人綜合能力、拓寬知識面並積累人脈。

然而，大學生在實現這些跨學科合作時面臨諸多困擾，主要體現為：

1、跨學科合作的機會主要依賴於個人積累的有限人脈資源或透過導師的引薦，方式過於侷限，導致許多潛在的合作機會未能實現。

2、不同專業的學生在課程安排、專案目標和溝通方式上存在顯著差異，這增加了合作過程中的溝通與磨合成本，給跨學科合作帶來了挑戰。

3、目前，學校缺乏專門用於促進學生跨學科合作的工具或平臺。現有的合作方式多依賴於群聊、校園公告牆等渠道，其效果有限，難以滿足學生之間有效交流與合作的需求。

基於此，需開發一套跨專業合作平臺，為大學生提供發起和參與跨學科專案的渠道。

該平臺具備但不限於以下功能和特點：

1、系統支援不同角色使用者的註冊和認證。學生可以自主發起或加入專案，教師也可發起專案，並上傳和分享相關資源。

2、使用者可以在平臺上釋出專案，介紹專案資訊，顯示所需招募的人才型別。

3、系統提供預定格式，使用者需按格式填寫表單內容，包括姓名，個人專業、擅長能力、聯絡方式和專案看法等。傳送請求後，申請訊息會在專案釋出者的郵箱顯示，釋出者可進行稽核。

4、平臺設計簡約，並確保操作簡便。從使用頻率、便捷性和合作有效性三方面出發，設計易用的介面和簡化的操作流程，以提升使用者體驗。

5、平臺內的專案合作應保持相對封閉，僅限釋出者和隊內成員檢視，以防止專案核心內容外洩。

2.具體分工

本專案的具體分工如下：

馬鑫同學：
前端開發：
負責首頁、專案、釋出模組頁面佈局與設計，包括導航欄、側邊欄、專案列表等關鍵UI元件。
實現互動效果，如按鈕點選、下拉選單、懸浮效果、動態頁面跳轉等。
使用js構建專案的動態內容，確保使用者能夠檢視和管理專案。

後端開發：
實現專案釋出、成員管理、組隊請求處理等後端邏輯。
獲取專案列表、釋出專案、檢視組隊請求等。
處理與使用者角色相關的許可權邏輯，例如專案釋出者和參與者不同的功能許可權。

王強同學：
前端開發：
-負責登入、聊天、發現等頁面的實現。使用js構建專案的動態內容，確保能夠根據分類顯示專案，以及使用者的實時聊天功能。

後端開發：
負責專案資料的儲存與管理
實現使用者登入、組隊稽核和請求資料等後端邏輯。
實現專案釋出、成員管理、組隊請求處理等後端邏輯。
獲取專案列表、釋出專案、檢視組隊請求等。

測試：
負責功能模組的測試，確保各模組的穩定性。
編寫測試用例，驗證專案功能，如釋出專案、組隊請求、專案進度更新等。
使用自動化測試工具或手動測試，檢查各類互動和功能是否按預期執行。

3.PSP表格

任務階段(PSP)	預估耗時（min）	實際耗時（min）
環境、資料庫配置	20	30
使用者註冊介面開發	15	10
使用者登入介面開發	20	15
專案大廳介面開發	40	120
我的專案介面開發	30	60
專案釋出介面開發	40	60
專案詳情介面開發	80	120
申請加入專案功能開發	60	120
專案管理介面開發	120	180
任務釋出介面開發	30	50
交流介面開發	80	120
個人資訊介面開發	35	30
專案整體最佳化	80	80
細節完善	30	35
需求點測試+程式碼除錯	60	40
事後總結、提出最佳化方案	30	30
總計	770	1100

4.解題思路與設計說明

問題分析

在本次專案中，使用者不僅需要釋出專案、參與他人的專案還要管理已經參與和釋出的專案。專案釋出者和參與者具有不同的許可權和功能要求。我們的目標是設計一個系統，使用者無論是作為專案的釋出者還是參與者，都能透過統一的介面進行管理。主要挑戰包括：

新專案的釋出：使用者可以釋出專案，填寫相關資訊使其顯示在專案大廳
專案的管理邏輯：如何根據使用者身份（釋出者或參與者）動態展示不同的管理許可權。
使用者組隊請求的處理：如何合理設計組隊申請的稽核與狀態反饋機制。
具體專案的任務分配：釋出者給組員釋出任務，組員接收任務通知，方便專案進度進行。
專案的分類檢索：使用者如何根據不同專案的分類迅速篩選尋找合適的專案。
實時聊天功能的實現：不同使用者之間如何進行實時的聊天交流，提高溝通效率。

模組劃分
基於上述分析，系統主要劃分為以下功能模組：

專案列表模組：展示使用者釋出的專案和加入的專案，方便使用者檢視不同專案的標題和內容。
專案管理模組：該模組區分發布者和參與者的許可權，釋出者可以在該模組中更新專案內容、可以邀請成員、可以刪除任務，管理專案成員；參與者可以檢視成員列表，或退出專案。
專案任務模組：該模組區分發布者和參與者的許可權，釋出者可以在該模組中釋出新任務；參與者可以在該模組提交完成的任務附件。
專案詳情模組：顯示專案的詳細資訊，包括專案的名稱、專案描述、具體任務、釋出者、專案編碼等。
組隊申請模組：用於管理組隊請求的傳送和稽核。釋出者可以稽核組隊申請，參與者可以填寫相應表格發出組隊請求。
實時聊天模組：使用者之間可以實時聊天溝通。
郵箱模組：用於接受專案申請通知和任務釋出通知等

流程圖

5.專案介紹及展示

1.使用者註冊介面

2.使用者登入介面

3.專案釋出

填寫相關資訊釋出專案，釋出後在專案大廳顯示

4.專案申請及釋出人同意

針對專案填寫表格發出申請，專案負責人的郵箱會收到請求，同意後該使用者加入專案

5.檢視我的專案

使用者只能看到自己加入的專案

6.釋出任務

只有專案釋出者才可釋出任務，可針對隊內成員進行任務釋出，釋出後對應成員將收到通知

7.任務提交即專案刪除

只有任務針對人可提交任務，
專案釋出者可刪除專案，
提交後任務進度發生改變

8.個人資訊修改

使用者名稱作為唯一標識不可修改
可上傳圖片修改頭像

9.新增好友和傳送資訊

只有存在使用者才可傳送請求，才能進行實時溝通
針對使用者名稱進行好友搜尋

6.單元測試

1.測試方法

安裝 Jest 和 Puppeteer 相關依賴： 在專案根目錄下執行以下命令來安裝 Jest、Puppeteer 和 jest-environment-puppeteer：
npm install --save-dev jest puppeteer jest-environment-puppeteer

配置 Jest： 在專案根目錄下建立一個 jest.config.js 檔案，內容：

點選檢視程式碼

</details>
module.exports = {
    testEnvironment: 'jest-environment-puppeteer',
    testRegex: './*\\.test\\.js$',
    setupFilesAfterEnv: ['./jest.setup.js']
};

配置 Puppeteer： 在專案根目錄下建立一個 jest-puppeteer.config.js 檔案，內容：

點選檢視程式碼

module.exports = {
    launch: {
        headless: true,
        slowMo: 50,
    },
    browserContext: 'default',
};

設定 Jest 環境： 在專案根目錄下建立一個 jest.setup.js 檔案，內容：

點選檢視程式碼

jest.setTimeout(30000);

編寫測試： 在專案根目錄下建立一個 test_.test.js （）檔案：

點選檢視程式碼

[https://github.com/Endorphins-m/102202101-102202106/tree/main/ProjectPartner(end)/union%20test]()

執行測試： 在專案根目錄下執行以下命令來執行測試：

點選檢視程式碼

npx jest

2.測試資料構造思路

一、明確測試目標與需求
理解功能：首先，需要深入理解軟體的功能和業務流程，明確每個功能點需要哪些型別的資料輸入。
確定測試範圍：根據測試計劃，確定需要測試的功能模組、介面、介面等，以及每個模組對應的測試場景。
二、分析資料特性與規則
資料型別與格式：識別軟體處理的資料型別（如字串、數字、日期等）和資料格式（如JSON、XML、CSV等）。
資料範圍與邊界：確定資料的合理取值範圍，以及可能的邊界值（如最大值、最小值、空值、特殊字元等）。
業務規則與約束：瞭解軟體對資料的約束條件，如必填項、唯一性、格式要求等。
三、設計測試資料方案
正常資料：設計符合業務規則和預期的資料，用於驗證軟體的基本功能。例如，對於使用者註冊功能，可以設計一個包含正確使用者名稱、密碼、郵箱等資訊的測試用例。
異常資料：設計不符合業務規則或預期的資料，用於測試軟體的錯誤處理和異常處理能力。例如，對於使用者註冊功能，可以設計一個包含空使用者名稱、重複使用者名稱、非法字元等資訊的測試用例。
邊界資料：設計處於資料範圍邊界的資料，用於測試軟體的邊界條件處理。例如，對於數值輸入框，可以設計一個包含最大值、最小值、剛好超出範圍值等邊界值的測試用例。
組合資料：設計多個資料欄位的組合，用於測試軟體的複雜功能和業務邏輯。例如，對於訂單處理功能，可以設計一個包含多種商品、多種優惠方式、多種支付方式等組合資料的測試用例。

7.遇到的問題即解決方法

一.關於佈局：CSS樣式不符合預期，無法生效，形成亂碼，元素紊亂，選擇器發生衝突

解決方法：

1.CSS樣式不符合預期或無法生效

檢查選擇器：
確認CSS選擇器是否正確，確保選擇器能夠正確地應用到目標元素上。
使用瀏覽器的開發者工具來檢查元素的CSS樣式，檢視是否有其他CSS規則覆蓋了你的樣式。
檢查CSS屬性：
確保CSS屬性的拼寫和語法沒有錯誤。特別是涉及到形狀的CSS屬性，如border-radius、clip-path、shape-outside等，確保它們的值正確設定。
使用CSS驗證工具（如W3C Validator）來檢查CSS規則的語法是否正確。
盒模型問題：
CSS中的盒模型會影響元素的尺寸和形狀。確保正確理解和設定了元素的盒模型，包括元素的寬度、高度、內邊距和邊框等屬性。
浮動和定位：
如果元素使用了浮動或定位屬性，可能會影響元素的形狀和佈局。確保正確地使用了這些屬性，並且它們沒有與其他CSS屬性產生衝突。
響應式設計：
如果網頁是響應式設計的，確保正確地設定了媒體查詢，並且針對不同的螢幕尺寸調整了元素的樣式。
優先順序和覆蓋：
確保CSS規則具有足夠的優先順序以覆蓋其他樣式。例如，內聯樣式比外部樣式表中的規則優先，更具體的選擇器（如ID選擇器）比更通用的選擇器（如類選擇器）優先。
可以使用!important宣告來強制應用某個樣式，但要謹慎使用，因為過度使用可能導致樣式難以維護和除錯。
瀏覽器相容性：
確保使用的CSS屬性和值與目標瀏覽器相容。不同的瀏覽器對CSS標準的支援有所不同。
清除快取：
瀏覽器有時會快取CSS檔案。當更改CSS檔案後，瀏覽器可能仍會載入快取版本。嘗試清除瀏覽器的快取或強制重新整理頁面（按Ctrl+F5）。

2.CSS檔案亂碼

確認編碼方式：
確認CSS檔案編碼方式是否正確。常見的編碼方式有UTF-8、GBK、GB2312等。
可以透過編輯器或者轉碼工具來檢視和修改編碼方式。
轉碼和編輯器設定：
將CSS檔案的編碼方式轉換成正確的編碼方式。例如，使用Notepad++或Sublime Text等編輯器，選擇“轉換為UTF-8（無BOM）”等選項進行轉換。
在編輯器的設定中，將編碼方式設定為正確的編碼方式，確保儲存時使用正確的編碼方式。
字元編碼宣告：
在CSS檔案的頭部新增字元編碼宣告，例如@charset "UTF-8";，這樣可以明確指定CSS檔案採用UTF-8編碼。
檢查伺服器端配置，確保正確設定響應頭的Content-type屬性為text/css;charset=utf-8。
檢查HTML文件的字元編碼宣告，確保與CSS檔案編碼一致。

3.元素紊亂

檢查HTML結構：
確保HTML結構正確，沒有缺失的標籤或錯誤的巢狀。
浮動清除：
如果使用了浮動佈局，確保正確使用了清除浮動的方法，如新增clear屬性或使用偽元素清除浮動。
定位調整：
對於使用定位屬性的元素，確保它們的定位上下文（即包含塊）正確無誤。

4.選擇器發生衝突

使用命名約定：
為每個CSS類或ID選擇器新增唯一的命名，避免重複。可以使用BEM（Block Element Modifier）或其他命名約定來規範命名方式。
作用域限定：
將CSS樣式限定在特定的作用域內，可以使用CSS前處理器（如Sass、Less）的區域性作用域功能，或者使用CSS模組化的方式（如CSS Modules）來避免全域性汙染和衝突。
使用層疊順序：
透過合理設定選擇器的權重，可以確保特定樣式的優先順序高於其他樣式。可以使用ID選擇器、類選擇器、標籤選擇器等來提高選擇器的權重。

二.關於訊息收發：無法正確接收專案申請資訊和新任務提醒

解決方法：

1.實現監聽DOM內容
2.正確獲取收件箱列表和使用者資訊
3.調整處理郵件點選事件

三.關於資訊抓取：無法正確抓取需要的資訊進行顯示

1.解決方法：
2.檢查控制檯錯誤：首先，開啟瀏覽器的開發者工具，檢視控制檯是否有任何錯誤資訊。
3.檢查JavaScript程式碼：逐步除錯你的JavaScript程式碼，確保資料被正確抓取並處理。
4.檢查HTML和CSS：確保你的HTML結構是正確的，並且CSS沒有隱藏或覆蓋你想要顯示的內容。
5.諮詢文件和社群：如果你使用的是第三方庫或框架，查閱它們的官方文件和社群論壇可能會提供有用的資訊。

8.Github程式碼簽入記錄

9.隊友互評

對於馬鑫的評價：
優點：表達清晰，傾聽能力強，責任心強，相互信任
不足：對於JavaScript語言的編寫能力仍需提高

對於王強的評價：
優點：具有協作精神，溝通能力強，有執行力，尊重搭檔的想法
不足：對於HTML的CSS部分和JavaScript語言的編寫能力仍需提高