基于B/S的學習交流平臺的設計與實現

曾浩 黃浩文 張利強 賀斯慧

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

【關鍵詞】學習平臺;B/S;NodeJs;Vue

【中圖分類號】TP311.52 【文獻標識碼】A 【文章編號】1674-0688（2020）10-0049-03

0 引言

隨著網絡技術的迅速發展，特別是4G及5G技術的快速應用發展，智能終端已經成為人們學習生活的新平臺。各類在線學習及圈子類應用如雨后春筍般發展，但現階段的應用都只注重某一個方面，還沒有一個能夠兼顧學習和生活類的應用平臺。

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

該平臺是一個文章、動態、小書為主導，結合了豐富的話題、大量用戶可參與的標簽，以及交流性、互動性的環境，加上完善的后臺管控的學習交流平臺，它可以在能夠使用瀏覽器的設備上運行，是一款學習社區和線上交流平臺。

1 系統開發模式與技術

1.1 采用的開發模式

系統整體架構為B/S，依賴于瀏覽器和服務器端的一種架構模式，實際生活應用中已有相當多的系統采用B/S架構，且該模式已經相對成熟。用戶只需要在一臺聯網的計算機上使用瀏覽器訪問系統地址即可使用本系統，其主要事務邏輯處理是在服務器端實現，不受瀏覽器影響。

1.2 涉及技術

1.2.1 NodeJs

Node.js是一個基于Chrome V8引擎的JavaScript運行環境。Node.js使用一個事件驅動、非阻塞式I/O的模型，它不受客戶端（瀏覽器）的限制，使其JS擁有同后端一樣對文件、網絡、操作系統進程等操作權限，與java、python等程序設計語言的功能區別不大。

1.2.2 React

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

1.2.3 Vue

Vue是一套用于構建用戶界面的漸進式框架。Vue被設計為可以自底向上逐層應用。通過Vue.js構建一個數據驅動的web框架，里面含有多種實現數據響應和組合的視圖組件供開發者使用，其中涵蓋種類繁多的組件庫供開發者選擇。

1.2.4 webpack

webpack是一個現代JavaScript應用程序的靜態模塊打包器（module bundler）。當webpack處理應用程序時，它會遞歸地構建一個依賴關系圖（dependency graph），其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個bundle。

1.2.5 GraphQL

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

1.2.6 koa

Koa是基于Node.js平臺的一個Web開發框架，也是一個全新的Web框架，由Express原班人馬打造，致力于成為Web應用和API開發領域中更小且更加富有表現力、更強大的基石。通過async函數，Koa可以丟棄回調函數，并有力地增強錯誤處理。Koa并沒有綁定任何中間件，而是提供了一套優雅的方法幫助快速編寫服務器端應用程序。

2 系統設計

2.1 功能模塊設計

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

2.2 數據庫設計

經過對系統進行數據流程梳理分析之后，按照數據庫3NF規范流程，設計并建立了系統的數據庫結構，定義了管理員權限表admin_authority、管理員角色表admin_role、管理員用戶表anmin_user、文章表article、文章標簽article_tag、用戶角色user_role、動態評論dynamic_comment等27張表，每張表都嚴格按照ER實體一一對應，表字段類型等約束都由實體與實體之間的約束確定。

3 系統主要模塊實現

3.1 首頁管理

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

3.2 片刻動態

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

3.3 權限管理

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

4 結語

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

參 考 文 獻

[1]桑一梅，韓霞.基于RBAC模式的人力資源管理系統的開發[J].科技創新與應用，2019（29）：90-91.

[2]姚佳花，彭楚瑤.基于Node.js的教育技術學資源網站的設計與開發[J].無線互聯科技，2019（9）：74-77.

[3]王伊，王韶紅，劉晉澤，等.Vue.js與Django組合框架的網絡社交系統單頁面架構方案設計[J].信息技術與信息化，2020（1）：121-123.

[4]陳陸揚.Vue.js前端開發：快速入門與專業應用[M].北京：人民郵電出版社，2017.

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