軟工工程第二次結對作業《Fzu-help》

DriOgon發表於2024-10-10
軟工

軟工工程第二次結對作業《FZU-help》

1. 相關連結

軟體工程課程 班級連結
作業要求 作業連結
作業目標 在第一次需求分析的基礎下實現程式
學號 102201312
隊友 102201311張碩
Github倉庫 102201311-102201312

2. 具體分工

成員 分工內容
張碩 設計專案預期模板，負責“留言板”，“專案大廳”，“我的”介面的開發
陳言瀧 負責後端資料庫的實現，前端“註冊”，“專案釋出”的編寫實現。

3. PSP表格

image-20241010223100640

4.設計思路

以下描述了需求分析、技術選型、模組設計等。

4.1.1.需求分析

我們先對第一次結對作業所設計的模型，進行了分析。認為第一次的設計模型無法很好的幫助交流，專案發起公示的功能。在此基礎上，我們決定最佳化專案發起的功能，並在專案釋出下增加留言板，方便有共同興趣的同學交流。

在對"ProjectParter"要求進行思考分析後，得出的主要功能模組為：

  • 註冊
  • 大廳
  • 我的專案管理
  • 發起專案
  • 個人中心

4.1.2.技術選型

基於uniapp框架，設計的一個適應多端使用的小程式《FZU-help》.

配合雲開發平臺：https://unicloud.dcloud.net.cn/，實現前後端均部署到雲伺服器上。

  • 前端網頁託管：

Snipaste_2024-10-10_22-57-59

  • 後端雲資料庫+雲函式

image-20241010225745051

技術棧：

  • vite
  • vue3
  • ts
  • uniCloud
  • wotDesignUni
  • sp-editor

環境要求

  • node > 16.20.0
  • npm > 8.19.4
  • HBuilder X > 4.07

部署

  • Serverless 服務
  • 雲原生容器平臺（支付寶雲）

整合外掛

  • sp-editor 基於官方的富文字編輯器editor元件改良版
  • wotDesignUni 基於vue3+Typescript構建的精美ui庫
  • mp-html 富文字解析器
平臺相容性
阿里雲 騰訊雲 支付寶雲
√ × √
Vue2 Vue3
× √
App 快應用 微信小程式 支付寶小程式 百度小程式 位元組小程式 QQ小程式
HBuilderX 4.07 app-vue × √ × × × ×
釘釘小程式 快手小程式 飛書小程式 京東小程式
× × × ×
H5-Safari Android Browser 微信瀏覽器(Android) QQ瀏覽器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ × √ √

使用語言：

  • 前端框架主力：Vue.js 是這個專案的核心前端框架，負責管理整個應用的使用者介面和互動邏輯。Vue的元件化設計能夠幫助模組化開發，提升程式碼的複用性。

  • 程式語言主力：JavaScript 和 TypeScript 搭配使用，JavaScript 負責業務邏輯，TypeScript 提供型別檢查和提高程式碼質量。二者的結合能夠幫助團隊在開發時更好地控制程式碼的健壯性和可擴充套件性。

  • 樣式管理：SCSS 是主要的樣式工具，透過前處理器功能能夠簡化複雜樣式的管理，而少量的CSS則可能用於一些基礎樣式的處理。

  • 功能實現：前端功能模組靈活運用**uniapp下所設計好的外掛****，實現軟體功能模組快速搭建實現。

  • 資料庫管理：使用uniapp下的雲伺服器，後端管理。

5.模組設計

5.1. 註冊模組

前端設計：

  • 介面：
    • 表單包括輸入框：使用者名稱、郵箱、密碼、確認密碼。
    • 註冊按鈕與“已有賬號？登入”連結。
    • 使用者體驗最佳化：提供載入指示、註冊成功後的跳轉提示。
  • 技術：
    • HTML 表單 + CSS 樣式。
    • 使用 JavaScriptVue.js等進行表單驗證和互動。

後端設計：

  • API：
    • POST /register: 接受前端表單的資料，執行使用者驗證和資料庫插入。
  • 資料庫：
    • 使用者表包含欄位：使用者ID、使用者名稱、密碼（需加密）、註冊時間等。
  • 邏輯：
    • 密碼加密儲存（如bcrypt）。

5.2. 專案發起模組

前端設計：

  • 介面：
    • 專案名稱、專案描述、多行輸入框。
    • 任務建立功能，圖示化的任務顯示。
    • 提供AI大模型（需付費），或允許自定義。
  • 技術：
    • 表單設計 + 動態互動：使用Vue.js等前端框架。

