基于Web技術的校園體育用品租借App設計

梁天成 劉博文 朱立鍇

摘要：目前，隨著人類生活質量的提升，學生的活動意識也逐漸強化，特別是在新冠肺炎疫情背景下，體育運動成了在校大學生課余生活的重要組成部分，但部分體育用品價格昂貴，開發相應的體育用品租借系統就顯得尤為重要。文章利用Web系統的前后端框架技術，開發一款校園體育用品租借App平臺，對學生閑置的體育用品進行線上整合，通過線上或線下兩種方式完成租借活動，平臺上的閑置體育用品同樣可以進行二手出售，用戶可根據需要選擇，為當代大學生提供一個更加適應當下活動模式的可靠服務平臺，使學生閑置的體育用品在另一部分有需求的學生身上發揮價值，營造一個更加積極的校園運動環境。

關鍵詞：Web；體育用品；租借；App；前后端分離

中圖分類號：TP311.1文獻標志碼：A

0 引言

隨著生活水平的日益提升，人們越來越注重體育鍛煉，但有部分體育活動對體育器材的依賴性較大且對學生群體而言成本較高，很多學生也因此止步。在傳統模式下，體育用品一般采用直接售賣的模式，無論是全新的還是二手的，這對于只想嘗試尚未確定是否要持續開展此項體育活動的人群而言不太友好。校園體育用品租借App系統的開發正好可以解決這一系列問題，將雙方的活動范圍局限于校園中，平臺也將對價格與質量進行把控，這樣的活動模式不僅響應國家鼓勵廣大人民參與體育鍛煉的號召，還可以對大學運動風氣的建設起到推進作用，豐富疫情背景下學生的校園生活。

1 應用現狀

傳統的線下二手體育用品多為直接售賣，缺點是效率低、渠道窄，無法跟上移動互聯網的熱潮，且只能售賣、不可租賃，特別是二手用品，一旦售出不可退換，售后難以保障。本研究通過開發一款校園體育用品租借App，能較好地解決這些問題。相比于傳統二手交易，其優勢在于能夠加快體育用品行業和移動互聯網產業的融合，用戶只須在應用程序上完成簡易的操作，就可以做到體育用品的租借，無須購買，對于只想嘗試一次或運動頻率不高的人群而言性價比更高。設計的關鍵就在于如何在校園中實現閑置體育用品的有效處理、交易渠道與交易規模的完善、響應智能終端的快速發展。

2 Web發展新技術優點

隨著信息技術的發展，互聯網已經深入各行各業，產生了非常大的影響。計算機技術、網絡技術和信息通信技術快速發展，高校要適應這樣的環境，完全依靠PC端已經落伍了，必須積極地開發能夠適應移動端的產品，才能更好地適應時代的發展。目前，眾多開發企業不僅重視對Web開發技術的研究，不斷提高自身的管理水平，也擁有較為成熟的Web開發技術能力，完善Web系統開發的流程［1］。

傳統App開發方式能夠訪問手機的所有功能，比較快捷地使用移動設備端提供的接口，并支持大量的圖形和動畫，其缺點是針對Android和iOS兩種系統均獨立開發對應的App，無形地提高了開發成本。而運用Web技術延伸的Web App的本質是通過瀏覽器訪問Web應用，配合移動端UI框架，使其適合顯示在移動端設備，因此，Web App也可以運行在Android、iOS和PC上，但也有一些缺點，例如，對移動設備的硬件功能使用會有缺失，訪問頁面須重新加載內容，從而導致頁面內容的渲染速度不及App系統開發，瀏覽速度也與手機終端性能和網絡環境掛鉤，容易被其影響。綜合考慮兩種設計App的優缺點，結合當前網絡環境和當代學生對移動設備的依賴，基于Web相關技術開發的校園體育用品App系統更能夠跟上時代的腳步，在現今移動設備應用普及的背景下，為全體學生提供一個更方便的體育活動環境，豐富學生的校園生活，選擇Web App顯然是一種更為明智的方案。

3 校園體育用品租借App的設計

3.1 校園體育用品租借App系統框架

目前，越來越多的企業通過Web技術完成一系列產品的開發。雖然傳統的Web開發仍有許多讓人詬病的情況，例如畫面表現力差、瀏覽數據丟失等情況。但在互聯網技術高速發展的現在，應用SpringBoot+Vue前后端分離技術搭建前后兩端可以解決諸多問題。App使用Element.UI作為UI層關鍵技術，所以App在技術上可以與現在主流的地圖導航App（如高德地圖、騰訊地圖等）更好地結合，并實現體育用品租借地點的智能導航。在數據庫的永久數據選擇中使用MySQL數據庫，具有體積小、速度快、總體成本低、開放源代碼等優點，因此得到了較為廣泛的應用。

