左匡天 張振虎

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

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

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

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

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

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

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

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

1）學生用戶

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

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

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

參與活動：在活動列表中下載由管理員上傳的活動報名表，參加活動需填寫報名表并在活動列表進行上傳處理;

訂單查詢：學生在下單后生成訂單，在個人信息管理中對訂單進行刪除及退訂處理，退訂時需扣除支付金額的10%作為違約費用;

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

2）管理員

用戶管理：管理員可以對學生用戶進行管理;

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

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

4 預約管理

4.1 教練預約

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

4.2 預約管理

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

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

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

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

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

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

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

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

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

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

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

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

3）體積小，安裝方便，易于維護;

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

5.4 JavaScript技術(shù)

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

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

5.5 Vue前端框架和Spring Boot框架

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

1）官方文檔清晰;

2）可以同步進行DOM更新;

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

4）無須聲明依賴的可推導屬性。

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

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

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

3）提供準備好的特性及配置;

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

6 系統(tǒng)測試

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

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

6.2 測試內(nèi)容

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

7 結(jié)束語

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

參考文獻：

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

（上接第3頁）

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

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

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

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

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