後端設計：

  • API：
    • 接受建立專案的資料，專案名、描述、團隊成員、開始和結束時間等。
  • 資料庫：
    • 專案表：專案名、描述、發起人等。
  • 邏輯：
    • 驗證發起者的許可權是否能建立專案，傳送通知。

5.3. 留言榜模組

前端設計：

  • 介面：
    • 類似於討論板，分為留言列表和留言框。
    • 留言區支援富文字輸入（文字、圖片、連結等）。
    • 實時重新整理留言
  • 技術：
    • 留言板元件化設計來動態渲染留言。

後端設計：

  • API

    提交留言。

    獲取某個專案下的所有留言。

  • 資料庫

    • 留言表：commentID、專案ID、使用者ID、留言內容、是否為回覆等。

  • 邏輯

    • 許可權管理：留言許可權（公共許可權）。

5.4. 專案管理模組

前端設計：

  • 介面
    • 看板風格的任務管理板，類似Trello，使用卡片展示任務，任務可拖動改變狀態（待辦、進行中、完成）。
    • 支援任務的細節檢視與編輯，如負責人分配、截止日期、優先順序標記等。
    • 專案進度條和專案日曆，提供視覺化的專案管理工具。
  • 技術
    • 前端使用React+Redux或Vue.js+Vuex來管理複雜的狀態變化。
    • 拖拽功能可透過React Beautiful DnD或Vue Draggable實現。
    • 進度條可以使用chart.js或D3.js等庫來動態顯示進度。

後端設計：

  • API：
    • 獲取專案的所有任務和其狀態。
    • 新建任務。
    • 更新任務狀態、負責人等。
  • 資料庫：
    • 任務表：專案ID、專案型別，負責人、建立時間等。
    • 使用者-任務關聯表：用於管理任務的負責人和參與者。
  • 邏輯：
    • 後端需處理任務狀態的變更、許可權驗證（只有專案負責人可以編輯任務）。
    • 進度計算邏輯：透過任務的完成百分比自動更新專案進度。

6. 關鍵實現的流程圖或資料流圖

專案釋出資料流表

專案整體流程圖

7.實現成果展示

