基于小程序的校园服务平台的设计和实现

许潼歆 何晋乐 邱勋拥

（桂林信息科技学院 广西壮族自治区桂林市 541000）

1 引言

在当今的大学生求学之路上，学生的自主学习形式较之于跟随教师的课堂学习而言显得更为重要，特别是面对目前疫情防控，学生自主学习的时间越来越多。但在自主学习的过程中，用心求学的学子们总会不断产生新的疑问，而面对网上年代不一、层次不等、真假难辨的疑问解答并不能很好的满足学子们的学习需求，也不能很好的为学子们答疑解惑。而“学霸零距离”校园服务平台能在校园内为学生提供更好的知识共享交流服务，有利于培养和提升学生的自主学习能力。

2 现状

2.1 疫情影响下大学生现状

在疫情频发的今天，许多大学不得不选择网络上课的方式，但网络教学会造成部分学生的学习效率降低，外加授课老师无法如线下上课那般切实地感受到学生上课的状况，使得线上授课的效果参差不齐。学生间的探讨、交流也因天各一方变得不再频繁。学生在遇到学习上的问题时更是难以得到高效、迅速的解决。当然不止学生的学习受到影响，国内宏观经济更是受到严重冲击，许多企业面临亏损、倒闭的压力，因此用人单位只好选择裁员、降低员工福利。而这些变化造成就业竞争变得空前激烈，大学生找工作的时间成本和机会成本不断加大，就业观和就业规划也不断受到未来形式的不确定性影响。

2.2 智慧校园市场状况

智慧校园是高校应对“互联网+教育“挑战的一个必然选择，是数字校园建设的进一步深化与提升。外加疫情造成的影响，许多高校都纷纷想通过成立校园项目来研发具有校园特色的服务平台。同时也有越来越多的社会企业逐步意识到大学生群体正在逐渐成为未来消费的主力军，逐渐将自身业务延伸到校园当中。因此要想在这场挑战中脱颖而出，势必要紧紧抓住当前的时代背景和本校大学生群体的最大需求点来“对症下药”。

3 需求分析

如今，智慧校园早已成为当前校园信息化探讨的一个热点。为了将大学师生的切身需求和校园内的各种教育教学资源进行高效整合，因此我们将本次设计的小程序的重点放在：

（1）精心打造校园交流论坛，进一步加强师生，生生之间的讨论交流，使得彼此间的信息数据能够实时实地的进行交互传输与互动，这也将为大学生们带来更为便利的学习生活体验；

（2）推出预约系统，致力于为更多的有学习需求的大学生人群提供与校园内有时间精力并愿意提供帮助的学霸在线预约，以此来最大化的开发与利用校园内有效的教学资源；

（3）为更好的维护和管理小程序的信息内容，设计一个基于Web 的管理员系统方便管理员管理用户行为和小程序服务内容。

4 相关技术

4.1 微信小程序

用户客户端基于微信小程序开发有以下几点原因：

（1）无需下载，可随时随地使用,方便快捷。

（2）背靠10 亿微信用户，现如今年轻人几乎人人都有微信，因此使得我们的设计便于落地。

（3）小程序与APP 拥有相同的应用体验。

（4）接口众多，方便接入其他小程序以及拓展使用场景优势。

（5）存在许多优质的框架，稳定性高、开发周期短、维护成本低。

4.2 Vue框架

Vue 是一套构建用户界面的轻量级渐进式的JavaScript框架。基于MVVM 模式实现，视图，数据，结构分离，使数据的更改更为简单。最重要的便是其采用了虚拟DOM 技术——预先通过JavaScript 进行各种计算，把最终的DOM操作计算出来并加以优化，直到最后计算完毕后才真正将DOM 操作变化反映到DOM 树上，以此提高页面渲染的效率，减轻节点的操作从而提高性能。

4.3 SSM框架

SpringMVC+Spring+Mybatis(SSM)是一个成熟的、基于MVC 的框架。在java 编程语言当中，要用类当中的方法就需要创建类对象来调用。而基于IOC（控制反转）的思想以及DI（依赖注入）的技术，将Spring 作为一个容器，用于存放实体对象，这些对象在启动后即被创建，之后需要用到这些对象对应的类的方法时，就可以直接从容器当中取出，防止大量对象的创建和组件之间的强依赖，同时实现层与层之间的解耦，使业务逻辑更加清晰；而Mybatis 框架是一个半自动的ORM 持久层框架，内部封装了JDBC，减少了JDBC 沉余的代码，相比于Hibernate 更加容易上手，并能够与Spring 很好的集成。

4.4 MySQL和Redis数据库

