基于B/S架構的校園“約球”平臺的設計與實現

左匡天 張振虎

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

關鍵詞：校園體育;球類運動;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 背景

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

2 系統開發環境的選擇

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

3 系統功能設計

系統的功能結構如圖1所示。

根據對用戶實際調查結果分析和系統分析，結合與本系統類似的線上平臺，學習國外先進的預約模式，本系統的功能設計分為以下幾個模塊。

1）學生用戶

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

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

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

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

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

意見反饋：用戶可以將系統使用過程出現的問題反饋至管理員，用戶間可相互交流。

2）管理員

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

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

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

4 預約管理

4.1 教練預約

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

4.2 預約管理

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

5 系統開發的關鍵技術

5.1 前后分離架構應用模式概述

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

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

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

5.2 數據庫設計

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

5.3 選擇MySQL數據庫

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

1）性能穩定，異常宕機狀況出現較少;

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

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

4）MySQL支持多種操作系統，提供多種API接口，支持多種開發語言。

5.4 JavaScript技術

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

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

5.5 Vue前端框架和Spring Boot框架

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

1）官方文檔清晰;

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

3）功能由不同的單個功能組件構成;

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

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

1）可以創建獨立的應用程序，創建可執行的JARS和WARS;

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

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

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

6 系統測試

6.1 系統測試方法

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

6.2 測試內容

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

7 結束語

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

參考文獻：

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

（上接第3頁）

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

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

[4] 李勝. 基于JavaScript的面向對象語言特性及其程序設計[J]. 科技與創新， 2019（6）： 112-113， 116.

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

【通聯編輯：謝媛媛】