基于B/S架構(gòu)的校園“約球”平臺的設(shè)計(jì)與實(shí)現(xiàn)

左匡天 張振虎

摘要：隨著移動互聯(lián)網(wǎng)的快速發(fā)展，人們的生活與互聯(lián)網(wǎng)的聯(lián)系越來越緊密。生活水平的普遍提升使得體育運(yùn)動在普羅大眾中已經(jīng)走向更專業(yè)化的發(fā)展趨勢。學(xué)生群體作為日常體育運(yùn)動的主力消費(fèi)群體，對于場地等硬件設(shè)施以及教練等相關(guān)服務(wù)的需求也日益增長。其中球類運(yùn)動仍然是絕大多數(shù)人熱衷的體育項(xiàng)目，該文以球類運(yùn)動為主題，經(jīng)實(shí)際調(diào)研了解該群體的需求和存在的問題，通過對資源和業(yè)務(wù)流程的梳理，設(shè)計(jì)開發(fā)了基于B/S架構(gòu)的校園“約球”平臺，使學(xué)生群體便于獲取相關(guān)信息，從而合理規(guī)劃時(shí)間，以更專業(yè)、更高效的方式享受球類運(yùn)動帶來的健康和快樂。

關(guān)鍵詞：校園體育;球類運(yùn)動;B/S模式;活動預(yù)約

中圖分類號：TP311? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2020）26-0001-03

Abstract： With the rapid development of mobile Internet， people's life is more and more closely connected with the Internet. With the general improvement of living standards， sports have become more professional among the general public. As the main consumer group of daily sports， the demand for facilities such as venues and coaches is also growing. Ball games are still the most popular sports events. This paper takes ball games as the theme， through the actual investigation to understand the needs and existing problems of the group， through the combing of resources and business processes， designs and develops a campus "ball meeting" platform based on B/S structure， which makes it easy for students to obtain relevant information， so as to reasonably plan their time， so as to be more professional and more professional Enjoy the health and happiness of ball games in an efficient way.

Key words： campus sports; ball games; B/S mode; activity booking

1 背景

隨著移動互聯(lián)網(wǎng)迅速發(fā)展，各類移動終端應(yīng)用程序正在潛移默化地進(jìn)入人們的生活，帶來了全新的生活體驗(yàn)[1]。近些年，青少年學(xué)生群體的身體健康以及體育運(yùn)動鍛煉情況等問題備受社會各界的普遍關(guān)注。經(jīng)調(diào)研發(fā)現(xiàn)，核心問題鎖定在時(shí)間安排、相關(guān)信息獲取、場地以及相關(guān)設(shè)施配給和管理水平偏低、資源利用率低、供需信息發(fā)布獲取缺乏有效途徑（渠道或平臺）。針對上述現(xiàn)狀及問題，本文以球類運(yùn)動為主題，以提升學(xué)生群體的綜合素質(zhì)為目標(biāo)，設(shè)計(jì)開發(fā)基于B/S架構(gòu)的校園“約球”平臺，從系統(tǒng)開發(fā)軟件、基本功能、預(yù)約管理、關(guān)鍵技術(shù)、系統(tǒng)測試等方面進(jìn)行論述。

2 系統(tǒng)開發(fā)環(huán)境的選擇

系統(tǒng)架構(gòu)采用便捷快速的B/S體系，相比于C/S體系，對于技術(shù)的要求較低，系統(tǒng)通過瀏覽器和簡單的操作系統(tǒng)即可運(yùn)行，平臺運(yùn)行對于計(jì)算機(jī)的配置要求減低，同時(shí)為系統(tǒng)后期的維護(hù)減少壓力。系統(tǒng)在前端及后端分別采用VUE+ElementUi， SpringBoot+Mysql+Mybatis兩種不同的集成環(huán)境進(jìn)行設(shè)計(jì)，使用前后端分離技術(shù)，提高設(shè)計(jì)過程中的容錯性，前后端錯誤互不影響，各司其職，大大減少開發(fā)的難度。平臺使用Intellij Idea 2018.2.3、jdk1.8作為集成開發(fā)環(huán)境，MySQL進(jìn)行數(shù)據(jù)庫管理，利用JavaScript服務(wù)器腳本語言編寫邏輯代碼。

3 系統(tǒng)功能設(shè)計(jì)

系統(tǒng)的功能結(jié)構(gòu)如圖1所示。

根據(jù)對用戶實(shí)際調(diào)查結(jié)果分析和系統(tǒng)分析，結(jié)合與本系統(tǒng)類似的線上平臺，學(xué)習(xí)國外先進(jìn)的預(yù)約模式，本系統(tǒng)的功能設(shè)計(jì)分為以下幾個(gè)模塊。

1）學(xué)生用戶

