本文主要内容
我的工程实践项目是:
- 当前在线教育及微课、慕课、翻转课堂成为教学实践探索的热点网络教学平台突破了传统教学中时间空间的限制,使学习可以随时随地,让学生可以更好地利用碎片化时间,因此网络共享平台地搭建成为一个富有意义的项目。
- 本系统首先基于go语言的Gin框架,通过该平台实现网上教学资源的共享。用户可以根据页面链接,实现搜索课程、浏览课程教学、在线观看学习视频、下载课件、教师上传作业,下载作业,作业评分等功能。
本文主要针对我的工程实践项目,进行软件系统分析和设计,最终形成软件系统概念原型。
设计方案
常见的项目的架构风格有以下几种:三层架构、MVC、MVVM、管道-过滤器、客户-服务、P2P、发布-订阅等。
本项目采用了BS即Browser/Server(浏览器/服务器)结构,就是只安装维护一个服务器(Server),而客户端选用浏览器(Browse)运行软件。B/S结构应用程序相对于传统的C/S结构应用程序就是一个特别大的进步。 B/S结构的重要特征就是分布性强、维护方便、开发简单并且共享性强、总体拥有费用低。
整体方案上采用了前后端分离,然后整体架构使用了MVC架构。
前后端分离
前后端分离,即前后端各自作为一个半自治的技术独立团队,协作开发同一业务功能。
1. 为什么选择前后端分离
前后端分离的原因是多种多样的,移动优先(Mobile First)战略将单页面应用带到了移动领域,使得后端需要提供RESTful风格的API,也进一步加剧了前后端分离;并且,知识的专业化使得传统的后端工程师,已经无法满足前端开发的要求。
缺点:要面临API管理带来的挑战。
优点:
- 独立部署。前端应用可以独立运行在自己的服务器上,而不受后端上线计划的影响。
- 分清职责。后端将视图层(View)从系统架构中拆分出去,使系统变得更加简洁。
- 技术栈独立。分离之前,技术选型受一定限制,如模板引擎等。分离之后,只要保证API是一致的,前后端之间就会互不影响。
- 方便系统演进。后端可以迁移到微服务,前端可以迁移到微前端架构。
- 提高效率(相对的)。对于复杂项目而言,拆分可以降低维护成本;而对于简单的项目而言,拆分则会提高维护成本。
2. 前后端分离的开发模式
瀑布模式的前后端分离,是预先制定API的文档,再进行联调。敏捷模式的前后端分离,则是一个业务一个API,每个API单独集成。
瀑布模式的流程图如下:
3. 前后端分离的API设计
RESTful API几乎是前后端分离的标准实践。
相关的基本规范:
- 标准的HTTP动词(又称为HTTP请求方法)。GET/PUT/POST/DELETE/PATCH等。
- 状态码。20x/40x/50x等常见的状态码。
- 资源路径。URL用于代表资源,应该确保资源能遵循相关的规范。
- 参数处理。GET/POST。
与API和安全相关的要素:
- Token管理。后端处于安全考虑,会有各种复杂的管理机制。常用的有超过时间跨度则过期、二次登陆失效、多个客户端可以同时登录、Token永不过期等。而对于前端来说,只是在遇到401未授权的时候进行相应的逻辑处理。
- 表单校验。所有的表单校验都是需要前端和后端都校验的。前端校验是出于用户体验的目的,后端进行校验时默认前端是不可信的。
- 权限管理。前端往往只是根据相关的角色和权限来展示现在的页面,至于权限则要在后端进行判断。
概念原型相关视图
MVC架构模式依赖视图
后台是基于MVC的,由于我们采用了前后端分离,所以view层就单独分离开了
分解视图如下
执行视图如下
- 用户登陆注册流程图如下
- 学生选择课程学习流程图如下
- 教师批改作业流程图如下
核心的数据结构设计
课程目录的数据结构设计
由于我们使用的是MongoDB,其数据类型就如下json格式
{
courseTitle:'高级网络技术',
hTitle:'Lab3 SDN环境搭建与协议仿真',
hDescription: "无",
hpublishTime: '2020/11/20',
hendTime: '2020年11月23日',
uploadTime: '2020/11/22',
score: '8',
}
这是作业的基本数据结构:courseTitle
为对应课程名,hTitle
是基本的课程名称,hDescription
为课程描述,hpublishTime
为作业发表时间,hendTime
为作业提交的截止时间,uploadTime
为作业的上传时间,score
为作业得分
{
id: 1,
name: "运动与健康",
teacher: ['代方梅', '史文文'],
leftImg: "https://qn-next.xuetangx.com/15724062301298.jpg?imageslim", // 课程的宣传性质的图片
startTime: "2020-09-01", // 课程开始时间
endTime:"2020-12-31", // 课程结束时间
totalTime: 12, // 总共要多少周
perTime: 6,//预计一周多少要花多少小时
details:`
《运动与健康》课程以人文社会科学的视野,将体育人文社会科学、运动人体科学和医学等相关学科有机地结合起来,系统、全面地阐述体育运动与健康的关系、如何向体育运动要健康、不同运动项目的健康机制、运动损伤的预防与处理等基本内容。《运动与健康》祝愿每一位同学掌握科学锻炼的方法,每天锻炼一小时,健康生活一辈子!
健康是人类发展永恒的主题,追求健康是人们共同的愿望,拥有健康是人人享有的权利,维护健康必须走科学的道路,增进健康应遵循自身的规律。《运动与健康》这门课程将带领大家为健康而运动。
`, // 课程摘要
homework: 0.6, // 最后期末的平时作业占比和考试的占比
finalExam: 0.4,
}
这个是课程的基本信息存储
{
id: 1,
label: '第零章',
children: [{
id: 4,
label: '本课程简介',
children: [{
id: 9,
label: 'video'
}, {
id: 10,
label: '课程简介和学习目标'
},{
id: 11,
label: '第44次中国互联网络发展状况统计报告201909'
},
]
}
这是课程目录设计
id
是对应的课程id,然后第一级的children
是最外层的目录,类似于书本的第几章第几章。
第二级的children
是对应于第一级目录的子目录就是第一章节里面的各个小章节,最后对应的children就是主体内容了。
{
id:'1',
type:'学生',
name: '张三',
sno: 'SS2020123456',
pwd:'********'
}
这是用户信息存储,type
是账号类型,有学生和教师两个类型,name
是学生姓名, sno
是学生的学号,pwd
是学生的密码
实现视图如下
- 后端实现视图如下
目前还没有完全实现,只实现了部分功能
- 前端实现视图如下
软件运行环境与技术选型
前端:vue2+vuex+vue router + element UI
后端:Go
数据库:MangoDB
编译器:Goland
理由:因为采用前后端分离的分离的思想,前端和后端的开发可以各自进行。采用MangoDB主要是因为其适合课程目录的存储,课程目录是一个类似树一样的存储状态,如果采用关系型数据库存储的话会比较麻烦,采用mangoDB的kv存储就相对简单很多。
gin框架是目前go语言中很轻量,性能也很好的web框架,故而采用
鉴于实际使用时,数量较多的设备(执行器)会同时向webserver传输自身的状态信息,为了减轻服务器压力,webserver主要的工作是进行redis缓存,同时响应前端对于设备(执行器)状态数据的请求。每隔一段时间,将目前已有的缓存数据存入database服务器中。如果用户需要查看一段时间之前的设备状态信息,webserver可以从database server中读取。
系统概念原型的核心工作机制
本在线资源共享系统的核心功能是学生能够正常在线学习和提交作业,然后教师的上传作业,然后下载作业评分。
所以学生的学习功能机制是:
- 登陆系统
- 查看自己正在学习的课程
- 进入课程页面
- 根据自己的学习进度打开视频进行在线学习
- 学习并记录笔记
- 下载对应作业
- 作业完成后提交到系统
- 系统验证作业格式返回提交信息
教师的下载批改作业的功能机制是:
- 教师看自己所教授的课程
- 查看已提交作业
- 在线预览作业,然后批改给出分数
- 上传分数,并给出评论到系统
- 批改下一个学生的系统