基于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.