1、基于BS架构的网络教学平台的设计与实现基于BS架构的网络教学平台的设计与实现 一个具有高可用性的，可拓展的系统必须有清晰的系统架构，模块与模块之间高内聚低耦合，系统高并发低延迟等等非功能需求考验着设计者的能力。 本项目采用B/S架构模式开发，应用了spring系列企业级框架开发来获得模块间的高内聚低耦合。前台使用了vue.js和element组件开发，后台使用spring系列框架整合MyBatis RabbitMQ ElasticSearch Eurek等软件进行开发 本系统主要由前台和后台模块组成。这里所指的前台是用户操作的部分，后台指的是教育提供者和管理员所操作的部分。其中，后台分为页面管
2、理和课程管理，课程管理面对的是教育提供者，页面管理面对的是系统管理员。 现在利用网络可以改善这种情况，利用网络来进行知识的传播，可以让广大的教育提供者在平台上大展身手，纷纷推出自主独特的教育方法，让学生自主选择自己最能接受的课程。而且，网络的体量也很大，即课程会更多，且可以循环播放，学生也可回头复习，所以这样高效的教育应运而生。 而在如今疫情的影响下，为了师生的身体健康，和学生的学习不落下，进行网络教学就显得十分重要了。 1.2国内外发展现状 这种教育方式具有开放性、共享性、永久性、便利性等特点，这样可以满足不同人群的需求，大大减低了教育的成本，在国内外都有这种发展趋势，并且在迅速地扩张中 1
3、.3系统可行性分析 1.3.1 技术可行性 本项目采用当前流行的前后端开发，前后端的项目是独立部署了，它们之间通过网络http协议进行通信，后端的实现叫微服务层。采用spring boot企业级框架加中间件进行开发，其中spring boot对中间件支持较好，例如rabbitmq、elasticsearch等，所以说开发难度小。 好处：针对不同用户提供不同的页面，例如对pc 用户可以提供一个页面，移动端用户也可以提供一个页面，但是微服务层就不是这样了，没有必要针对不同的用户提供不同的微服务，因为前端可以满足这个需求，它调用服务层就可以实现需求，这为系统的维护和业务的扩展有很大的好处 1.3.2
4、 经济可行性 通过调查研究，本项目的建设、运用成本都在可接受范围内，其中项目上线后带来的经济收益非常可观。项目的预算可以支撑整个项目的研发，其中，运行项目需要视频处理服务器，采用戴尔的一站式服务器处理方案，价格实惠。网站的运营需要监管和维护人员多名，与一般网站运营人员配置中无太大的区别 1.3.3 操作可行性 项目没有与国家政策相背离，没有会违反法律法规，符合社会的伦理道德，无侵权、无妨碍等责任问题，项目的运行方式在人员组织内可行，对如今的管理制度、人员的素质和操作方式的分析，得出的结果都显示可行 第二章 系统开发工具与相关技术 2.1 系统开发工具 2.1.1 IntellIj Idea 这
5、是一款功能强大，人性化的开发工具，且有很友好的代码提示功能 2.1.2 MongoD 这是一个非关系型数据库，且具有分布式文件存储的功能，在wen中采用它可以获得高性能的数据存储方案而且第三方对它的支持也很丰富 2.1.3 MySQL MySQL数据库是一款关系型数据库，它小巧且运行效率高 2.1.4 Maven管理工具 这是一款基于对象模型概念设计的软件管理工具，它的功能是方便用户导入jar包依赖，且IntellIj Idea对它集成很完善 2.2 系统后台技术 2.2.1 Spring Spring是一个轻量企业级的开发框架，它可以把bean对象和dao组件和service组件都给容器处理
6、。这样做的好处就是把大量复杂的代码变得非常的简洁，大大降低了代码的耦合度。在后期的维护、扩展和升级中可以非常轻松。其中，spring data对操作MongoDB数据库十分方便，而Spring Security Oauth2对系统的权限控制也十分优秀 2.2.2 MyBatis 这是一款持久层框架，它内部实现了JDBC的功能，可以使用配置或者XML文件来配置映射信息，讲数据模型和对象一一对应 2.2.3 RabbitMQ 它主要用于在分布式系统中进行消息转发 2.2.4 ElasticSearch 它可以对系统的内容进行索引化，然后支持用户实时搜索内容 2.3 前端开发技术 2.3.1 Vue
7、.js 这是一个js的渐进式框架 2.3.2 Nuxt.js 这也是一个js框架，主要用于来服务器进行渲染 2.3.3 Ajax技术 窗体顶端 Ajax是一个交互式网站开发技术,实现动态更新(局部)的内容 2.3.4 Jquery 这是一个功能丰富的js库 2.2.5 FreeMarker 这是一个模板引擎，主要用于做静态页面和页面展示 2.2.6 Eureka 这是一个服务注册中心，用于管理微服务的 第三章 系统分析 本章节将会结合前面所介绍的开发技术进行分析，从功能性需求与非功能性需求入手，并且进行详细的阐述，为今后的开发确立明确的目标 3.1系统功能分析 展望现在的教育模式真是多种多样，
8、例如腾讯课堂、网易云课堂的B2B2C模式，这个模式是为教育机构提供平台授课，也为个人开发权限进行授课。而中国大学MOOC则采用B2C模式，因为平台的严谨，它所提供的课程质量都比较优秀。本项目采用B2B2C模式，为企业和个人提供服务。 本系统主要由前台模块和后台管理组成。前台面对的是普通用户，即提供用户登录，搜索，学习，留言等功能。后台管理分为页面管理和课程管理，课程管理面对的是教育提供者，教育提供者可以在后台管理页面进行课程介绍页面的信息的增伤改插、课程目录的编写、上传视频、上下架课程四个模块。页面管理面对的是系统管理员，管理的是网站中的各个模块的创建修改和发布。其中，功能模块示意图见图3-1
9、所示。 图3-1系统功能模块示意图 3.2系统功能性需求分析 本小节从具体的功能模块入手，即从前台模块和后台模块两方面来进行详细的分析并且介绍其各点功能需求 3.2.1 前台用户功能需求分析 （1） 门户 门户即网站的主页，进入门户显示轮播图，课程推介等模块，用户不要登陆即可查看课程的详细信息，搜索课程，操作分类，游客点击查看视频或者登陆时跳转到登陆界面，并且在认证通过后才可以跳转到登陆前页面 （2） 登陆 点击登陆按钮并填写登陆信息，当认证不通过时，提示“账号或密码错误”，当账号不存在时，提示“账号不存在”。登陆成功后跳转到登陆前的页面 （3） 注册 点击注册按钮进入注册页面，注册信息有用户
10、名、年龄、性别、手机号码、邮箱信息等，其中邮箱和手机号码不允许重复，一个账号只能对应一个邮箱和手机号码。上面信息给必填信息，其余字段信息可适当地进行添加 （4） 收藏 当用户点击收藏按钮时，需要判断用户是否已经登陆了，已经登录则判断当前课程是否已经收藏，已经收藏则提示“已收藏，无须重复添加”，否则向数据库插入收藏信息，前台提示“已收藏”。 （5） 留言 在视频下方留言前需要判断用户是否登陆了，未登录则跳转登陆页面，否则提交用户留言 （6） 购买课程 购买课程前需要判断用户是否登陆了，未登录则跳转登陆页面，否则提示提示用户是否购买，确定购买后跳转视频播放页面 （7） 课程分类 门户下有课程分类的
11、信息，一共设置3个分类，一课程所属的类型，二年级分类，三按照行业分类。随意点击某个分类字段则跳转到相对应的分类列表 （8） 课程推荐 门户下有课程推荐的区域，这个推荐目前不做详细要求，可随机显示即可 （9） 课程搜索 搜索课程名称时显示课程信息，这个搜索可以是精确查询，也可以是模糊查询，这里要设置分页显示 （10） 课程播放 点击播放视频按钮跳转到播放页面，默认播放第一个视频 3.2.2 后台用户功能需求分析 (1) 页面管理 一个网站可以划分为很多个子站点，例如轮播图、分类导航栏、课程推介栏属于门户站点，课程播放属于课程站点，学习中心属于学习站点等等，所以需要一个管理这些页面的系统，方便后期
12、对这些页面进行增删改查 (2) 页面发布 通过事先增加好的页面，点击发布按钮，发送到远程服务器。整个添加、发布的过程都是由程序来自动执行，不需要管理员登陆服务器来完成操作。 (3) 页面预览 管理员通过页面预览可以预览页面最后部署到服务器的效果 (4) 课程管理 制作一个课程管理系统，前端定义好模板，用户在模板内填写课程信息后即为课程详情页面。这里要实现课程的增加、删除、修改、新增，这里需要分页显示。其中，课程的添加操作需要包含的内容有，课程的各种详细信息，例如课程的简介，教师的简介、建议、评语等等； 课程目录信息，课程设置3级目录，分别是课程名称/课程章节/课程小节这样的目录结构； 课程的图
13、片，必须为课程设置一张图，吸引学生点击； 课程的视频，这一步骤最关键，其中上传的视频必须按照目录结构逐一对于上传。 (5) 课程预览 为了保证课程发布后的准确无误，发布前必须进行课程预览，而课程预览所显示的页面必须和课程发布后的页面保持一致 (6) 课程发布 点击课程发布后，学生可以在前台页面看到课程信息并且进入课程页面学习 (7) 文件系统 本项目中，需要上传图片、视频、文档文件，为了提高系统的可重用性必须制作一个文件系统的统一管理这些文件，提供上传、删除、查询功能 (8) 视频处理 原始视频必须经过编码处理 第四章 系统设计 本章节依据系统需求分析进行详细设计，其中对某些功能点进行更加具体
14、的分析，做到完善和拓展。 4.1系统体系架构设计概述 UI层：这个系统是独立部署的，这里也是前后端分离开发的分水线，这里属于前端，这里主要实现的是用户界面，它没有实际是数据的，就好比一个模型，通过ajax请求微服务层来得到数据，这里用到的协议是http协议， 微服务层：这个系统也是独立部署的，这里属于后端。可以划分很多个小块，即把服务的颗粒度分得很细，服务于服务之间的交互很少。业务的可扩展性可维护性很好，例如双11到来了，我们可以把订单服务部署的服务器多一点，把用户管理部署的服务器少一点。 数据层：提供数据持久化操作 这种技术架构的好处是，UI层可以针对pc用户可以开发一个模块，针对H5用户开
15、发一个模块，即针对不同用户开发不同的界面。而在微服务层也可以划分多个模块，每个模块可以单独对外提供服务，且不需要为不同的用户开发不同的服务。这种架构和早期的单体式应用有很明显的优势（代码写到一个工程中，打包成war包部署到Tomcat中） 4.2系统数据库设计概述 4.2.1Monogdb数据库 edu_page 页面信息 字段名 是否主键 是否为空 字段说明 _id 是 否 Id siteId 否 否 站点id pageName 否 否 页面名称 pageAlise 否 否 页面别名 pageWebPath 否 否 页面相对路径 path 否 否 页面物理路径 time 否 否 5.3页面发
16、布 门户有多个站点，其中页面都有属于自己的站点，页面的发布应该部署到其所属的站点服务器上，例如要修改轮播图的图片，那么要改修改好的轮播图部署发到门户这个服务器上，而不去动学习中心这个服务器。 这里使用一个消息中间件（RabitMQ）来监听队列，每一个页面都有其所属站点的id 可以使用rabitmq的路由（routing）模式，监听每个站点的id,简而言之就是把站点的id作为routing Key。这样就可以实现页面只会发布到其所属的服务器上。 5.4课程管理 这个模块面对的是教育机构和老师，在这一统一管理自己的课程。这里实际用spring data Jpa，Mybatis来操作mysql数据库
17、。其中spring data Jpa用于表的基本增删改查，Mybatis用于复杂的多表连接查询，且使用druid来管理连接池（阿里巴巴提供的数据库连接池，它已经和spring整合到一起了）。这里可以细分为： 查询：这里涉及到多表关联查询，使用mybatis的Page helper分页插件，尅实现分页查询功能。具体是拦截sql语句，添加分页语句来实现分页查询 分类：课程必须选择分类信息，在门户的分类选择中需要显示对应类目的课程，所以要先建立分类查询接口，而接口的响应格式按照前端的要求来定义。 数据字典：课程中有很多信息，为了信息的易管理和维护，可以通过建立数字字典集合来实现。这样做的好处是，对业
18、务可以分类管理，并且解决硬编码的问题。例如，在添加课程选择分类信息时，如果采用固定的写法，那么后期需要更改这个信息就要修改页面。这样明显是不符合易维护的需求的。所以这里从数据字典来获取，如果以后要修改则修改数据字典即可，提高系统的维护性。这个数据字典在MongoDB中创建，详细信息见数据库设计 新增课程：点击新增按键，调用前端页面，填写信息，实现过程和页面管理实现的操作大同小异，这里不再进行。 修改课程：进入管理页面，编辑课程的基本信息，编辑课程图片，编辑信息，上传文件等，实现技术和页面管理模块相同 5.5课程计划 课程计划就是课程的目录，这里设置目录为三级，第一是课程名称，第二是课程的章节，
19、第三是课程的小章节，通过点击小章节来播放视频。讲课程目录设置成树型结构，由树根和树枝组成，详细的数据模型见数据库设置章节 sql设置：采用自连接的方式来进行查询，具体的sql语句如表5-5-1 SELECT a.id one_id, a.pname one_pname, b.id two_id, b.pname two_pname, c.id three_id, c.pname three_pname FROM teachplan a LEFT JOIN teachplan b ON a.id = b.parentid LEFT JOIN teachplan c ON b.id = c.par
20、entid WHERE a.parentid = 0 AND a.courseid = 课程id ORDER BY a.orderby, b.orderby, c.orderby 表5-5-1 Dao层：在Mybatis的配置文件中制作mapper映射文件，见表5-5-2 id property=“id“ column=“two_id“/ result property=“pname“ column=“two_name“/ id property=“id“ column=“three_id“/ result property=“pname“ column=“three_name“/ /resu
21、ltMap select id=“selectList“ resultMap=“teachplanMap“ parameterType=“java.lang.String“ SELECT a.id one_id, a.pname one_name, b.id two_id, b.pname two_name, c.id three_id, c.pname three_name FROM teachplan a LEFT JOIN teachplan b ON a.id = b.parentid LEFT JOIN teachplan c ON b.id = c.parentid WHERE a
22、.parentid = 0 if test=“_parameter!=null and _parameter!=“ and a.courseid=#courseId /if ORDER BY a.orderby, b.orderby, c.orderby /select 表5-5-2 然后编写service层定义课程计划，controller调用sercixek来实现查询功能，这里代码不再给出 新增：点击新增课程计划是，要求输入上一级结点，如果不输入上一级结点则代表当前添加的是根结点，当课程还没有任何结点时，此刻添加的结点就是根结点。 5.6 微服务管理 因为微服务的数量很多，在远程调用的时候
23、要知道服务端的ip地址和端口，这里可以spring cloud的服务注册中心来管理微服务。 其中，微服务需要实时上报自己当前的状态，然后又服务注册中心来统一管理，讲不可以的微服务清理出服务列表，客户端获取可用的服务进行调用 5.7微服务交互 服务与服务之间交互也可以注册中心进行，例如A服务先将自己注册到注册中心，B服务要远程调用A服务时，可以从注册中心拿到A服务的地址，后B远程调用A。本网站中课程发布前需要先预览课程，那么可以调用页面静态化程序来生成html文件 5.8 负载均衡 在微服务的系统架构中，必须使用负载均衡技术。可以通过软（LVS、Nginx等）硬（F5、Array等）件结合的方式
24、来实现。过程是用户首先请求到负载均衡服务上，然后负载均衡器。然后它会根据算法来把请求转发到微服务中。它拥有一份服务列表，然后根据算法把请求转发到最优的相应的微服务上。所以，负载均衡就是为集群服务器来分发请求的，降低系统的总体压力。其中，本项目使用的是客户端的负载均衡技术，中间无需经过负载均衡服务，单依靠算法就可以请求相关的服务中去。 5.9课程预览 课程预览就是课程最终的详细页面，这里采用生成静态html的方法。先定义课程预览页面数据模型接口，后又前端根据数据模型的要求定义课程模板，后把模板添加到MongoDB的模板集合中。最后点击课程预览按钮，后台调用课程预览接口，然后静态化技术被调用，最后
25、生成html静态数据，后被浏览器解析显示。 5.10课程发布 课程发布就是最终显示在用户面前的页面，也是课程预览的页面。先建立接口，这个接口的作用是接收课程预览后返回的静态化数据，后把数据存在MongoDB中，MongoDB利用GridfS文件分块存储起来，后将页面信息发布到服务器 5.11课程搜索 这里用到个全文检索的工具-elasticearch,这个工具是是在Apache Lucene的基础上发展而来的，它没有lucene那么复杂难用，且它支持开箱就可以使用，并且对开提供restful接口来操作索引和搜索。 在门户的搜索框中输入课程名称搜素课程为精确搜索和模糊搜索二合一，点击分类查找课程
26、为精确搜索，因为在定义课程数据是已经将分类类型添加到集合中 在添加课程的时候，同时把课程索引信息添加到ES索引库,在mysql中添加课程信息发布表，这个表的作用是为ES提供课程索引信息用的，详细查看数据库设计模块。制作课程发布模型，同时创建ES映射 当课程信息更新时，同时更新索引库的信息,使用Logstash可以从mysql采集数据，然后传到ES中。它是开源软件来的，也是es旗下的。它可以从多个数据中心采集数据，然后且转换数据，然后发送给到ES中。所以，利用这个软件可以实现表中数据更新时同时更新索引库的信息。 当课程信息删除时，删除更新索引库的信息删除课程信息同样是操作mysql表，所以也可以
27、利用Logstash来删除索引库信息。 5.12文件上传 窗体顶端 本项目利用分布式文件系统fastDFS来存储文件。它很适合存储小文件,那么图片和文档是最合适用它存储的了。它不对文件进行分块,那么也就没有分块合并的性能开销。其中它采用的通信协议是socket,所以通信速度非常快。 窗体底端 定义图片、文档上传接口，讲文件上传到文件系统，文件系统将文件入库，永久存储起来，文件系统返回上传结果，如果上传成功则返回文件的url路径。 在MongoDB中创建一个索引文件系统url的集合，主要是用来存储文件系统中的文件路径 5.13 流媒体 系统是提供录播视频供学生在线点播，那么必须设计一个视频系统，
28、供用户上传，并对视频进行编码处理。 这里涉及到一个流媒体的概念，流媒体就是采用流式传播方式进行传播。流媒体也可以称为流式媒体，它是指视频提供者着用把视频当做数据包发送，视频接受方通过特定的协议，对数据包进行解压后就可以还原画面了。流媒体的发明可以说大大丰富了人们生活，当今是自媒体、网络直播的时代，流媒体为这些提供了技术支持，也为网络教育提供了支持。 传输音频和视频信息可以分为下载传输和流式传输。 下载传输：在播放音频和视频前，要把它们都下载到本地之后才可以开始播放。缺点就在这里了，如果用户的网络传输速度差，那么要播放音视频就必须等等很长 流式传输：客户端连接到视频服务器，实时地把音频和视频信息
29、传输过来，就可以实现点击某个 5.14视频处理 视频通过网络传输就必须把视频文件转为合适的网络传输格式，编码后可以直接传输到视频服务器。视频服务器获取视频后对外提供流媒体传输接口，接口的协议有http,rtsp,rtmp等。而用户采用相应流媒体协议与媒体服务器通信，获取视频数据，后解码就可以播放了。 现在讨论下采用什么协议上传下载视频好。 Http协议连接http服务器，那么得等视频完全传输完毕才可以开始播放，且不支持定位到某个 视频既然已经编码传输了，那么必须要播放就必须经过解码才可以播放。目前使用flash、h5或者一些浏览器的插件都可以在web中播放，因为flash已经过时，所以我们选用
30、h5播放器。图5-14为java利用ffmpeg处理视频片段 图5-14 5.15 用户认证 这个模块就是对用户的登陆进行认证操作，步骤为： 1.用户客户端发送请求到认证服务器认证 2.服务器向浏览器发送cookie，然后写入token身份令牌 3.前端带着token请求服务器获取jwt令牌 4.前端带着token以及jwt来访问资源服务器，且网关要校检token的合法性。这里使用spring security oauth2提供的技术支持进行用户认证。图5-15为核心代码 图5-15 5.16 授权 为了检验用户是否有资格观看视频，必须对用户进行认证授权 1. 用户认证通过后，认证服务器向浏览
31、器cookie写入token 2. 前端带着token请求用户服务器获取jwt令牌 3. 前端带着token和jwt来访问资源服务器，网关要校检token的合法性，资源服务器校检jwt的合法性并进行授权，后开始播放视频。 5.17异常处理 在以往的开发中，捕获异常一般都是通过try/catch,这样在sercice层要加，controller层也要加，代码冗余严重，而且维护困难。所以需要自定义异常类，在service层判断，有问题则抛出异常信息，从而不再需要在控制层捕获异常了 处理方法： 1.一些能预料的异常由自己在代码中抛出，由SpringMvc统一捕获：例如增加页面时重复添加了，此时可以响
32、应具体的提示信息给用户，这些异常信息是我们可以预料得到的，所有获取异常信息比较方便 2.不可预料的异常都由SpringMvc统一捕获处理，其中异常类型为Exception类型，例如系统出现了bug就是这类异常 实现：先定义一个异常处理模板类并且继承RuntimeException,这里继承它的好处是在是不需要再抛出或捕获，而继承Exception就要，这样可减低代码冗余，代码截取见图5-17-1，图5-17-2： 图5-17-1 图5-17-2 5-18 页面静态化 流程：前端文件（模板）+ 数据 通过静态化生成最终html并且存储到数据库后发布到服务器 我们的后台管理需要管理各种子系统，可以
33、根据需求快速修改页面并且上线，由前端人员开发html、js、css文件，然后后台把这些文件结合数据然后再用静态化的方法生成页面。 模板依赖于数据模型的，先定义了数据模型，前端程序员根据数据模型结构编写模板，例如要在页面显示一个列表，那么要得知道数据的类型才能前端编写列表进行显示。 首先，每一个页面都必须设置一个url,它被用来做数据模型，系统在静态化前先获得这个链接，然后再通过http请求到数据模型 这个URL由开发页面的程序员提供。两者加起来就可以执行页面静态化了，其中模板采用动态脚步语言编写 数据模型：事先添加到MongoDB数据库获取URL接口开发： 远程调用：使用SpringMvc提供的RestTemplate模板类可以实现远程调用http接口。 它的底层中有了很多的第三方的http客户端工具，可以利用它们实现请求，其中最为常见的有Apache Htt
