基于B/S的學(xué)習(xí)交流平臺的設(shè)計(jì)與實(shí)現(xiàn)

曾浩 黃浩文 張利強(qiáng) 賀斯慧

【摘 要】隨著互聯(lián)網(wǎng)時(shí)代的來臨，各種智能終端得到廣泛的應(yīng)用，傳統(tǒng)的學(xué)習(xí)交流方式和筆記的分享迫切需要在線進(jìn)行。針對這種現(xiàn)象，文章提出一款基于B/S的學(xué)習(xí)交流平臺，它不僅能夠滿足學(xué)生對于社交的基本需求，而且讓學(xué)生在學(xué)習(xí)困難之時(shí)有了一個(gè)求助的平臺，并且使得學(xué)生能夠更加輕易地分享自己的筆記，強(qiáng)大的后臺管理系統(tǒng)使得整體可控及上線的可能性更高，系統(tǒng)采用了Node.js進(jìn)行開發(fā)，使得輕量的同時(shí)更能滿足用戶的需求。該平臺基本用戶功能分為文章、片刻、小書，后臺管理系統(tǒng)則可以對文章、動態(tài)、小書、用戶、話題等進(jìn)行管控設(shè)置。

【關(guān)鍵詞】學(xué)習(xí)平臺;B/S;NodeJs;Vue

【中圖分類號】TP311.52 【文獻(xiàn)標(biāo)識碼】A 【文章編號】1674-0688（2020）10-0049-03

0 引言

隨著網(wǎng)絡(luò)技術(shù)的迅速發(fā)展，特別是4G及5G技術(shù)的快速應(yīng)用發(fā)展，智能終端已經(jīng)成為人們學(xué)習(xí)生活的新平臺。各類在線學(xué)習(xí)及圈子類應(yīng)用如雨后春筍般發(fā)展，但現(xiàn)階段的應(yīng)用都只注重某一個(gè)方面，還沒有一個(gè)能夠兼顧學(xué)習(xí)和生活類的應(yīng)用平臺。

當(dāng)今社會，網(wǎng)絡(luò)技術(shù)的發(fā)展逐漸成熟化和普及化。從最初網(wǎng)絡(luò)技術(shù)應(yīng)用于生活中時(shí)，人們通過郵箱或者功能單一的C/S進(jìn)行交流，到如今生活中已有相對較成熟的C/S、B/S平臺供人們在世界各個(gè)角落只要有網(wǎng)絡(luò)的地方就能相互聯(lián)系交流。雖然各類系統(tǒng)在社會當(dāng)中運(yùn)用廣泛，但是各個(gè)系統(tǒng)的功能和內(nèi)容雜亂無序，不適用于學(xué)生。本文設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)線上大型學(xué)習(xí)交流平臺。該平臺功能易上手、交互性強(qiáng)，適用于學(xué)校學(xué)生之間、師生之間知識、生活交流，學(xué)習(xí)資料、筆記的分享及同學(xué)之間的互助。

該平臺是一個(gè)文章、動態(tài)、小書為主導(dǎo)，結(jié)合了豐富的話題、大量用戶可參與的標(biāo)簽，以及交流性、互動性的環(huán)境，加上完善的后臺管控的學(xué)習(xí)交流平臺，它可以在能夠使用瀏覽器的設(shè)備上運(yùn)行，是一款學(xué)習(xí)社區(qū)和線上交流平臺。

1 系統(tǒng)開發(fā)模式與技術(shù)

1.1 采用的開發(fā)模式

系統(tǒng)整體架構(gòu)為B/S，依賴于瀏覽器和服務(wù)器端的一種架構(gòu)模式，實(shí)際生活應(yīng)用中已有相當(dāng)多的系統(tǒng)采用B/S架構(gòu)，且該模式已經(jīng)相對成熟。用戶只需要在一臺聯(lián)網(wǎng)的計(jì)算機(jī)上使用瀏覽器訪問系統(tǒng)地址即可使用本系統(tǒng)，其主要事務(wù)邏輯處理是在服務(wù)器端實(shí)現(xiàn)，不受瀏覽器影響。

1.2 涉及技術(shù)

1.2.1 NodeJs

Node.js是一個(gè)基于Chrome V8引擎的JavaScript運(yùn)行環(huán)境。Node.js使用一個(gè)事件驅(qū)動、非阻塞式I/O的模型，它不受客戶端（瀏覽器）的限制，使其JS擁有同后端一樣對文件、網(wǎng)絡(luò)、操作系統(tǒng)進(jìn)程等操作權(quán)限，與java、python等程序設(shè)計(jì)語言的功能區(qū)別不大。

1.2.2 React

引用了Facebook的開源框架，可以方便靈活地設(shè)計(jì)用戶頁面，Reack就是把用戶界面中的對象抽象成一個(gè)個(gè)組件，開發(fā)時(shí)就將這些組件組合在一起形成一個(gè)功能豐富且可交互的頁面，它極大地簡化了開發(fā)成本，加大了代碼復(fù)用。