使用說明：

  • 手機端掃碼即可直接使用(快捷方便，根本不需要下載原始碼，配置環境,小聲bb......）
  • 當然也可以直接pc端使用：點選我

49781da92204de3c5fd0108e2d03973b

解釋專案的目錄結構：

  • page資料夾vue.js控制前後端頁面
  • static儲存靜態圖片檔案
  • uni_modules功能元件模組
  • uniCloud-alipay 雲資料庫、雲函式

image-20241010232918963

專案大廳

主要分為五部分的選單欄：“最新”，“熱門”，“競賽“，”科研“，”創業“

在專案大廳你總可以找到自己心儀的專案

留言板

招募志同道合的夥伴，並交流專案資訊。

釋出專案

填入專案的基本資訊，選擇專案的標籤，招募你的隊友。

我的專案

新增專案分類，管理檢視專案進度

個人中心

編輯個人主頁資訊，檢視專案草稿，分類

註冊與登入

使用學號註冊登入


8. 重要程式碼片段及解釋

  • 1.大廳程式home.vue部分程式碼

    • 實現了大廳介面設計
    <template>
	<view class="content">
		<wd-tabs v-model="active" animated swipeable @change="tabsChange">
			<block v-for="item in navList" :key="item.name">
				<wd-tab :title="item.title" :name="item.name">
					<scroll-view scroll-y="true">
						<view class="main">
							<wd-gap height="85rpx"></wd-gap>
							
							<view class="alone" v-for="item in articList" :key="item._id" @click="gotoDetail(item._id)">
								<blog-item :blog="item" @updateList="updateList(item._id)" />
							</view>
							<view class="load-text">{{ loadText }}</view>
						</view>
					</scroll-view>
				</wd-tab>
			</block>
		</wd-tabs>
	</view>
</template>

  • 2.釋出程式publish.vue部分程式碼

    • 實現瞭如何提交到資料庫的邏輯
    /**
 * 確認提交
 * @param status 0-草稿箱 1-已釋出 2-稽核中
 */
const onSubmit = (status: number = 1) => {
	articleParams.picurls = getImgList(articleParams.content, 9);
	loading.value = true;
	
	const dbCollection = db.collection("travel-articles");  
	    
	// 根據isEdit的值決定是更新還是新增文章  
	const operation = isEdit ? 
		dbCollection.doc(artId.value).update({ ...articleParams, article_status: status }) : 
		dbCollection.add({ ...articleParams, article_status: status });  
	
	operation.then((response: ApiResponse) => {
		console.log("==== 釋出", response)
		uni.showToast({
			title: "儲存成功",
			icon: "none",
		})
		setTimeout(() => {
			loading.value = false;
			handleBackHome();
		}, 1500)
	}).catch(() => {
		uni.showToast({
			title: "儲存失敗，請聯絡管理員",
			icon: "none",
		})
		loading.value = false;
	})
}

    image-20241010234501503

9.附加特點設計與展示

內接大語言模型通義千問

設計的創意獨到之處及意義

  1. 增強功能：透過接入大模型，可以為應用程式增加更高階的功能，如自然語言處理、智慧推薦等，從而提升使用者體驗。
  2. 節約資源：將複雜的模型處理放到外部伺服器，可以節省本地裝置的計算資源和儲存空間，減輕負擔。
  3. 實時更新：外接大模型能夠及時獲取最新的模型版本和演算法更新，無需使用者手動升級。
  4. 高效處理大資料：大模型可以處理和分析海量資料，提供更準確的分析和預測結果。
  5. 跨平臺相容：大模型的外接介面可以支援多種平臺，提升應用的可擴充套件性和靈活性。
  6. 降低開發成本：藉助現有的大模型，專案釋出者可以減少從零開始開發複雜演算法的時間和成本。

實現思路

查詢大語言模型的介面，透過雲伺服器連線

重要程式碼片段及解釋

module.exports = {
	TURBO_BASE_URL: "https://dashscope.aliyuncs.com", // 通義千問介面地址字首
	TURBO_KEY: "", // 通義千問key
}

解釋：這段程式碼是內建AI通義千問大模型的介面，建立專案時利用大模型來幫助專案建立者編輯文字。

10. 單元測試

10.1 測試工具與教程

測試工具：vue-test-utils和jest

教程：

確保你安裝了必要的測試庫，比如 vue-test-utils 和 jest。在 package.json 中加入以下依賴：

"devDependencies": {  
	"jest": "^27.0.0",  
	"@vue/test-utils": "^2.0.0",  
	"vue-jest": "^3.0.0"  
}

10.2 單元測試程式碼展示

import { mount } from '@vue/test-utils';  
import Register from '@/path/to/your/register.vue'; // 替換為真實路徑  

describe('Register.vue', () => {  
    let wrapper;  

    beforeEach(() => {  
        wrapper = mount(Register);  
    });  

    it('should update username data on input', async () => {  
        const usernameInput = wrapper.find('uni-easyinput[placeholder="請輸入學號"]');  
        await usernameInput.setValue('test_user');  
        expect(wrapper.vm.formData.username).toBe('test_user');  
    });  

    it('should submit form successfully', async () => {  
        // 填充表單欄位  
        await wrapper.setData({  
            formData: {  
                username: 'test_user',  
                nickname: 'Test Name',  
                password: 'password123',  
                password2: 'password123',  
                captcha: '1234' // 假設驗證碼要求是4個字元  
            }  
        });  

        // 提交表單  
        await wrapper.find('button[type="primary"]').trigger('click');  

        // 你可以在這裡增加一些期望，比如檢查是否呼叫了某個方法  
        // expect(...).toBe(...); 這取決於你的完整邏輯  
    });  

    it('should show an error if captcha is invalid', async () => {  
        // 填充表單欄位  
        await wrapper.setData({  
            formData: {  
                username: 'test_user',  
                nickname: 'Test Name',  
                password: 'password123',  
                password2: 'password123',  
                captcha: '' // 空的驗證碼  
            }  
        });  

        // 提交表單  
        await wrapper.find('button[type="primary"]').trigger('click');  

        // 驗證是否彈出了錯誤提示  
        // 這裡可以根據你的邏輯驗證  
        expect(wrapper.vm.$refs.captcha.focusCaptchaInput).toBe(true);  
    });  
});

解釋：我們將測試register.vue元件，來驗證表單提交和輸入驗證邏輯。

本示例使用 @vue/test-utils 的 mount 方法對元件進行掛載，確保元件生命週期函式正確執行。

10.3 測試資料構造思路

1. 正向場景（Valid Test Cases）

這些是測試可以成功註冊的情況：

  • 有效的使用者名稱和密碼：
    • 使用者名稱：僅數字學號
    • 暱稱：學號姓名
    • 密碼：至少 8 個字元，包括字母和數字
    • 再次輸入的密碼應與密碼一致
    • 驗證碼：符合長度和格式要求（例如 4 位數字）
javascriptconst validTestData = {  
    username: 'validUser123',  
    nickname: 'Valid User',  
    password: 'Password123',  
    password2: 'Password123',  
    captcha: '1234'  
};

2. 邊界情況（Boundary Test Cases）

這些測試旨在檢查系統對輸入邊界的處理：

  • 最短和最長輸入：
    • 使用者名稱長度為 1 和最大限制（例如 20 字元）
    • 密碼最短（例如 8 個字元）和最大（例如 20 字元）
javascriptconst boundaryTestData = [  
    { username: 'a', password: 'Password123', password2: 'Password123', captcha: '1234' }, // 邊界最短  
    { username: 'aVeryLongUserNameThatExceedsLimit', password: 'Password123', password2: 'Password123', captcha: '1234' } // 邊界最長  
];

3. 負向場景（Invalid Test Cases）

這些場景用於測試錯誤輸入條件，包括不符合要求的欄位。

  • 缺少必填欄位：
    • 使用者名稱、密碼、驗證碼為空等
  • 密碼不匹配：
    • 輸入的兩個密碼不一致
  • 無效格式的驗證碼：
    • 驗證碼格式不正確，如字母、特殊字元等
javascriptconst invalidTestData = [  
    { username: '', nickname: 'Valid User', password: 'Password123', password2: 'Password123', captcha: '1234' }, // 使用者名稱為空  
    { username: 'testUser', nickname: 'Valid User', password: 'Password123', password2: '', captcha: '1234' }, // 密碼未確認  
    { username: 'testUser', nickname: 'Valid User', password: 'Password123', password2: 'Password456', captcha: '1234' }, // 密碼不匹配  
    { username: 'testUser', nickname: 'Valid User', password: 'Password123', password2: 'Password123', captcha: 'abc' } // 驗證碼格式不正確  
];

4. 特殊字元和空格處理

用來測試系統如何處理包含特殊字元或空格的輸入。

javascriptconst specialCharTestData = {  
    username: 'test user!', // 包含空格和特殊字元  
    password: '1234!@#$', // 包含特殊字元  
    password2: '1234!@#$', // 包含特殊字元和一致性  
    captcha: '1234'  
};

5. 狀態變化測試

這些測試用於驗證在不同使用者狀態下的註冊流程：

  • 已經存在的使用者名稱（比如使用者名稱衝突）
  • 同一使用者嘗試重複註冊
javascriptconst existingUserTestData = {  
    username: 'existingUser123', // 這個使用者在系統中已存在  
    nickname: 'Existing User',  
    password: 'Password123',  
    password2: 'Password123',  
    captcha: '1234'  
};

11. GitHub程式碼簽入記錄

76bd1b12e53a7aacff74640d702c8d56_720

12. 遇到的問題及解決方法

1.專案詳細頁面異常

異常描述：

專案頁面大廳顯示正常，點選頁面空白

解決方法：

  • 檢查後臺資料庫介面是否正常。
  • 確定前端程式碼是否編寫正確。

解決與收穫：前端頁面程式碼錯打，導致頁面無法正常顯示。

在面對bug時，找相應程式碼，別慌。

2.註冊頁面實現與預期不符

異常描述：
使用學號作為註冊賬號時出現bug,無法以純數字登入。

解決方法：

  • 透過關鍵字找到相應註冊頁面
  • 分析註冊時編寫限制邏輯

解決與收穫：邏輯修改即成功。

設計邏輯框架時需要仔細嚴謹。

13. 對隊友🍁的評價

1. 角色與職責

  • 職責描述
    • 隊友主要負責前端頁面的開發，兢兢業業🍚:.

2. 工作態度

  • 積極性
    • 積極主動，責任心強,不可或缺的好parter
  • 協作精神
    • 在團隊討論中，能有效溝通，善於聽取他人意見並積極配合.

3. 技術能力

  • 技術掌握
    • 在前端開發時展示了前端的開發基礎，並能協同合作解決bug
  • 學習能力：
    • 主打能學，會不會另說😼

4. 時間管理

  • 任務完成情況：
    • ddl戰士，能在任務結束前成功完成程式碼.
  • 時間觀念：
    • 假期每次都準時參加會議，並在截止日期前完成了分配的工作.

5. 貢獻與影響

  • 團隊貢獻：
    • 熟練使用模組，為專案進度的推動立下汗馬功勞。

6. 改進建議

  • 提升空間
    • 不要壓力怪，放輕鬆，哥麼帶你跑同專案💪

相關文章