基于云開發的雙端結合學習教育管理系統設計

李東升　蘇煜輝　陳正銘　陳君豪

摘要：學習教育資源的管理和獲取一直以來都是一個比較棘手的問題，存在難以獲取、反饋不及時、操作不方便等弊端。基于微信小程序云開發、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開發;陳正銘，信息系統項目管理師（高級），碩士;陳君豪，男，通信作者，農藝師，經濟師，碩士。