1.2.3 Vue

Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。Vue被設(shè)計(jì)為可以自底向上逐層應(yīng)用。通過Vue.js構(gòu)建一個(gè)數(shù)據(jù)驅(qū)動的web框架，里面含有多種實(shí)現(xiàn)數(shù)據(jù)響應(yīng)和組合的視圖組件供開發(fā)者使用，其中涵蓋種類繁多的組件庫供開發(fā)者選擇。

1.2.4 webpack

webpack是一個(gè)現(xiàn)代JavaScript應(yīng)用程序的靜態(tài)模塊打包器（module bundler）。當(dāng)webpack處理應(yīng)用程序時(shí)，它會遞歸地構(gòu)建一個(gè)依賴關(guān)系圖（dependency graph），其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè)bundle。

1.2.5 GraphQL

GraphQL是一種針對Graph（圖狀數(shù)據(jù)）進(jìn)行查詢特別有優(yōu)勢的Query Language（查詢語言），所以叫做 GraphQL。它跟SQL的關(guān)系是共用QL后綴，就好像「漢語」和「英語」共用后綴一樣，但它們本質(zhì)上是不同的語言。GraphQL跟用作存儲的NoSQL沒有必然聯(lián)系，雖然GraphQL背后的實(shí)際存儲可以選擇NoSQL類型的數(shù)據(jù)庫，但也可以用SQL類型的數(shù)據(jù)庫，或者任意其他存儲方式（例如文本文件、存內(nèi)存里等）。

1.2.6 koa

Koa是基于Node.js平臺的一個(gè)Web開發(fā)框架，也是一個(gè)全新的Web框架，由Express原班人馬打造，致力于成為Web應(yīng)用和API開發(fā)領(lǐng)域中更小且更加富有表現(xiàn)力、更強(qiáng)大的基石。通過async函數(shù)，Koa可以丟棄回調(diào)函數(shù)，并有力地增強(qiáng)錯(cuò)誤處理。Koa并沒有綁定任何中間件，而是提供了一套優(yōu)雅的方法幫助快速編寫服務(wù)器端應(yīng)用程序。

2 系統(tǒng)設(shè)計(jì)

2.1 功能模塊設(shè)計(jì)

遵循軟件開發(fā)設(shè)計(jì)原則，將系統(tǒng)按業(yè)務(wù)邏輯劃分為首頁管理、文章管理、片刻動態(tài)推送及管理、小書管理、站內(nèi)及時(shí)通訊、用戶管理、數(shù)據(jù)分析、權(quán)限管理、日志管理、系統(tǒng)維護(hù)等功能。首頁管理主要根據(jù)全站用戶熱度進(jìn)行初始化界面展示推薦，提供熱門文章、小書、動態(tài)等內(nèi)容供用戶瀏覽。片刻動態(tài)則為用戶提供標(biāo)簽動態(tài)管理，用戶除了可通過對應(yīng)標(biāo)簽發(fā)送動態(tài)、求助、互動等社交功能，還可使用學(xué)習(xí)互助、期末沖刺、樹洞等標(biāo)簽進(jìn)行學(xué)習(xí)規(guī)劃管理。小書管理的核心是知識分享，用戶可以通過小書功能分享學(xué)習(xí)生活中的各類經(jīng)驗(yàn)，并通過權(quán)限系統(tǒng)設(shè)置分享范圍和期限。為了保障數(shù)據(jù)的有效與安全性，系統(tǒng)設(shè)置了嚴(yán)格的權(quán)限等級，通過權(quán)限管理系統(tǒng)對數(shù)據(jù)的查看和修改操作進(jìn)行限定。數(shù)據(jù)分析功能則是通過對全站數(shù)據(jù)進(jìn)行統(tǒng)計(jì)分析，形成對應(yīng)的報(bào)表供用戶使用，同時(shí)根據(jù)熱度推薦算法為用戶提供優(yōu)質(zhì)的內(nèi)容。系統(tǒng)功能模塊設(shè)計(jì)如圖1所示。

2.2 數(shù)據(jù)庫設(shè)計(jì)

經(jīng)過對系統(tǒng)進(jìn)行數(shù)據(jù)流程梳理分析之后，按照數(shù)據(jù)庫3NF規(guī)范流程，設(shè)計(jì)并建立了系統(tǒng)的數(shù)據(jù)庫結(jié)構(gòu)，定義了管理員權(quán)限表admin_authority、管理員角色表admin_role、管理員用戶表anmin_user、文章表article、文章標(biāo)簽article_tag、用戶角色user_role、動態(tài)評論dynamic_comment等27張表，每張表都嚴(yán)格按照ER實(shí)體一一對應(yīng)，表字段類型等約束都由實(shí)體與實(shí)體之間的約束確定。

