基于云开发的双端结合学习教育管理系统设计
2022-05-09李东升苏煜辉陈正铭陈君豪
李东升 苏煜辉 陈正铭 陈君豪
摘要：学习教育资源的管理和获取一直以来都是一个比较棘手的问题，存在难以获取、反馈不及时、操作不方便等弊端。基于微信小程序云开发、PC Web双端结合的学习教育管理系统，采用了Vue-admin-template框架与Hybrid混合开发技术、JSON数据库，提供了微信小程序学习答题、心得讨论共享、后台审核管理等功能，快速有效地解决了学习教育资源的利用问题。
关键词：学习教育;云开发;小程序;移动学习;serveless
中图分类号：TP311 文献标识码： A
文章编号：1009-3044（2022）07-0043-04
1 概述
随着微信用户与日俱增，微信小程序也借此机会逐渐走入人们的学习生活中，而基于serverless理念的云开发技术更是给小程序带来了更多的可能。面对计算机行业普遍存在的关于技术人员知识获取的问题，包括技术栈老化、知识零散、技术更新快、学习效率低等，针对这些痛点，以前端知识体系为例，采用基于云开发的双端结合方式构建出一个学习教育管理系统（Halo），探索学习教育资源的获取和管理问题[1]，让用户得以系统有效地汲取知识，与其他用户互相交流，以及存储学习进度、已发表信息等功能的私人空间。
1.1 传统学习教育管理系统存在的问题
1） 传统的学习教育管理系统更多的是采用App的形式，相比于小程序而言，为了兼顾多个机型等问题容易导致开发成本偏高。
2） 同时由于过分强调用户的留存和商业利益，偏离了原本学习教育的核心目的，容易让用户无所适从。
3） 传统App采用的前后端分离协作开发的模式沟通难度和成本都较大，同时也不利于相关工程化体系的搭建和适配。
4） 传统App难以有比较完善发达的生态，难以与背靠高日活量微信的小程序相提并论，后期的推广和发展会有比较大的限制。
1.2 基于云开发学习教育管理系统的优势
1） 首先因为是以小程序为载体，背靠微信庞大的生态，有利于借用微信现有成熟的技术拓充本系统的功能，如广场消息实时推送微信等，同时微信庞大的用户基数也为本系统的使用推广打下良好的基础，提高了用户的留存[2]。
2） 得益于云开发提供的各种云端能力，本系统不需要过分依赖后端的支持，减少因为涉及前后端改动的迭代造成的昂贵沟通成本，避免了实现兼顾前后端的工程化体系的困难，仅依靠前端常见的技术栈即可完成本系统的搭建。
3） 在当今注重效率和技术快速更新迭代的时代，云开发这种云端赋能的操作更是拓宽了开发者的能力边界，除了可以独自完成前后端的所有工作外，多端应用部署、运维等都可以高效的实现[3]，本系统也是基于云开发提供的控制台实现一个对数据实时监控、相关业务设计日志的输出、业务告警等后台监控，保障了系统的正常运行和异常的及时处理。
2 双端结合构成
由微信小程序端、PC Web端双端通过访问一个基于云开发的JSON数据库达到双端结合，由此可以降低两者的耦合度又保证了彼此的联系，具体如图1所示。
2.1 微信小程序端
本系统的微信小程序是基于云开发打造的，用户只需要扫描对应的小程序二维码或者点击通过小程序提供的分享功能即可打开享受服务。用户首次进入需要授权小程序，然后就可以解锁对应的收藏功能、反馈功能与查看历史记录功能。前往首页选择需要巩固的知识体系即可开始学习，相关知识点的答案可以自行打开与关闭[4]。如果用户有交流需求可以前往广场页与其他用户互动，支持搜索功能寻找感兴趣的话题。
2.2 PC Web端
本系统的管理人员需要电脑Web端进行登录，即可查看用户在小程序的行为，包括发言、反馈、评论等，针对违法违规的言论进行删除或处理用户提交的反馈。管理人员还被允许根据实际情况添加新的知识点。
2.3 双端结合的优势
由于系统是基于云开发的技术和思想，Web端则以微信SDK的方式来获取存储在云服务器中的内容，如此降低了后端逻辑的重复编写，只需要完成小程序端相关云函数的编写并抽离成相应的SDK给予Web端使用即可。
同时因为Web端数据的请求是以SDK的方式，有微信服务器的支持，保障了传输过程中的安全性和可靠性。
3 系统的构成与业务流程图
本系统由微信小程序端和PC Web端两部分组成，整个系统包括了两种参与人员：系统管理员和用户，图2是展示具体的业务流程设计。
4 核心设计技术
4.1 Serverless架构
Serverless是一种构建和管理基于微服务架构的完整流程，本系统采用了小程序提供的云开发技术，无须关心服务器部署、服务器容量等，只需要通过第三方API交互即可。通过运用这种架构可以大量地节省服务器费用，同时还可以提高开发者的开发效率。Serverless有两种常见的技术包括Faas[5]和Baas，本系统采用的是Faas也就是函数即服务，具体到实际的开发过程就是所谓的云函数和SDK。
4.2 Vue-element-admin框架
Vue是目前非常流行的渐进式框架，Element则是一套提供给开发者、设计师的桌面组件库。Vue-element-admin則是基于Vue和Element实现的后台前端解决方案，内置了i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，可以帮助开发者快速地搭建起一个企业级的中后台产品原型。
5 基于云开发的双端结合学习教育管理系统设计与实现
5.1 微信小程序端核心功能的设计与实现
微信小程序端比较重要的功能是对用户身份的确认和储存等鉴权操作，在用户打开小程序即可自动获取用户头像与姓名，同时微信小程序更多个性化的功能则需要用户授权，具体的授权方法如下：
authorization （） {
wx.getSetting（{
success： （res） => {
if （res.authSetting['scope.userInfo']） {
wx.getUserInfo（{
success： （res） => {
this.setData（{
userInfo： res.userInfo
}）
}}）
} else {
this.setData（{
showLogin： true
}）
}}}）
}，
用户的个人信息会记录到云端，下次打开无须授权。用户在广场发表话题后小程序会自动刷新当前话题列表，但是话题集合中存储的数据较多，每次云函数发起请求最多只能获得100条数据[6]，这可能导致用户只能获得部分的信息，所以这里使用了一个算法来突破这种限制。算法大体的思路就是利用异步函数的特点，在每次请求回来数据时并不马上返回而是存储到一个数组中再统一返回，而是否请求完所有数据即需要请求次数的判断则是根据数据库中记录的总条数去除以当前数据限制数，最终实现的具体突破算法如下：
app.router（'detail'，async（ctx，next）=>{
let blogId=event.blogId
let detail= await blogCollection.where（{_id：blogId}）.get（）.then（（res）=>{
return res.data
}）
const countResult=await blogCollection.count（）
const total=countResult.total
let commentList={
data：[]
}
if（total>0）{
const batchTimes=Math.ceil（total/MAX_LIMIT）
const tasks=[]
for（let i=0;i<batchTimes;i++）{
let promise=db.collection（'blog-comment'）
.skip（i*MAX_LIMIT）
.limit（MAX_LIMIT）
.where（{
blogId
}）
.orderBy（'createTime'，'desc'）.get（）
tasks.push（promise）
}
if（tasks.length>0）{
commentList=（await Promise.all（tasks））.reduce（（acc，cur）=>{
return{
data：acc.data.concat（cur.data）
}}）
}
ctx.body={
commentList，
detail
}}}）
5.2 PC Web端核心功能的设计与实现
PC端实现的功能比较复杂，主要包含了试题管理、发布管理、反馈管理、试题添加4个模块。
其中比较值得注意的是在node.js调用小程序云函数时需要的access_token，access_token是从微信平台获取然后保存到本地一个文件中，最多只能保存两个小时，为了确保其一直有效，需要定时不断去获取，但是考虑到服务器[7]突然中断连接则定时器可能失效，导致access_token过期，所以需要重新处理读取access_token的函数，getAccessToken函数如下：
const getAccessToken = async （） => {
try {
const readRes = fs.readFileSync（fileName， 'utf8'）
const readObj = JSON.parse（readRes）
const createTime = new Date（readObj.createTime）.getTime（）
const nowTime = new Date（）.getTime（）
if （（nowTime - createTime） / 1000 / 60 / 60 >= 2） {
await updateAccessToken（）
await getAccessToken（）
}
return readObj.access_token
} catch （error） {
await updateAccessToken（）
await getAccessToken（）
}}
最后，考慮到模块化组件化的思想，为了降低程序文件间的耦合，封装了两个相应的函数，一个是读取小程序云端数据库：
const getAccessToken = require（'./getAccessToken.js'）
const rp = require（'request-promise'）
const callCloudDB = async（ctx， fnName， query = {}） => {
const ACCESS_TOKEN = await getAccessToken（）
const options = {
method： 'POST'，
uri： `https：//api.weixin.qq.com/tcb/${fnName}？access_token=${ACCESS_TOKEN}`，
body： {
query，
env： ctx.state.env，
}，
json： true // Automatically stringifies the body to JSON
}
return await rp（options）
.then（（res） => {
return res
}）
.catch（function （err） {
console.log（err）;
}）
}
module.exports = callCloudDB
另一個是读取小程序云端的云函数：
const getAccessToken = require（'./getAccessToken.js'）
const rp = require（'request-promise'）
const callCloudFn = async （ctx， fnName， params） => {
const ACCESS_TOKEN = await getAccessToken（）
const options = {
method： 'POST'，
uri： `https：//api.weixin.qq.com/tcb/invokecloudfunction？access_token=${ACCESS_TOKEN}&env=${ctx.state.env}&name=${fnName}`，
body： {
...params
}，
json： true // Automatically stringifies the body to JSON
}
return await rp（options）
.then（（res） => {
return res
}）
.catch（function （err） {
}）
}
module.exports = callCloudFn
5.3 实现效果展示
微信小程序端如图3所示。
后台前端管理系统如图4所示。
6 结束语
系统通过结合微信小程序端和PC Web端，两者由云服务器的JSON数据库提供支持，可以实现管理人员便捷的管理和用户随时随地的使用。这种方式既可以降低系统的耦合度，又可以解决当前技术知识难以获取和学习的困境，为以后社会教育事业的发展提供了一种思路[8]。当然，目前的探索还存在一些诸如知识体系收集不够完善、用户交流形式相对单一等问题，本系统也将针对这些问题做进一步的完善。
参考文献：
[1] 刘红卫.微信小程序应用探析[J].无线互联科技，2016（23）：11-12，40.
[2] 乐万德，程传旭.基于云开发的C语言客观题练习小程序[J].信息技术与信息化，2021（7）：207-209.
[3] 黎雪，王芳.基于亚马逊云的云开发课程设计[J].计算机与网络，2021，47（13）：42-43.
[4] 朱玉强.微信小程序在图书馆移动服务中的应用实践——以排架游戏为例[J].图书馆论坛，2017，37（7）：132-138.
[5] 李铭轩，常培，崔童，等.面向FaaS的算网异构资源调度技术[J].信息通信技术，2021，15（4）：44-49，58.
[6] 王天泥.当图书馆遇上微信小程序[J].图书与情报，2016（6）：83-86.
[7] 张锐.确保无服务器架构安全的“法门”[J].网络安全和信息化，2021（4）：109-111.
[8] 刘玉佳.微信“小程序”开发的系统实现及前景分析[J].信息通信，2017，30（1）：260-261.
【通联编辑：梁书】
收稿日期：2021-09-28
基金项目：广东省“攀登计划”专项资金（pdjh2021b0452）
作者简介：李东升，男，广东潮州人，主要研究方向为前端开发、机器学习;苏煜辉，男，广东潮州人，主要研究方向为网站开发、PHP开发;陈正铭，信息系统项目管理师（高级），硕士;陈君豪，男，通信作者，农艺师，经济师，硕士。
