基于微信小程序的冰雪运动社区系统的设计与实现

甄同妙，陈依鸣，崔少飞，闫炜鑫，段洪英，宋晨赫，张永琦，侯树杰，李 琛*

（1.河北建筑工程学院，河北 张家口；2.张家口市人防（民防）指挥信息保障中心，河北 张家口）

引言

2021 年1 月20 日，总书记作出“要积极谋划冬奥场馆赛后利用，将举办重大赛事同服务全民健身结合起来，加快建设京张体育文化旅游带”的重要指示。2022年2 月，文化和旅游部、国家发展改革委、国家体育总局联合印发了《京张体育文化旅游带建设规划》[1]，同年4月和5 月，河北省委、省政府分别印发了《关于加快推进后奥运经济发展的意见》《京张体育文化旅游带（张家口）建设规划》[2]，从国家、省市层面明晰了京张体育文化旅游带的建设目标、发展定位、空间布局和建设重点。

1 研究现状及意义

京张体育文化旅游带建设作为后冬奥时代的重要举措，有利于实现“带动3 亿人参与冰雪运动”的目标，扩大“京张”两座城市对外影响力、塑造形象，助推“京张”文体旅游带产业结构调整。这一课题引起了广泛关注与热烈讨论[3-6]，社会各界展开了科技助力京张体育文化旅游带发展的探索之路。本文以移动互联网和京张体育文化旅游带建设的融合技术研究为切入点、结合“互联网+”思维，设计并实现了一个以当前热门的短视频为载体的分享与交流平台，旨在为“科技赋值京张体育文化旅游带建设”添砖加瓦，深入推进京津冀协同发展、助推张家口市经济转型发展。

2 冰雪运动社区系统的总体设计

冰雪运动社区系统分小程序端和管理端，整体设计如图1 所示。使用人群为小程序用户和后台管理员两类：小程序用户无需下载安装、使用手机便可随时随地访问小程序端；管理端采用B/S 结构，管理员只需用浏览器登录系统便可进行访问。

图1 冰雪运动社区功能结构

3 冰雪运动社区系统的详细设计

3.1 功能模块设计

小程序端主要进行首页、视频详情页和个人中心等页面设计。首页主要显示视频列表，点击列表中的任一视频可进入视频详情页浏览视频。视频详情页设计主要区域播放视频，视频若有评论及回复，则在视频播放区域的下方显示。个人中心页面设计时主要考虑用户头像、昵称、上传作品功能按钮、作品收藏点赞数、用户发布的作品等信息的合理布局，其中“用户上传作品”功能流程设计如图2 所示。

图2 用户上传视频流程

管理员使用管理端对用户、视频、背景音乐等进行管理。视频管理的重要模块为审核被用户举报的视频作品，流程设计如图3 所示。

图3 管理员审核被举报视频流程

3.2 数据库设计

首先对系统中所有涉及到的实体进行分析，明确各实体属性以及实体之间的联系；其次对各实体和联系均创建数据库表，表与表之间靠外键约束及触发器实现数据一致性和完整性。采用MySql 数据库、使用结构化查询语言SQL 创建各种数据库对象，如表1 所示的视频评论。

表1 comments

4 冰雪运动社区系统的实现

本系统采用SpringBoot 框架实现Java 后台，处理小程序端和管理端对数据库存储数据的访问；采用微信开发者工具和小程序设计语言实现小程序端，采用Vue 框架实现管理端。

4.1 小程序端关键模块的实现

4.1.1 首页

用户登录成功后跳转到小程序首页，在js 文件onLoad()函数中使用wx.request()携带“搜索框关键字内容”参数videosDesc 发出加载视频的访问请求；Java 后台videoController 的showAll () 方法对接收到的videosDesc 参数长度进行判断是否为0：若为0 则通过videoService 接口的getAllVideos () 函数联合查询videos 表和users_inform 表，返回视频状态为可见（未被举报、可访问） 的视频列表；若不为0 则通过videoService 接口的getSearchVideos () 函数联合查询videos 表和users_inform 表，返回视频状态为可见（未被举报、可访问） 且videos 表的video_desc 列与videosDesc 参数进行模糊匹配后的视频列表。小程序首页实现效果如图4 所示。

图4 小程序首页实现效果

4.1.2 视频详情页

用户点击首页视频列表中感兴趣的视频进入视频详情页时携带视频id 和userId，Java 后台userController 的query()方法根据视频id 查询视频表videos 返回视频发布者头像和昵称等信息、根据视频id 和当前登录的userId 查询user_like_videos 表和user_collect_videos 表返回当前登录用户与当前视频的点赞收藏关系，小程序端解析Java 后台返回的以上信 息 后 进 行 关 联 显 示 ；userController 的getAllComments()方法根据视频id 对评论表comments和用户表users_inform 联表查询评论人、评论内容、回复人、回复内容等，按时间先后顺序显示在评论区。

用户点击更多图标，使用wx.showActionSheet()在视频详情页底部弹出举报视频、删除视频等功能栏，如图5(c)所示。其中标出的“删除视频”功能只有用户浏览自己上传的作品时才能显示并使用。若用户发现视频内容引起不适可点击“举报视频”，wx.request()方法将举报理由及描述等信息提交给Java 后台，userService 接口的reportUser()方法将视频id、举报用户id 及相关举报信息存储到数据库users_report 表中，同时将视频表videos 中相关视频的状态置为0(不可见)，即被举报的视频不能被用户浏览。

图5 视频详情页实现效果

4.1.3 个人中心

用户在小程序首页底端点击“我的”，进入个人中心页面（见图6）。个人中心展示了用户头像、昵称、关注数（用户关注的作者数）和粉丝数（关注用户的作者数）及作品获赞和收藏数等，分栏显示用户发布的作品、用户赞过的作品、用户收藏的作品，实现了用户更换头像、上传作品、切换账号等功能。

图6 个人中心页面

4.2 管理端关键模块的实现

管理员登录后审核被举报视频的实现方法：在管理员查看被举报的视频后，若视频有问题、举报问题属实，则审核不通过、数据库videos 表可见状态列status 值继续保持为0，即视频对小程序用户不可见；若举报问题不实、视频无问题，则审核通过、Vue 用axios 发 送post 请 求、Java 后 台videoService 接 口 的updateVideoStatus()按视频id 更新数据库videos 表相关视频的status 值为1，即该视频对小程序端用户可见、可出现在首页视频列表中被用户浏览观看。

结束语

本文以移动互联网和京张体育文化旅游带建设的融合技术研究为切入点、结合“互联网+”思维，设计并实现了冰雪运动社区系统，用户可发布与浏览短视频、点赞与收藏短视频，在评论区交流探讨冰雪运动技巧等。本系统利用了微信小程序的便捷和跨平台特性持续推进“全民上冰雪”惠民工程，向大众普及冰雪运动、提高民众参与率、提升民众参与深度，推动张家口市经济转型发展、推进京津冀协同发展。