開源之夏個人專訪與項目經驗分享持續(xù)開放中，歡迎已從開源之夏畢業(yè)或正在參與開源之夏活動的學生、導師一同加入專訪行動，掃描文末二維碼填寫專訪問卷，與大家分享你眼中的開源之夏！

本期項目經驗分享來自openGauss社區(qū)中選學生——劉昱嫻，在開源之夏2023中承擔的項目是分頁器組件封裝。

#?關于openGauss開源社區(qū)

openGauss是一款開源關系型數據庫管理系統，采用木蘭寬松許可證v2發(fā)行。openGauss內核深度融合華為在數據庫領域多年的經驗，結合企業(yè)級場景需求，持續(xù)構建競爭力特性。同時openGauss也是一個開源的數據庫平臺，鼓勵社區(qū)貢獻、合作。

官網：https://opengauss.org/zh/

# 項目基本信息

項目名稱：分頁器組件封裝

項目導師：王杏

項目簡述與產出要求：分頁器組件封裝

1. 完成分頁器組件封裝；支持移動端和pc端

2. 適配Chrome、Safari、Firefox、Edge 等主流瀏覽器

3. 提供組件API文檔

項目鏈接：https://summer-ospp.ac.cn/org/prodetail/23c9e0535

# 項目開發(fā)情況

1.?項目描述

在如今的應用場景下，往往面對需要處理大量數據的情況，將所有數據一次性加載到前端進行展示不僅會占用大量的內存和網絡資源，還會導致頁面加載緩慢，因而實現分頁器組件的封裝具有現實意義。

分頁器的作用是將數據分為多個頁面或數據塊，每次只加載當前頁面或數據塊的數據從而提高頁面加載速度和用戶體驗，其意義在于實現數據的分頁展示和導航。

2. 項目實現思路

首先需要進行分頁器組件的結構化設計，將組件拆分為前后按鈕（prev、next）、頁碼列表（pager）、每頁容量（sizes）、總數據量（total）、跳轉（jumper）等，包括增加slot插槽使得用戶可以自定義內容展示。

組件拆分：

隨后進行props參數的設計。props涉及當前頁、數據總量、每頁容量、組件布局、頁碼列表長度等關鍵參數在父子組件間的傳遞，同時可在不同上下文中使用，提升組件的可復用性。

接下來進行分頁核心邏輯的實現，包括依據傳遞參數計算出總頁數、頁碼的前移后移，跳轉到指定頁碼，頁碼列表內置的快速前移后移等事件。

在父子組件的通信過程，主要借助emit自定義事件觸發(fā)。

頁碼展示列表（pager）是分頁器的核心部分。

這里負責呈現分頁器的主要界面元素，處理用戶的交互事件，并根據當前頁碼和狀態(tài)設置不同的樣式。pager處理了用戶的點擊事件，確保用戶可以正確地導航到不同的頁面，并觸發(fā)自定義事件以通知父組件進行頁面更新，正確地展示變化后的頁碼列表。比如當用戶點擊“6”時，依次展示‘1’快速前移按鈕‘4 5 6 7 8’快速后移按鈕‘50’。

基礎功能實現后，需要對參數進行合法性校驗以及邊界測試。

合法性校驗：

• 是否傳遞total和pageCount等關鍵參數

• 是否存在對當前頁碼、每頁容量的事件監(jiān)視器

• 傳遞參數的數據類型是否正確等

邊界測試：

• 當前頁碼應在1~pageCount之間

• jumper組件輸入值為number類型且為非負數，并進行數值校驗

• sizes組件的value檢測非空值，當oldValue與newValue不等時觸發(fā)事件監(jiān)聽器

• 頁碼列表的內置快速前后移應使得currentPage保持在正常范圍內

最后是對分頁器的樣式設計：因分頁器需要適配pc端和移動端，因而需要借助@media媒體查詢，來依據不同分辨率動態(tài)呈現對應樣式。對于在樣式設計中用到的color、background-color、margin、padding、font-size等組件變量歸納到常量文件中，通過var綁定使用。

# 開源之夏個人隨訪

--項目經歷--

OSPP：請簡單介紹一下自己。

劉昱嫻：大家好，我叫劉昱嫻，來自江西撫州，是華中師范大學計算機科學與技術專業(yè)大三的一名本科生。

