梁天成 刘博文 朱立锴

摘要：目前，随着人类生活质量的提升，学生的活动意识也逐渐强化，特别是在新冠肺炎疫情背景下，体育运动成了在校大学生课余生活的重要组成部分，但部分体育用品价格昂贵，开发相应的体育用品租借系统就显得尤为重要。文章利用Web系统的前后端框架技术，开发一款校园体育用品租借App平台，对学生闲置的体育用品进行线上整合，通过线上或线下两种方式完成租借活动，平台上的闲置体育用品同样可以进行二手出售，用户可根据需要选择，为当代大学生提供一个更加适应当下活动模式的可靠服务平台，使学生闲置的体育用品在另一部分有需求的学生身上发挥价值，营造一个更加积极的校园运动环境。

关键词：Web；体育用品；租借；App；前后端分离

中图分类号：TP311.1文献标志码：A

0 引言

随着生活水平的日益提升，人们越来越注重体育锻炼，但有部分体育活动对体育器材的依赖性较大且对学生群体而言成本较高，很多学生也因此止步。在传统模式下，体育用品一般采用直接售卖的模式，无论是全新的还是二手的，这对于只想尝试尚未确定是否要持续开展此项体育活动的人群而言不太友好。校园体育用品租借App系统的开发正好可以解决这一系列问题，将双方的活动范围局限于校园中，平台也将对价格与质量进行把控，这样的活动模式不仅响应国家鼓励广大人民参与体育锻炼的号召，还可以对大学运动风气的建设起到推进作用，丰富疫情背景下学生的校园生活。

1 应用现状

传统的线下二手体育用品多为直接售卖，缺点是效率低、渠道窄，无法跟上移动互联网的热潮，且只能售卖、不可租赁，特别是二手用品，一旦售出不可退换，售后难以保障。本研究通过开发一款校园体育用品租借App，能较好地解决这些问题。相比于传统二手交易，其优势在于能够加快体育用品行业和移动互联网产业的融合，用户只须在应用程序上完成简易的操作，就可以做到体育用品的租借，无须购买，对于只想尝试一次或运动频率不高的人群而言性价比更高。设计的关键就在于如何在校园中实现闲置体育用品的有效处理、交易渠道与交易规模的完善、响应智能终端的快速发展。

2 Web发展新技术优点

随着信息技术的发展，互联网已经深入各行各业，产生了非常大的影响。计算机技术、网络技术和信息通信技术快速发展，高校要适应这样的环境，完全依靠PC端已经落伍了，必须积极地开发能够适应移动端的产品，才能更好地适应时代的发展。目前，众多开发企业不仅重视对Web开发技术的研究，不断提高自身的管理水平，也拥有较为成熟的Web开发技术能力，完善Web系统开发的流程［1］。

传统App开发方式能够访问手机的所有功能，比较快捷地使用移动设备端提供的接口，并支持大量的图形和动画，其缺点是针对Android和iOS两种系统均独立开发对应的App，无形地提高了开发成本。而运用Web技术延伸的Web App的本质是通过浏览器访问Web应用，配合移动端UI框架，使其适合显示在移动端设备，因此，Web App也可以运行在Android、iOS和PC上，但也有一些缺点，例如，对移动设备的硬件功能使用会有缺失，访问页面须重新加载内容，从而导致页面内容的渲染速度不及App系统开发，浏览速度也与手机终端性能和网络环境挂钩，容易被其影响。综合考虑两种设计App的优缺点，结合当前网络环境和当代学生对移动设备的依赖，基于Web相关技术开发的校园体育用品App系统更能够跟上时代的脚步，在现今移动设备应用普及的背景下，为全体学生提供一个更方便的体育活动环境，丰富学生的校园生活，选择Web App显然是一种更为明智的方案。

3 校园体育用品租借App的设计

3.1 校园体育用品租借App系统框架

目前，越来越多的企业通过Web技术完成一系列产品的开发。虽然传统的Web开发仍有许多让人诟病的情况，例如画面表现力差、浏览数据丢失等情况。但在互联网技术高速发展的现在，应用SpringBoot+Vue前后端分离技术搭建前后两端可以解决诸多问题。App使用Element.UI作为UI层关键技术，所以App在技术上可以与现在主流的地图导航App（如高德地图、腾讯地图等）更好地结合，并实现体育用品租借地点的智能导航。在数据库的永久数据选择中使用MySQL数据库，具有体积小、速度快、总体成本低、开放源代码等优点，因此得到了较为广泛的应用。