系統設計總框架如圖1所示。

3.2 系統表現層的相關設計

該系統在表現層的設計上對App移動端和PC端采取不同設計。

App移動端上將使用Element.UI作為關鍵技術搭建平臺，Element.UI作為一套基于Web系統的組件庫，擁有非常多的優點。站在開發者的角度，組建指令的設計與正常生活的流程、邏輯保持一致；站在用戶的角度，簡化的流程與清晰的步驟可以讓用戶得到更好的使用體驗［3-4］。在將Element.UI作為交UI層的基礎上使用Vue作為交互層的情況下，可以通過自定義的Vue指令實現對平臺數據的快速搜索，尤其是結合大數據的關鍵詞搜索能力，可以做到對龐大信息的篩選以解決網頁的卡頓現象。相信這不僅會提升用戶體驗，也將優化管理系統對Web系統后臺數據的整理。Vue是一個漸進式輕量級框架，在Vue生態系統的庫與第三方庫的整合下，可以驅動更復雜的Web頁面［5］。

PC端使用Bootstrap前端開發框架。這種開發框架優點也同樣良多，例如，代碼編寫較為簡單、開發人員更容易上手、可以降低管理員學習成本、縮短系統開發周期等。基于Bootstrap框架設計的頁面具有強悍的頁面適應能力，可以輕易地適應不同設備的不同頁面大小，在頁面布局上可以更好地規劃內容。Bootstrap技術的高速發展使之擁有更多、更強大的內置Web組件，可以更好地完成頁面的導航、進條度、縮略圖等，使用基于Bootstrap框架設計的頁面可以使展示的內容獲得更加豐富的表現形式。

3.3 API接口的相關設計

應用業務層主要以SpringBoot為框架技術并搭建系統的API接口。API接口作為系統總設計的架構核心點，在平臺的正常運行上起著至關重要的作用。用戶在進行網頁的相關操作時，運行Web服務器對用戶的操作數據進行處理，再通過Web服務器返還數據經處理后得到的結果［6-7］。

3.4 App功能流程

隨著互聯網技術的運用更加成熟與可靠，現在對一款應用程序的設計也更加方便與簡潔。在產品的使用上，用戶以賬號登錄后就可以進入程序，然后錄入自己對體育用品的租借類型、時間、地點等需求，后臺數據再對已經存入庫中的體育用品數據進行篩選，選擇出較為合適租借的幾款對象，供用戶選擇。功能使用流程總框架如圖2所示。

3.5 校園體育用品App的社會效益

該設計目的主要是促進校園運動風氣的建設，為學生創造一個更方便與快捷的運動環境。相信這樣龐大的學生群體可以產生足夠的吸引力，吸引很多運動品牌加入校園風氣的建設，無論器具還是活動教學，都可以更加完善，實現互惠共利。

4 結語

校園體育用品租借App是基于SpringBoot+Vue前后端分離技術搭建的系統平臺，無論是在移動端還是電腦端上，都可以穩定地運行并保證用戶的使用體驗，再結合Element.UI，Bootstra，Vue，SpringBoot等豐富的組件或插件內容，該平臺獲得了不俗的活動內容展示能力。該App設計的線上交易活動模式也可以將體育用品租借這一社會剛需活動控制得更加合理。

參考文獻

［1］陳徐毅.移動互聯時代Web與APP的技術應用之爭［J］.中關村，2022（7）：46-47.

［2］鄭煜榮.基于軟件工程的Web開發技術［J］.中國新通信，2021（11）：65-66.

［3］馬雪山，張輝軍，陳輝，等.前后端分離的Web平臺技術研究與實現［J］.電子技術與軟件工程，2022（8）：70-73.

［4］綦慧，徐曉慧.基于Web系統的大數據搜索技術的實現和優化［J］.計算技術與自動化，2021（2）：17-19.

［5］黃旭日，胡偉平.“智游小盒”旅游APP的設計與分析［J］.無線互聯科技，2021（21）：60-61.

［6］張晶晶，曹雙雙，楊怡潔，等.基于Bootstrap框架的響應式網站設計［J］.電腦知識與技術，2020（34）：247-248.

［7］楊暉.高校計算機網絡平臺設計與應用策略研究［J］.信息與電腦（理論版），2018（6）：16-17.

（編輯 （王雪芬）