3 系統(tǒng)主要模塊實(shí)現(xiàn)

3.1 首頁管理

首頁是用戶進(jìn)入平臺看到的第一個(gè)頁面，是對整體功能的引導(dǎo)，在這里可以看到熱門的文章、動態(tài)、小書及各個(gè)功能塊的跳轉(zhuǎn)。用戶通過瀏覽器向服務(wù)器發(fā)送請求時(shí)，Struts適配器首先調(diào)用IndexAction類將請求轉(zhuǎn)發(fā)至RectAction，RectAction在初始化時(shí)調(diào)用Factory的getInstance方法，獲得數(shù)據(jù)訪問對象，分別執(zhí)行文章、小書、動態(tài)等對應(yīng)的SQL語句從數(shù)據(jù)庫中獲取最新最熱結(jié)果，并封裝成bean對象，最后將結(jié)果存入session對象，轉(zhuǎn)發(fā)給index.jsp，在index頁面中通過Vue進(jìn)行數(shù)據(jù)渲染，將數(shù)據(jù)動態(tài)展現(xiàn)給用戶（如圖2所示）。

3.2 片刻動態(tài)

片刻動態(tài)類似于微博和微信朋友圈的動態(tài)，主要包括創(chuàng)建動態(tài)、編輯動態(tài)、發(fā)布動態(tài)，設(shè)置可見性及及時(shí)評論互動。以動態(tài)創(chuàng)建為例，用戶通過表單填寫文本信息上傳圖片或音視頻并提交，通過js代碼對數(shù)據(jù)進(jìn)行基礎(chǔ)校驗(yàn)，當(dāng)校驗(yàn)通過后Vue調(diào)用Cachefetch（{ url，method，parameter，moreConfig = {} }）方法將數(shù)據(jù)存入緩存到url中并向服務(wù)器異步提交數(shù)據(jù)。服務(wù)器接收到數(shù)據(jù)后，將數(shù)據(jù)分類存儲到表中，并返回狀態(tài)碼給前端，前端根據(jù)狀態(tài)碼對新發(fā)布的片刻動態(tài)信息進(jìn)行展示（如圖3所示）。

3.3 權(quán)限管理

整體的用戶權(quán)限設(shè)計(jì)采用基于角色的訪問控制（Role-B-ased Access Control，RBAC），就是用戶通過角色與權(quán)限進(jìn)行關(guān)聯(lián)。簡單地說，一個(gè)用戶擁有若干角色，每一個(gè)角色擁有若干權(quán)限。這樣，就構(gòu)造成“用戶-角色-權(quán)限”的授權(quán)模型。在這種模型中，用戶與角色之間，角色與權(quán)限之間，一般是多對多的關(guān)系。當(dāng)用戶登錄時(shí)，首先從tokens對象中獲取存儲用戶權(quán)限級別的Admin Verify Token，然后在進(jìn)行數(shù)據(jù)訪問與操作時(shí)對權(quán)限級別進(jìn)行判定，從而實(shí)現(xiàn)權(quán)限與角色之間的多對多的映射（如圖4所示）。

4 結(jié)語

本文提出了一種基于B/S架構(gòu)的學(xué)習(xí)交流平臺，整體采用Node進(jìn)行開發(fā)，使用最新的技術(shù)流使得整個(gè)平臺運(yùn)行流暢輕便，拋棄了傳統(tǒng)的PHP、Java開發(fā)模式，Node的應(yīng)用使得開發(fā)的速度、效率得到較大的提升，也為后續(xù)的人員增加部署分布式系統(tǒng)帶來了更多的可能性。該平臺自開發(fā)完成后，運(yùn)行期間各項(xiàng)功能均正常使用，系統(tǒng)響應(yīng)速度快，無異常。

參 考 文 獻(xiàn)

[1]桑一梅，韓霞.基于RBAC模式的人力資源管理系統(tǒng)的開發(fā)[J].科技創(chuàng)新與應(yīng)用，2019（29）：90-91.

[2]姚佳花，彭楚瑤.基于Node.js的教育技術(shù)學(xué)資源網(wǎng)站的設(shè)計(jì)與開發(fā)[J].無線互聯(lián)科技，2019（9）：74-77.

[3]王伊，王韶紅，劉晉澤，等.Vue.js與Django組合框架的網(wǎng)絡(luò)社交系統(tǒng)單頁面架構(gòu)方案設(shè)計(jì)[J].信息技術(shù)與信息化，2020（1）：121-123.

[4]陳陸揚(yáng).Vue.js前端開發(fā)：快速入門與專業(yè)應(yīng)用[M].北京：人民郵電出版社，2017.

[5]（美）謝利·鮑爾斯.Node學(xué)習(xí)指南[M].第2版.北京：人民郵電出版社，2019.