個(gè)人信息修改：學(xué)生用戶進(jìn)入平臺可以完善個(gè)人信息、修改登錄密碼、添加用戶運(yùn)動軌跡、查詢用戶賬單、接收管理員及其他用戶發(fā)送的消息;

預(yù)約場地、教練：學(xué)生根據(jù)教練列表和場地列表選擇合適的教練、場地并實(shí)時(shí)進(jìn)行下單處理生成訂單;

尋找玩伴：學(xué)生在玩伴列表中尋找符合自身需求的玩伴，上傳某時(shí)間段自身需求信息，在玩伴列表瀏覽、管理需求信息;

參與活動：在活動列表中下載由管理員上傳的活動報(bào)名表，參加活動需填寫報(bào)名表并在活動列表進(jìn)行上傳處理;

訂單查詢：學(xué)生在下單后生成訂單，在個(gè)人信息管理中對訂單進(jìn)行刪除及退訂處理，退訂時(shí)需扣除支付金額的10%作為違約費(fèi)用;

意見反饋：用戶可以將系統(tǒng)使用過程出現(xiàn)的問題反饋至管理員，用戶間可相互交流。

2）管理員

用戶管理：管理員可以對學(xué)生用戶進(jìn)行管理;

場地、教練、活動管理：管理員經(jīng)過篩選，上傳添加信息，并對其進(jìn)行修改、刪除、查看詳細(xì)信息等處理;

反饋意見處理：管理員可以查看用戶上傳的反饋意見，向用戶發(fā)送處理結(jié)果。

4 預(yù)約管理

4.1 教練預(yù)約

因?yàn)橄到y(tǒng)設(shè)計(jì)以“預(yù)約”為主體，所以選擇合理的預(yù)約模式尤為重要，此處以教練預(yù)約為例介紹該系統(tǒng)預(yù)約流程。教練信息通過管理員篩查上傳至系統(tǒng)中，用戶通過自身時(shí)間、運(yùn)動項(xiàng)目、價(jià)格等需求條件篩選教練，并核對該教練這一時(shí)間段的可教學(xué)人數(shù)是否已滿，選中后通過下單處理生成教練訂單。如學(xué)生取消訂單將扣除支付金額的10%作為違約懲罰。此預(yù)約流程大大節(jié)省學(xué)生線下預(yù)約時(shí)間和精力，為學(xué)生運(yùn)動提供便捷的服務(wù)。此外該系統(tǒng)設(shè)計(jì)充分考慮系統(tǒng)的延展性，依據(jù)預(yù)約實(shí)際狀況，可以增加后續(xù)的評價(jià)體系和訂單的靈活處理。該系統(tǒng)教練預(yù)約的整個(gè)流程如圖2所示。

4.2 預(yù)約管理

因?yàn)椤邦A(yù)約”會出現(xiàn)較多的不確定性，傳統(tǒng)的預(yù)約模式較為浪費(fèi)用戶時(shí)間和精力，又給管理人員增添了很多工作壓力。因此設(shè)計(jì)開發(fā)以“預(yù)約”為主題的球類線上平臺，切合學(xué)生實(shí)際需求，替代傳統(tǒng)的運(yùn)動預(yù)約模式。系統(tǒng)預(yù)約流程：管理員通過篩查后上傳商家信息，學(xué)生通過時(shí)間篩查，瀏覽該時(shí)間段的商戶信息。選擇適宜自身?xiàng)l件的商家后選擇下單支付，即可成功預(yù)約。為限制用戶下單量，場地預(yù)約由時(shí)間限制下單人數(shù)，教練、活動預(yù)約由管理員上傳的需求人數(shù)限制名額。為限制學(xué)生胡亂下單影響商家工作的情況屢次出現(xiàn)，用戶選擇退訂需要扣除10%的違約費(fèi)用，特殊情況可與管理員溝通退還違約金。該系統(tǒng)預(yù)約為商家和用戶提供了便捷的服務(wù)，解決了傳統(tǒng)線下預(yù)約模式帶來的諸多問題。

5 系統(tǒng)開發(fā)的關(guān)鍵技術(shù)

5.1 前后分離架構(gòu)應(yīng)用模式概述