MySQL 是常见的基于磁盘来持久化存储数据的关系型数据库，不受空间容量限制，性价比高，而其相对薄弱的点在于每次请求访问数据库时都存在I/O 操作，在反复链接数据库时耗费大量时间。而Redis 数据库则为一款缓存数据库，不仅仅支持简单的key-value 类型的数据，同时提供了list、set、zset、hash 等数据结构的存储；通过将数据存入内存当中，在后续数据读取时直接从内存当中读取，借此在拥有极高的I/O 性能的同时减少了访问数据库的次数。在对性能要求不一的板块中，结合两类数据库各自的优势，来达到不同的需求。

4.5 JWT技术

Json web token (JWT) 是基于token 的鉴权机制，由header (头部) 、payload (载荷) 、signature (签名) 组成。一般用于身份提供者和服务提供者间传递被认证的用户身份信息，便于从资源服务器上获取资源。相比带状态的session，如果要负载均衡还需保持稳定路由或者用统一的数据库管理所有的session。而反观JWT，对服务器而言是无状态的，几乎是零开销。所以凭借它开销小、易于应用扩展、可以在许多编程语言中使用、可以轻松跨域等特性，如今在分布式站点的单点登录（SSO）场景中被广泛使用。服务端对JWT 签发和验证整体流程如图 1 所示。

图1 ：JWT 整体流程

5 系统分析

5.1 开发架构设计

本系统采用小程序配合Vant Weapp 组件库构成客户端，并使用订阅消息将重要信息推送到微信消息界面；前端管理员界面采用Vue 框架配合ElementUI 组件以及Apache Echarts 组件，部署于高性能的HTTP 和反向代理Web 服务器nginx 中；后端采用成熟的SSM 框架及JWT 技术配合tomcat 搭建；腾讯云存储桶COS 存储用户头像、发布的图片和视频等；使用关系型数据库MySQL 和非关系型数据库redis 存储用户的结构化和非结构化数据。并将整体服务端部署于开源的应用容器引擎Docker 中，减少服务器性能开销。校园服务平台开发架构图如图 2 所示。

图2 ：校园服务平台开发架构设计图

5.2 数据架构设计

用户通过小程序界面进行操作，借助微信小程序的ajax数据请求wx.request 方法将用户的请求发送到服务器端，服务器端根据用户操作做出响应存储数据或请求数据库数据，最后根据需求将数据返回至前端用户界面；而后台管理员可通过Web 端管理员界面查看小程序一些基本信息，如服务端请求频次、总课程预约次数、总用户人数等，并可于对应界面对已有用户的数据进行审查、处理，以及对违反规定的用户的权限和身份进行限制等一系列操作。

5.3 功能划分

根据需求分析，将整体项目主要分为三大板块：学术分享交流板块、学霸资格申请与预约板块、小程序管理网站。校园服务平台系统总体功能结构图如图 3 所示。

图3 ：校园服务平台系统总体功能结构图

6 系统设计与实现

6.1 学术分享交流板块

在这一板块中，用户可以自主发表文章和图片、分享、点赞、评论，并提供分类跳转、内容搜索关键字高亮、浏览记录查询等功能。为使文章更生动、更具备学术交流和参考价值，在内容显示中适配了表格、echarts 图表、LaTex 数学公式、代码语法高亮和Markdown 语法等。可通过输入对应格式在文章详情中显示出对应样式。文章详情界面如图 4 所示。

图4 ：文章详情界面

6.2 学霸资格申请与预约板块

该板块主要是给用户提供一个渠道去预约校园内学霸，以及为愿意帮助他人的学霸提供申请学霸申请界面和受理他人预约的界面。在预约申请发出后，作为临时数据存储在非关系数据库redis 当中。待学霸同意预约申请后将数据存入MySQL 当中，并向预约人发送微信消息通知，此后在有效期内，预约人可在小程序对应界面中获取学霸的联系方式，以此与学霸进行交流。

6.3 小程序管理网站

该板块是提供小程序管理员查看微信小程序数据的可视化界面。使用JWT 进行管理员身份验证，减小数据量、加快传输速度。提供包括查看用户行为、管理用户身份、封禁用户权限、管理用户发布的信息内容、增删查改文章类别、查看小程序功能使用情况等在内的一系列接口。方便管理员发布公告，更新平台规则，查看、管理和维护小程序数据。同时设有意见反馈窗口，让管理员可以通过用户主动反馈的内容进行查看和回复。小程序信息管理界面如图 5 所示。

图5 ：小程序信息管理界面

7 结语

面对突如其来的疫情，“学霸零距离”微信小程序作为“互联网+教育”的实现，旨在贴合本校大学生切身学习需求，整合校园内的各种教育教学资源，以信息化手段和服务为校内学生提供一个优质的学习交流平台。“学霸零距离”校园服务平台作为一个基础框架将在后期不断迭代，引入大数据分析技术和算法，进一步整合校园服务资源，提供更智能的校园服务平台，助力大学生的自主学习。