码迷,mamicode.com
首页 > Web开发 > 详细

新派系统Web前端架构

时间:2020-09-18 17:09:59      阅读:49      评论:0      收藏:0      [点我收藏+]

标签:上下   提交   实战   enter   部分   作业   ide   一个   文本   

这是一个Python学习系统,主要提供给成年人。交互方式为对话式,不过里面的对话全部是通过脚本内置好的。用户通过Enter展示下一句对话,支持语音自动朗读。
技术图片

先看架构!
技术图片

基础支持层

提供了课程学习回使用到的通用功能模块

  • 图片展示系统。标准化图片展示(限制展示图片在640px*480px范围内)、点击放大、多图切换,以及可定制化功能(比如知识卡片中定制了一个点击按钮,点击后定位到图片所在的学习上下文环境)

  • 习题系统。提供标准的习题模块,供互动学习、巩固练习使用。

  • 在线Python编程系统。该系统的核心。分为两个模块,编辑器和在线终端。流程是:
    1.初始化编程模块\链接websoket,websoket直接链接python的docker镜像。
    2.用户编写代码,点击运行。将代码传递给后台,后台保存为一个py文件,返回文件路径以及执行命令字符串。
    3.前端将执行命令字符串通过websoket传递给python的镜像运行。运行过程中产生的打印通过websoket源源不断传递给前端。前端接收后展示到在线终端。websocket的接收前端可以控制,当遇到base64格式的数据,前端会缓存下来,接收的图片数据不会展示到终端,而是额外展示。还支持url格式(这种格式主要是html链接,可以支持动态交互的效果)。
    4.识别服务端通过websocket传递来的终止符号,判断打印中是否有报错,没有报错则视为成功,自动断开websokect。此时用户不能再对代码经行编辑。
    5.如果打印有报错,则认为程序执行异常。保持为异常状态。此时用户可以二次编辑程序和运行。或者跳过,跳过视为失败,断开websocket。
    再2-3步中间有一个检测websocket链接的过程,如果websocket是断开的状态,则重新链接成功后再继续往下走。

编程系统的完整的状态机如下
技术图片

这个状态机有一个特点Websocket对用户来说是透明的,最多就一个提示,但不影响操作。市面上很多产品都是Websocket断开后,整个编程模块就用不了,需要用户手动点击后重新链接。
还有一个特点是,如果程序执行报错,如果用户没有点击跳过而是直接关闭浏览器(视为放弃),用户下次进来是最近的一个最终状态,数据也是这个状态的数据。这个特点仁者见仁吧。

课堂学习层

这一层是用户学习的主要板块,包括三个功能部分

  • 互动学习。作为课堂学习的主要内容。支持的数据类型丰富:文本、图片、视频、代码段、内嵌编程练习器、选题题等。
    额外还支持的功能有弹幕系统、知识卡片(用户学习过后的课程图片整理,便于用户复习)、语音朗读控制。

  • 巩固练习。可以理解为做题练习。目前支持单选题,题目以及选项支持文本、图片、代码段展示。

  • 项目实战。编程挑战练习,给定任务要求,用户根据要求编程。
    这块主要模块式基础支持层的在线Python编程系统。
    这里有一个提交作业的按钮,这个按钮的展示主要有三种状态:disabled/enable/hide:分别表示按钮展示但不可点击/展示且可点击/隐藏。这三种状态又和编程系统中的Python代码运行状态有关系。

最终形成的状态机如下
技术图片
这个状态机可以结合着在线Python编程系统的状态机来看。有一点不同就是:项目实践中用户不可以“跳过该题”。

通用信息层

这一层主要包括课程中心、用户中心、路由和独立出来的数据/状态管理器(UI和数据分离)。

数据采集

还有一个基础模块,数据采集模块。在三个层都可以使用。支持声明式埋点和命令式埋点。

新派系统Web前端架构

标签:上下   提交   实战   enter   部分   作业   ide   一个   文本   

原文地址:https://www.cnblogs.com/chuaWeb/p/13686720.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!