在傳統(tǒng)的互聯(lián)網(wǎng)Web軟件開發(fā)中，程序員不僅需要負(fù)責(zé)后端，還要負(fù)責(zé)前端，這就導(dǎo)致了Web應(yīng)用程序的高度耦合，使軟件開發(fā)的效率大大降低[2]。前后端分離架構(gòu)應(yīng)用模式的核心思想是前端HTML頁面通過AJAX調(diào)用后端的RESTFUL、API接口并使用JSON數(shù)據(jù)進(jìn)行交互，前端與后端的耦合度相對較低。前端通過訪問后端開發(fā)的接口或API對數(shù)據(jù)進(jìn)行增加、查看、修改和刪除處理，后端僅需要返回前端需要的數(shù)據(jù)，前后端各司其職，做到后端不再控制前端的效果。前端負(fù)責(zé)連接數(shù)據(jù)接口和系統(tǒng)界面的布局設(shè)置，從而實(shí)現(xiàn)系統(tǒng)的各功能模塊。網(wǎng)頁和App都有各自的處理方式，后端開發(fā)一套邏輯，對外提供數(shù)據(jù)即可，前端所需數(shù)據(jù)基本相同的情況下使用何種前端對于系統(tǒng)并沒有太大的影響。使用前后端分離技術(shù)提高系統(tǒng)在設(shè)計(jì)過程中的容錯性。前后端分離架構(gòu)常用服務(wù)器有兩種：

1）Web服務(wù)器：一般指像nginx，apache這類的服務(wù)器，他們一般只能解析靜態(tài)資源，只有該服務(wù)器可被外網(wǎng)訪問。

2）應(yīng)用服務(wù)器：一般指像Tomcat，Tetty，Resin這類的服務(wù)器可以解析動態(tài)資源也可以解析靜態(tài)資源，但解析靜態(tài)資源的能力沒有Web服務(wù)器好且只能被內(nèi)網(wǎng)訪問。

5.2 數(shù)據(jù)庫設(shè)計(jì)

根據(jù)基于B/S架構(gòu)的校園“約球”平臺的功能，在MySQL數(shù)據(jù)庫中建立用戶信息表（x2_user）（見表1和教練信息表（x2_coach）（見表2）。

5.3 選擇MySQL數(shù)據(jù)庫

數(shù)據(jù)庫的設(shè)計(jì)需要遵守?cái)?shù)據(jù)庫嚴(yán)格的設(shè)計(jì)理念，設(shè)計(jì)規(guī)劃過程十分復(fù)雜，保證數(shù)據(jù)庫的完整性的同時(shí)，盡可能簡化數(shù)據(jù)庫，為用戶在查詢和使用過程中提供便利。數(shù)據(jù)庫技術(shù)是計(jì)算機(jī)數(shù)據(jù)處理與信息管理系統(tǒng)的核心，研究和管理的對象是數(shù)據(jù)，所以數(shù)據(jù)庫技術(shù)是對數(shù)據(jù)的統(tǒng)一組織和管理[3]。MySQL支持多線程、多處理器，且有多種列類型。這可以通過類庫的高度優(yōu)化實(shí)現(xiàn)SQL函數(shù)庫的快速啟動。一般來說，初始化后可以不初始化內(nèi)存分配。該系統(tǒng)選擇MySQL數(shù)據(jù)庫具備以下特點(diǎn)和優(yōu)勢：

1）性能穩(wěn)定，異常宕機(jī)狀況出現(xiàn)較少;

2）開放源代碼，其適用性高，使用成本低;

3）體積小，安裝方便，易于維護(hù);

4）MySQL支持多種操作系統(tǒng)，提供多種API接口，支持多種開發(fā)語言。

5.4 JavaScript技術(shù)

JavaScript是一種可以直接嵌入HTML頁面，向HTML頁面添加交互行為的解釋型或直譯式腳本語言。廣泛應(yīng)用于web開發(fā)設(shè)計(jì)，實(shí)現(xiàn)web頁面的人機(jī)交互，用來為網(wǎng)頁添加各式各樣的功能，讓用戶在使用過程中體驗(yàn)更加流暢，界面瀏覽效果更美觀簡潔。該語言具有自身的數(shù)據(jù)結(jié)構(gòu)，編碼邏輯和程序框架。JavaScript運(yùn)行不需要服務(wù)器的支持，用戶可在具有瀏覽器的環(huán)境下穩(wěn)定運(yùn)行，這也使得其可在多平臺下進(jìn)行運(yùn)行的能力。隨著其跨平臺、易操作上手的優(yōu)勢逐漸被人們熟知，程序員更喜歡使用該語言進(jìn)行邏輯編碼設(shè)計(jì)，以減輕服務(wù)器的壓力，與此同時(shí)，使用該語言的安全性問題漸漸出現(xiàn)，人們不得不傾向服務(wù)器語言以保證安全。雖然安全性不能得到保證，但是該語言優(yōu)勢明顯，仍然被人們廣泛使用，隨著V8等引擎和Node.js的發(fā)展及其事件驅(qū)動及異步IO等特性，JavaScript也開始被用來編寫服務(wù)器端程序，這使得JavaScript具有了一定的服務(wù)器功能，在某些方面甚至比PHP效果更為明顯[4]。

