| 這個作業屬於哪個課程 | https://edu.cnblogs.com/campus/fzu/SE2024 |
|---|---|
| 這個作業要求在哪裡 | https://edu.cnblogs.com/campus/fzu/SE2024/homework/13281 |
| 這個作業的目標 | 透過程式碼實現專案招募平臺的設計 |
| 學號 | 102202148 |
| 結對成員學號 | 102202128，102202148 |
| 結對成員部落格連結 | https://www.cnblogs.com/linzihao |
| GitHub倉庫連結 | https://github.com/xiaoxolu/102202148-102202128 |
目錄：
-
0.Markdown編輯器
-
1.具體分工
路治：
林子豪： -
2.PSP表格
-
3.解題思路描述與設計實現說明
-
- 程式碼實現思路
-
-
- 問題分析
-
-
-
- 模組劃分
-
-
-
- 使用者角色邏輯
-
-
-
- 技術實現
-
-
- 程式碼片段（功能展示）
-
4.附加特點設計與展示
-
5.小程式功能展示
-
- 使用者登入
-
- 使用者註冊
-
- 主要頁面
-
- 個人資訊
-
- 修改個人資訊
-
- 訊息頁面
-
- 社群頁面
-
- 專案頁面
-
- 加入專案頁面
-
- 建立專案頁面
-
6.目錄說明和使用說明
-
- 目錄說明如下
-
-
- 小程式一到四頁
-
-
-
- 小程式五到十頁
-
-
-
- 小程式十一到十六頁
-
-
- 使用說明
-
-
- 從我們的Github倉庫"https://github.com/xiaoxolu/102202148-102202128"掃我們的小程式二維碼，就可使用我們的小程式，接下來安裝小程式的提示以及自身需求進行操作
-
-
-
- 同時附上我和隊友的聯絡方式，有事嗎問題可以找我們：路治：3501753960，林子豪2890762281。
-
-
-
- 附上我們的小程式二維碼：
- 附上我們的小程式二維碼：
-
-
7.單元測試
-
- 測試程式碼
-
8.Github程式碼簽入記錄截圖
-
9.程式碼模組異常及解決方法
-
- 無效的API請求引數
-
10.評價
1.具體分工
- 路治：前端開發：負責前八頁的工作以及測試。
- 林子豪：負責後五頁的工作以及測試。
2.PSP表格
| PSP 表格 | 校園合作網頁設計專案 |
|---|---|
| 專案名稱 | ProjectPartner |
| 開發者姓名 | 路治 |
| 開發者姓名 | 林子豪 |
| 日期 | 2024年9月28日至2024年10月9日 |
| 任務/活動 | 估算(小時) |
| 使用者介面設計 | 10 |
| 前端開發 | |
| - HTML結構搭建 | 10 |
| - CSS樣式編寫 | 10 |
| - JavaScript互動實現 | 20 |
| 後端開發 | |
| - 資料庫設計 | 5 |
| - 伺服器邏輯編寫 | 10 |
| - API介面開發 | 2 |
| 功能測試 | 5 |
| 單元測試 | 5 |
| 部落格撰寫 | 4 |
| 總計 | 86 |
備註：
- 前端開發：構建使用者透過瀏覽器與之互動網頁介面的過程。
- 單元測試：使用者測試，各種請求能否實現。
- 部落格撰寫：將開發過程和結果詳細分析呈現。
3.解題思路描述與設計實現說明
程式碼實現思路
問題分析：
在本次專案中，使用者不僅需要釋出專案、參與他人的專案還要管理已經發布的專案。專案釋出者和參與者具有不同的許可權和功能要求。我們的目標是設計一個系統，使用者無論是作為專案的釋出者還是參與者，都能透過統一的介面進行管理。主要挑戰包括：
- 專案的管理邏輯：如何根據使用者身份（釋出者或參與者）動態展示不同的管理許可權。
- 使用者組隊請求的處理：如何合理設計組隊申請的稽核與狀態反饋機制。
- 專案進度的視覺化管理：如何方便釋出者更新專案進度，並讓參與者清晰地檢視專案進展。
- 專案的分類檢索：使用者如何根據不同專案的分類或子分類迅速篩選尋找合適的專案。
- 實時聊天功能的實現：不同使用者之間如何進行實時的聊天交流，提高溝通效率。
模組劃分：
基於上述分析，系統主要劃分為以下功能模組：
- 專案列表模組：展示使用者釋出的專案和加入的專案，方便使用者檢視不同專案的標題和內容。
- 專案詳情模組：顯示專案的詳細資訊，包括專案的名稱、內容、進度、開始日期等。參與者可以發起申請，參與專案。
- 個人資訊模組：顯示個人資訊，可供修改。
使用者角色邏輯：
我們設計了以下使用者角色的邏輯：
- 專案釋出者：擁有完整的管理許可權，包括編輯專案內容、稽核組隊請求、更新專案進度、管理成員等。
- 專案參與者：可以檢視專案進展、檢視和退出專案。。
技術實現
系統使用 微信開發者工具 實現前端頁面的動態渲染具體的實現步驟如下：
前端實現
- 微信開發者工具設計：使用微信開發者工具建立各個模組的元件，如列表、詳情、個人資訊等，每個元件獨立開發，具有較好的複用性。
- 動態渲染與角色判斷：透過微信開發者工具外掛實現頁面的動態跳轉。
程式碼片段（功能展示）：
-
個人資訊：
Page({
// 其他可能的頁面資料和方法...// 退出登入按鈕點選事件
logout: function() {
wx.navigateTo({
url: '/pages/1/1' // 第一頁的路徑
});
},goToPersonalInfo: function() {
wx.navigateTo({
url: '/pages/9/9' // 第九頁的路徑
});
},// 訊息按鈕點選事件
goMessage: function() {
wx.navigateTo({
url: '/pages/11/11' // 第十一頁的路徑
});
},// 專案按鈕點選事件
goProject: function() {
wx.navigateTo({
url: '/pages/6/6' // 第六頁的路徑
});
},// 返回上一頁按鈕點選事件
goBack: function() {
wx.navigateBack({
delta: 1 // 返回上一頁
});
}
});
4.附加特點設計與展示
- 首頁簡潔，不會像那種花裡胡哨讓別人心生煩躁，
5.小程式功能展示：
-
使用者登入：
-
使用者註冊：
-
主要頁面：
-
個人資訊：
-
修改個人資訊：
-
訊息頁面：
-
社群頁面：
-
專案頁面：
-
加入專案頁面：
-
建立專案頁面：
-
優秀程式碼展示：
// pages/register/register.ts
Page({
showVerifyCodeModal: function() {
// 這裡可以使用 wx.showModal 來顯示一個模態框，展示傳送驗證碼的圖片
wx.showModal({
title: '傳送驗證碼',
content: '驗證成功，點此返回', // 這裡可以是圖片的描述文字
showCancel: false,
success: function(res) {
if (res.confirm) {
// 傳送驗證碼邏輯
}
}
});
},
showRegisterModal: function() {
// 這裡可以使用 wx.showModal 來顯示一個模態框，展示註冊的圖片
wx.showModal({
title: '註冊成功',
content: '註冊成功，點此返回', // 這裡可以是圖片的描述文字
showCancel: false,
success: function(res) {
if (res.confirm) {
// 註冊邏輯
}
}
});
},
goBack: function() {
wx.navigateBack(); // 返回上一頁
}
});
6.目錄說明和使用說明
目錄說明如下：
- 小程式一到四頁的程式碼
- 小程式五到十頁的程式碼
- 小程式十一到十六頁的程式碼
使用說明
- 1.從我們的Github倉庫"https://github.com/xiaoxolu/102202148-102202128"掃我們的小程式二維碼，就可使用我們的小程式，接下來安裝小程式的提示以及自身需求進行操作
- 同時附上我和隊友的聯絡方式，有事嗎問題可以找我們：路治：3501753960，林子豪2890762281。
- 附上我們的小程式二維碼：
7.單元測試：
- 測試程式碼
8.簽入記錄截圖
9.程式碼模組異常及解決方法
- 異常描述：API請求的引數不符合預期，導致伺服器端無法正確處理。
- 解決方法：確保前端傳送的請求引數符合要求。
10.評價
這幾天我與林子豪一起完成結對任務，以下是我對他的評價：
-（1）工作質量：
林子豪在在最近的專案中對前端效能最佳化做出了顯著貢獻。
-（2）團隊合作
林子豪在團隊中總是樂於助人。
-（3）溝通能力
林子豪的溝通能力非常出色，無論是書面還是口頭交流都清晰明瞭能夠準確表達自己的觀點。
-（4）時間管理
林子豪在時間管理方面做得很好，能夠合理安排作業優先順序，確保關鍵任務按時完成。即使在面對緊急任務時，路治也能迅速調整作業計劃，保證專案不受影響。
總結：
- 林子豪是一個非常出色的團隊成員，建議繼續保持目前的工作態度和專業精神。