系统设计总框架如图1所示。

3.2 系统表现层的相关设计

该系统在表现层的设计上对App移动端和PC端采取不同设计。

App移动端上将使用Element.UI作为关键技术搭建平台，Element.UI作为一套基于Web系统的组件库，拥有非常多的优点。站在开发者的角度，组建指令的设计与正常生活的流程、逻辑保持一致；站在用户的角度，简化的流程与清晰的步骤可以让用户得到更好的使用体验［3-4］。在将Element.UI作为交UI层的基础上使用Vue作为交互层的情况下，可以通过自定义的Vue指令实现对平台数据的快速搜索，尤其是结合大数据的关键词搜索能力，可以做到对庞大信息的筛选以解决网页的卡顿现象。相信这不仅会提升用户体验，也将优化管理系统对Web系统后台数据的整理。Vue是一个渐进式轻量级框架，在Vue生态系统的库与第三方库的整合下，可以驱动更复杂的Web页面［5］。

PC端使用Bootstrap前端開发框架。这种开发框架优点也同样良多，例如，代码编写较为简单、开发人员更容易上手、可以降低管理员学习成本、缩短系统开发周期等。基于Bootstrap框架设计的页面具有强悍的页面适应能力，可以轻易地适应不同设备的不同页面大小，在页面布局上可以更好地规划内容。Bootstrap技术的高速发展使之拥有更多、更强大的内置Web组件，可以更好地完成页面的导航、进条度、缩略图等，使用基于Bootstrap框架设计的页面可以使展示的内容获得更加丰富的表现形式。

3.3 API接口的相关设计

应用业务层主要以SpringBoot为框架技术并搭建系统的API接口。API接口作为系统总设计的架构核心点，在平台的正常运行上起着至关重要的作用。用户在进行网页的相关操作时，运行Web服务器对用户的操作数据进行处理，再通过Web服务器返还数据经处理后得到的结果［6-7］。

3.4 App功能流程

随着互联网技术的运用更加成熟与可靠，现在对一款应用程序的设计也更加方便与简洁。在产品的使用上，用户以账号登录后就可以进入程序，然后录入自己对体育用品的租借类型、时间、地点等需求，后台数据再对已经存入库中的体育用品数据进行筛选，选择出较为合适租借的几款对象，供用户选择。功能使用流程总框架如图2所示。

3.5 校园体育用品App的社会效益

该设计目的主要是促进校园运动风气的建设，为学生创造一个更方便与快捷的运动环境。相信这样庞大的学生群体可以产生足够的吸引力，吸引很多运动品牌加入校园风气的建设，无论器具还是活动教学，都可以更加完善，实现互惠共利。

4 结语

校园体育用品租借App是基于SpringBoot+Vue前后端分离技术搭建的系统平台，无论是在移动端还是电脑端上，都可以稳定地运行并保证用户的使用体验，再结合Element.UI，Bootstra，Vue，SpringBoot等丰富的组件或插件内容，该平台获得了不俗的活动内容展示能力。该App设计的线上交易活动模式也可以将体育用品租借这一社会刚需活动控制得更加合理。

参考文献

［1］陈徐毅.移动互联时代Web与APP的技术应用之争［J］.中关村，2022（7）：46-47.

［2］郑煜荣.基于软件工程的Web开发技术［J］.中国新通信，2021（11）：65-66.

［3］马雪山，张辉军，陈辉，等.前后端分离的Web平台技术研究与实现［J］.电子技术与软件工程，2022（8）：70-73.

［4］綦慧，徐晓慧.基于Web系统的大数据搜索技术的实现和优化［J］.计算技术与自动化，2021（2）：17-19.

［5］黄旭日，胡伟平.“智游小盒”旅游APP的设计与分析［J］.无线互联科技，2021（21）：60-61.

［6］张晶晶，曹双双，杨怡洁，等.基于Bootstrap框架的响应式网站设计［J］.电脑知識与技术，2020（34）：247-248.

［7］杨晖.高校计算机网络平台设计与应用策略研究［J］.信息与电脑（理论版），2018（6）：16-17.

（编辑 （王雪芬）