基于B/S架構(gòu)的校園“約球”平臺在修改瀏覽器界面、使用各種函數(shù)回應(yīng)鍵盤鼠標(biāo)對瀏覽器的操作、校驗(yàn)用戶輸入數(shù)據(jù)，提取用戶訪問資料、對后端接口進(jìn)行請求發(fā)起中用到JavaScript。

5.5 Vue前端框架和Spring Boot框架

Vue.js是一個(gè)輕量級的框架， 具有性能高、靈活性強(qiáng)的特點(diǎn)[5]。在構(gòu)建過程中，比較容易操作，方便整合既有的項(xiàng)目。前端應(yīng)用Vue框架，具有以下優(yōu)勢：

1）官方文檔清晰;

2）可以同步進(jìn)行DOM更新;

3）功能由不同的單個(gè)功能組件構(gòu)成;

4）無須聲明依賴的可推導(dǎo)屬性。

Spring Boot是最新開發(fā)的輕量級框架，通過框架中的簡化配置將系統(tǒng)的開發(fā)搭建過程進(jìn)行全面簡化。解決引用不穩(wěn)定性，版本兼容沖突等問題。系統(tǒng)開發(fā)過程采用Spring Boot框架，具有以下優(yōu)勢：

1）可以創(chuàng)建獨(dú)立的應(yīng)用程序，創(chuàng)建可執(zhí)行的JARS和WARS;

2）提供自動配置簡化搭建開發(fā)過程;

3）提供準(zhǔn)備好的特性及配置;

4）沒有代碼生成，不需要XML配置。

6 系統(tǒng)測試

6.1 系統(tǒng)測試方法

系統(tǒng)測試是為了發(fā)現(xiàn)系統(tǒng)中存在的問題，找出系統(tǒng)運(yùn)行的錯誤，分析錯誤出現(xiàn)的原因，可以幫助管理者更好地完善系統(tǒng)。B/S系統(tǒng)測試方法大致可分為三類：功能測試、性能測試和界面測試。功能測試是在用戶的角度出發(fā)，確保系統(tǒng)在執(zhí)行相應(yīng)功能模塊與用戶期望一致。性能測試除了對系統(tǒng)本身所能承受的負(fù)載、壓力、速度等承受能力的測試之外，還要對運(yùn)行系統(tǒng)的硬件設(shè)備的使用情況進(jìn)行分析。界面測試是保證系統(tǒng)界面風(fēng)格的一致性，用簡潔的界面實(shí)現(xiàn)系統(tǒng)的功能。

6.2 測試內(nèi)容

為確保用戶正常登錄系統(tǒng)，防止異常情況的發(fā)生，本次針對用戶登錄出現(xiàn)的可能狀況進(jìn)行測試用例。數(shù)據(jù)庫中的正確賬號為“張振虎”，正確密碼為“123456”，對于這個(gè)賬號的具體測試結(jié)果如表3所示。

7 結(jié)束語

本文選題根據(jù)學(xué)生群體進(jìn)行球類運(yùn)動鍛煉的現(xiàn)狀以及存在的問題出發(fā)，使用JavaScript腳本語言，Idea集成環(huán)境，MySQL數(shù)據(jù)存儲及當(dāng)下流行的B/S開發(fā)模式設(shè)計(jì)開發(fā)該系統(tǒng)。該系統(tǒng)的設(shè)計(jì)與開發(fā)的意義與價(jià)值表現(xiàn)在以下兩方面：一方面，嘗試著為學(xué)生群體在球類運(yùn)動鍛煉中遇到的諸多問題尋求解決方案，使其能夠更準(zhǔn)確地獲取場地、人員等信息，從而合理安排時(shí)間;另一方面，對于場地管理人員以及教練等服務(wù)人員，不僅能夠提升工作效率，而且更具針對性地發(fā)布和獲取信息，提升管理水平，使軟硬件資源得到更好的利用。

參考文獻(xiàn)：

[1] 左匡天， 李子龍. 棉紡籃球俱樂部管理信息系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 電腦知識與技術(shù)， 2019，15（23）： 33-35，45. （下轉(zhuǎn)第7頁）

（上接第3頁）

[2] 王建， 羅政， 張希， 等. Web項(xiàng)目前后端分離的設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件工程， 2020， 23（4）： 22-24.

[3] 韓改寧， 李永鋒， 高伊騰. 基于嵌入式Qt下的MySQL數(shù)據(jù)庫設(shè)計(jì)與開發(fā)[J]. 微型電腦應(yīng)用， 2020， 36（5）： 25-27.

[4] 李勝. 基于JavaScript的面向?qū)ο笳Z言特性及其程序設(shè)計(jì)[J]. 科技與創(chuàng)新， 2019（6）： 112-113， 116.

[5] 朱二華. 基于Vue.js的Web前端應(yīng)用研究[J]. 科技與創(chuàng)新， 2017（20）： 119-121.

【通聯(lián)編輯：謝媛媛】