结合微信小程序与JavaWeb框架的前后端分离平台的设计与实现——以KEBO运动平台为例

赵圆圆，陈润辉

（湛江科技学院，广东 湛江 524000）

0 引言

随着科技的进步以及网络的遍及，信息的传播方式和速度发生了巨大的改变，这种改变有效提高了学习工作的效率，使得人们的生活节奏越来越快，再加上高密度的学习和高压力的工作，使得大部分的社会人群对身体健康状况普遍关注[1]。本项目提供了一个一起打卡运动的平台，并且可以针对用户的要求，提供合理的健身计划，让喜欢运动健身的人在平台上分享自己的健身成果和健身教程，从而激励更多的人加入进来，让运动爱好者可以聚在一起形成运动圈，在增强体质的同时扩大交友圈子，增加运动乐趣。微信小程序是一种不需要下载，也不需要安装就可以直接使用的应用，可为用户节省内存空间，具有方便快捷、安全稳定等优点。健身微信小程序从用户的角度去设计开发，为喜欢运动的用户提供更多的便利。

1 架构及技术选型的背景

微信小程序作为移动端的应用，其与后台服务器进行数据交换的最简单高效的方式无疑是前后端分离。前后端分离目前已经成为互联网项目开发的业界标准使用方式[2]。其核心思想是前端使用超文本标记语言（HTML）编写的页面通过异步传输的框架调用后端RESTFUL风格的API接口，且利用JSON进行数据交互。

通过微信小程序作为用户交互界面，接受用户的操作，利用小程序封装完成网络请求API访问服务端的地址，从而发起请求，服务端响应请求并且操作数据库。将获取的数据以JSON格式返回小程序，小程序渲染数据并展示在用户交互界面中，实现前后端分离用户交互流程。

2 前后端分离架构的设计

使用微信开放平台提供的微信小程序开发环境进行前端开发的设计，数据库管理使用MySQL，服务端使用基于SpringBoot的后台管理和小程序进行数据交互管理的接口。

SpringBoot是基于主流Web框架Spring而整合形成的全新框架，可以很便利地设计出符合前后端分离架构要求的RESTFUL接口，提高了系统整体的可行性和可靠性。

2.1 服务端的具体架构

采用Mybatis框架来构建服务端的持久化层，有效防止SQL注入安全问题的发生。

在系统安全以及授权验证方面，采用Apache基金会旗下的Shiro框架。Shiro框架提供了很多易于使用的API接口，让开发者以更简单的方式在自己的项目中部署身份验证、授权、密码和会话管理的版块。

用户发起请求时，请求会经过Shiro中的SecurityManager组件进行身份验证，再通过Relams组件进行授权。授权和验证的过程中，通过持久层框架MyBatis查询用户的身份权限信息，再对访问用户进行授权，并且保留用户的session和登录态。获取权限后，Shiro框架会比对接口访问所需权限和用户获得的权限，一致方可访问，如图1所示。

图1 数据持久化

2.2 前端具体架构

微信小程序主要用到JS，WXML，WXSS，JSON进行页面的外观设计和功能实现，每个页面都会有对应上述4个文件。在JS文件中，主要通过调用wx.request()接口进行网络请求。

3 项目功能设计

通过独特的互联网社交生态，让用户主动重视身体健康的重要性[3]。项目主要分为健康知识分享、运动打卡、校圈服务和社交4大模块。健康知识分享模块为提供一个用户发表自己的健康见解、运动技巧，获取健康知识、运动知识的平台。运动打卡模块给用户提供运动结束后打卡和分享本次运动的经历，从而让用户坚持运动有动力。校圈服务模块主要针对各大高校师生，提供在健康方面的校园服务。社交模块为用户提供一个以运动交友的平台，其中还包括运动打卡相互竞争等鼓励刺激用户积极运动的功能。

4 项目的实现

4.1 首页

健身用户打开小程序就能看到为其推送的健身方面的各种最新资讯，同时系统将最新的活动通过轮播图展现给用户，使资讯更具多样化。对于一些健身的入门者，健身需要循序渐进，所以提供了在线播放视频的功能，方便初学者模仿并慢慢掌握要领。而对于那些已经健身多年、颇有经验的用户来说，也可以通过视频学习新运动，学习之前没掌握的要领。健身专家也可以通过发布视频来分享自己的健身心得，提升用户的健身兴趣。

4.2 社交

社交模块设有运动打卡功能，促使健身用户每天都能坚持在平台上打卡，变得更加自律。于此同时，用户之间也可以采取互相竞争的形式，看哪一个先漏打卡，则哪个就失败，竞争获胜的用户可以获取平台奖励的积分。项目主要基于校内，所以同时也设置了校圈分享的模块，用户可以在这个模块里分享自己的健身心得、发布自己的二手闲置、互相鼓励同校且喜欢运动的人群。

4.3 我的

用户进行登录注册后，完善自己的个人资料，并可以查看到自己的粉丝、所关注的博主，以及收藏的健身知识。首页、社交和关注页面如图2所示。

图2 小程序实现

5 结语

项目开发的过程采用了瀑布模型开发流程，思路清晰、目标明确、分工合理、可行性强。通过本应用，各阶段的用户都可以进行合理的健身，健身用户之间可以互动、运动打卡、分享观看健身视频、健身知识、校圈分享等，为健身用户提供更多的便利。