OSPP：大二時你已經有了頗為豐富的項目經驗，對于提高代碼質量、問題解決和過程溝通，有什么可以分享的學習方法嗎？

劉昱嫻：我從大一開始接觸前端開發(fā)領域。當時是因為學校的社團招新宣講，覺得前端引人入勝的網頁特效很有趣，因此我決定加入木犀團隊并成功通過了考核。在團隊里，每周會有組會分享，同時也和團隊內后端、產品、設計的同學們一起開發(fā)過小程序、網站等。在這個過程中，培養(yǎng)了我的團隊協作能力。總結過去兩年的學習經驗，我認為要提升代碼質量就離不開代碼的規(guī)范性約束，比如需要考慮到產品的迭代，日常的可維護性等。同時多逛逛github、gitee這些網站，閱讀一些高質量的代碼，比如一些start數多的開源項目等。在團隊協作過程中，熟練使用git工具可以顯著提高對代碼的管理能力和開發(fā)效率。

OSPP：你是如何了解到并決定參與開源之夏活動的？在項目申請的過程中你都做過哪些準備？

劉昱嫻：我是從學長學姐的分享中了解到開源之夏的。當時大一也申請了開源之夏的項目但是很遺憾沒有入選。于是大二的時候更加注重項目申請書的細節(jié)方面，比如說需要了解分頁器的應用場景、通常如何做到分頁展示海量數據、分頁器組件的拆分（比如包括前后按鈕、頁碼列表、每頁容量等）、適配pc端和移動端等，同時參閱了Element UI的官方代碼，熟悉項目倉庫代碼等，最終在項目申請書中產出自己的理解。

OSPP：之前掌握的技術棧和項目經驗對你此次開源之夏項目開發(fā)有什么幫助嗎？

劉昱嫻：這次開源之夏的項目技術棧和我之前掌握的算是比較契合。比如html，css，typescript這些。但是之前常用的框架是react，項目技術棧是vue，所以也需要一些時間去學習vue框架。所幸在react的基礎上，學習vue會相對輕松些。

--參與開源社區(qū)--

OSPP：參與開源之夏之前是否參與過開源社區(qū)？參與開源之夏的過程中你對社區(qū)的認識有什么變化嗎？

劉昱嫻：在此前并沒有參加過開源社區(qū)。在參與開源之夏的過程中，我認為社區(qū)是一個充滿活力和合作精神的環(huán)境，它為開發(fā)者提供了一個學習、分享和貢獻的機會，也提供了開放創(chuàng)新的軟件和技術解決方案，在相互促進的過程中進一步推動開源項目的發(fā)展。

OSPP：在開發(fā)過程中，社區(qū)和導師為你提供了怎樣的幫助？

劉昱嫻：在開發(fā)過程中，導師會提供解決問題的思路，并在代碼調試過程中逐步引導性能優(yōu)化。同時在代碼審查中發(fā)現潛在問題，確保項目符合質量規(guī)范。在社區(qū)中可以獲得學習資源的分享，同時也是一個問題解決的好地方，幫助提升開發(fā)技能。

OSPP：對于自己日后在社區(qū)的發(fā)展有什么規(guī)劃么？

劉昱嫻：希望能多參與社區(qū)討論，鉆研一些感興趣的技術領域。同時尋找一些社區(qū)的開源項目，積極參與貢獻。

--收獲與寄語--

OSPP：想對正在學習或想要從事技術工作的女生們說些什么呢？

劉昱嫻：我覺得有句話說得好：“興趣是最好的老師”。這一點對于男生女生來說都是同樣適用的。在學習的過程中，始終葆有對未知的好奇并且能夠堅持下去，那么結果一定不會讓你失望。在項目開發(fā)經歷中，會因卡bug苦苦求解良久才找到解決辦法，會因項目的ddl迫近而焦急...但是當新功能開發(fā)出來了，產品上線了，會因此而歡呼雀躍，那種自豪感是無法言喻的。在技術領域，有時會面臨性別刻板印象的困擾，但是請堅信你的能力，不要害怕挑戰(zhàn)，專注于自我提升，一樣可以很出色。

END

專欄編輯：大夢

校對：校大山、劉昱嫻

制圖：GoodWhite

專欄投稿請聯系開源小助手：kaiyuanzhixia 或專欄編輯：Hungryfish34（備注“專欄投稿”加速通過），或填寫下方專訪信息收集問卷。