基于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.

【通联编辑：谢媛媛】