梁天成 劉博文 朱立鍇

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

關(guān)鍵詞：Web；體育用品；租借；App；前后端分離

中圖分類號(hào)：TP311.1文獻(xiàn)標(biāo)志碼：A

0 引言

隨著生活水平的日益提升，人們?cè)絹?lái)越注重體育鍛煉，但有部分體育活動(dòng)對(duì)體育器材的依賴性較大且對(duì)學(xué)生群體而言成本較高，很多學(xué)生也因此止步。在傳統(tǒng)模式下，體育用品一般采用直接售賣(mài)的模式，無(wú)論是全新的還是二手的，這對(duì)于只想嘗試尚未確定是否要持續(xù)開(kāi)展此項(xiàng)體育活動(dòng)的人群而言不太友好。校園體育用品租借App系統(tǒng)的開(kāi)發(fā)正好可以解決這一系列問(wèn)題，將雙方的活動(dòng)范圍局限于校園中，平臺(tái)也將對(duì)價(jià)格與質(zhì)量進(jìn)行把控，這樣的活動(dòng)模式不僅響應(yīng)國(guó)家鼓勵(lì)廣大人民參與體育鍛煉的號(hào)召，還可以對(duì)大學(xué)運(yùn)動(dòng)風(fēng)氣的建設(shè)起到推進(jìn)作用，豐富疫情背景下學(xué)生的校園生活。

1 應(yīng)用現(xiàn)狀

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

2 Web發(fā)展新技術(shù)優(yōu)點(diǎn)

隨著信息技術(shù)的發(fā)展，互聯(lián)網(wǎng)已經(jīng)深入各行各業(yè)，產(chǎn)生了非常大的影響。計(jì)算機(jī)技術(shù)、網(wǎng)絡(luò)技術(shù)和信息通信技術(shù)快速發(fā)展，高校要適應(yīng)這樣的環(huán)境，完全依靠PC端已經(jīng)落伍了，必須積極地開(kāi)發(fā)能夠適應(yīng)移動(dòng)端的產(chǎn)品，才能更好地適應(yīng)時(shí)代的發(fā)展。目前，眾多開(kāi)發(fā)企業(yè)不僅重視對(duì)Web開(kāi)發(fā)技術(shù)的研究，不斷提高自身的管理水平，也擁有較為成熟的Web開(kāi)發(fā)技術(shù)能力，完善Web系統(tǒng)開(kāi)發(fā)的流程［1］。

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

3 校園體育用品租借App的設(shè)計(jì)

3.1 校園體育用品租借App系統(tǒng)框架

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

系統(tǒng)設(shè)計(jì)總框架如圖1所示。

3.2 系統(tǒng)表現(xiàn)層的相關(guān)設(shè)計(jì)

該系統(tǒng)在表現(xiàn)層的設(shè)計(jì)上對(duì)App移動(dòng)端和PC端采取不同設(shè)計(jì)。

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

PC端使用Bootstrap前端開(kāi)發(fā)框架。這種開(kāi)發(fā)框架優(yōu)點(diǎn)也同樣良多，例如，代碼編寫(xiě)較為簡(jiǎn)單、開(kāi)發(fā)人員更容易上手、可以降低管理員學(xué)習(xí)成本、縮短系統(tǒng)開(kāi)發(fā)周期等?；贐ootstrap框架設(shè)計(jì)的頁(yè)面具有強(qiáng)悍的頁(yè)面適應(yīng)能力，可以輕易地適應(yīng)不同設(shè)備的不同頁(yè)面大小，在頁(yè)面布局上可以更好地規(guī)劃內(nèi)容。Bootstrap技術(shù)的高速發(fā)展使之擁有更多、更強(qiáng)大的內(nèi)置Web組件，可以更好地完成頁(yè)面的導(dǎo)航、進(jìn)條度、縮略圖等，使用基于Bootstrap框架設(shè)計(jì)的頁(yè)面可以使展示的內(nèi)容獲得更加豐富的表現(xiàn)形式。

3.3 API接口的相關(guān)設(shè)計(jì)

應(yīng)用業(yè)務(wù)層主要以SpringBoot為框架技術(shù)并搭建系統(tǒng)的API接口。API接口作為系統(tǒng)總設(shè)計(jì)的架構(gòu)核心點(diǎn)，在平臺(tái)的正常運(yùn)行上起著至關(guān)重要的作用。用戶在進(jìn)行網(wǎng)頁(yè)的相關(guān)操作時(shí)，運(yùn)行Web服務(wù)器對(duì)用戶的操作數(shù)據(jù)進(jìn)行處理，再通過(guò)Web服務(wù)器返還數(shù)據(jù)經(jīng)處理后得到的結(jié)果［6-7］。

3.4 App功能流程

隨著互聯(lián)網(wǎng)技術(shù)的運(yùn)用更加成熟與可靠，現(xiàn)在對(duì)一款應(yīng)用程序的設(shè)計(jì)也更加方便與簡(jiǎn)潔。在產(chǎn)品的使用上，用戶以賬號(hào)登錄后就可以進(jìn)入程序，然后錄入自己對(duì)體育用品的租借類型、時(shí)間、地點(diǎn)等需求，后臺(tái)數(shù)據(jù)再對(duì)已經(jīng)存入庫(kù)中的體育用品數(shù)據(jù)進(jìn)行篩選，選擇出較為合適租借的幾款對(duì)象，供用戶選擇。功能使用流程總框架如圖2所示。

3.5 校園體育用品App的社會(huì)效益

該設(shè)計(jì)目的主要是促進(jìn)校園運(yùn)動(dòng)風(fēng)氣的建設(shè)，為學(xué)生創(chuàng)造一個(gè)更方便與快捷的運(yùn)動(dòng)環(huán)境。相信這樣龐大的學(xué)生群體可以產(chǎn)生足夠的吸引力，吸引很多運(yùn)動(dòng)品牌加入校園風(fēng)氣的建設(shè)，無(wú)論器具還是活動(dòng)教學(xué)，都可以更加完善，實(shí)現(xiàn)互惠共利。

4 結(jié)語(yǔ)

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

參考文獻(xiàn)

［1］陳徐毅.移動(dòng)互聯(lián)時(shí)代Web與APP的技術(shù)應(yīng)用之爭(zhēng)［J］.中關(guān)村，2022（7）：46-47.

［2］鄭煜榮.基于軟件工程的Web開(kāi)發(fā)技術(shù)［J］.中國(guó)新通信，2021（11）：65-66.

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

［4］綦慧，徐曉慧.基于Web系統(tǒng)的大數(shù)據(jù)搜索技術(shù)的實(shí)現(xiàn)和優(yōu)化［J］.計(jì)算技術(shù)與自動(dòng)化，2021（2）：17-19.

［5］黃旭日，胡偉平.“智游小盒”旅游APP的設(shè)計(jì)與分析［J］.無(wú)線互聯(lián)科技，2021（21）：60-61.

［6］張晶晶，曹雙雙，楊怡潔，等.基于Bootstrap框架的響應(yīng)式網(wǎng)站設(shè)計(jì)［J］.電腦知識(shí)與技術(shù)，2020（34）：247-248.

［7］楊暉.高校計(jì)算機(jī)網(wǎng)絡(luò)平臺(tái)設(shè)計(jì)與應(yīng)用策略研究［J］.信息與電腦（理論版），2018（6）：16-17.

（編輯 （王雪芬）