CN116560630A - 一种逻辑积木架构及其工作方法 - Google Patents

Abstract

本发明公开一种逻辑积木架构及其工作方法。所述逻辑积木架构包括：在视图层设置组件库；业务层包括核心业务和核心能力，视图层与业务层通过构建用户界面框架来控制各个组件间数据通信、渲染更新；持久层包括二进制文件、内容分发网络静态资源、服务器数据、浏览器本地存储和移动端数据管理；通信层与素材库之间进行进程通信；安全处理层具体包括：对表单内容进行校验，对文件上传作大小格式校验；对图片进行云端敏感内容过滤；对服务器请求进行令牌校验；对程序执行文件进行代码签名；对场景制作器中核心的界面绘制数据进行加密处理，对引擎进行解密。采用本发明提供的逻辑积木架构，能够清晰直观的展示出编程知识，适合用户编程要求。

Description

一种逻辑积木架构及其工作方法

技术领域

本发明涉及计算机技术领域，尤其涉及一种逻辑积木架构及其工作方法。

背景技术

编程教育是通过编程游戏启蒙、可视化图形编程等课程，培养学生的计算思维和创新解难能力的课程。现有的编程教育一般都是教师教学，用户所要了解的编程知识都需要从书本获得，生硬理解编程知识使得编程教育质量不能得到提升。因此本发明构建一种逻辑积木架构及其工作方法，设计的逻辑积木产品是一款简单好用的创造力生产工具，用户可通过该工具初步学习到编程知识，创造属于自己的世界。

发明内容

本发明提供了一种逻辑积木架构，包括：视图层、业务层、持久层、通信层和安全层；

在视图层设置组件库，组件库包括界面元素组件、自定义组件、第三方组件和前端部署组件；

业务层包括核心业务和核心能力，视图层与业务层通过构建用户界面框架来控制各个组件间数据通信、渲染更新；核心业务包括场景制作器、橱窗制作器、函数制作器，用于产出场景组件；

持久层包括二进制文件、内容分发网络静态资源、服务器数据、浏览器本地存储和移动端数据管理，当保存逻辑积木整体数据时，会将内存数据保存至二进制文件及服务器中，逻辑积木运行时，开启本地文件数据监听更新，本地文件数据变更和逻辑积木操作是同步操作；

通信层与业务层之间通过组件通信，通过前端开发框架主进程、多渲染进程实现多窗口间数据同步更新；通信层与素材库之间通过进程间通信协议进行进程通信；

安全处理层，具体包括：逻辑积木对表单内容进行校验，对文件上传作大小、格式校验；对图片进行云端敏感内容过滤；对服务器的请求进行令牌校验；对程序执行文件进行代码签名；对场景制作器中核心的界面绘制中的数据进行加密处理，对引擎进行解密。

如上所述的一种逻辑积木架构，其中，场景组件由若界面控件、事件、函数操作、橱窗组件构成，使常量库、变量来记录控制运行状态；当操作常量库、变量、场景制作器、函数制作器、橱窗制作器时，程序通过构建用户界面框架将数据保存至内存变量中。

如上所述的一种逻辑积木架构，其中，场景制作器分为三个区域：场景列表、传入传出参数区、事件区。

如上所述的一种逻辑积木架构，其中，场景列表显示当前作品中存在的所有场景，并提供了快速新建，拖拽分组功能，单独导入导出场景功能，有利于用户间的模板分享、合作者间的协作开发；传入传出参数区展示当前选中场景的传入参数和传出参数；事件区展示当前选中场景的编辑事件。

如上所述的一种逻辑积木架构，其中，事件执行流程包括：

初始化事件，绘制前先处理数值，在绘制场景界面前，需要先对数值进行处理，这时可用初始化事件添加事件来搞定；

绘制界面，通过添加元件的方式，绘制出当前场景的界面，元件包括基础元件和自定义元件，基础元件包括图片、文本、长文本、按钮、进度条，自定义元件包括橱窗、泳道，以便用户更好的实现逻辑，提升制作效率；

绘制后一次性处理，在界面初始化后执行，对界面特殊数值或画面效果进行处理；

循环更新，在采集的运行过程中，每帧都会执行此事件，判断全局数值变化，处理被动触发事件逻辑。

按钮绑定的事件是封装好的公共事件，能够被随时调用。

如上所述的一种逻辑积木架构，其中，函数制作器用于封装逻辑类的计算，没有界面交互，只有计算逻辑事件。

如上所述的一种逻辑积木架构，其中，业务层的核心技术还包括数据选择器，数据选择器对工具内全部数据进行查看和使用；采用全局单例模式实现，采用预设数据格式进行交互，提供四种视图和交互方式：只能选择，可手填输入可选择，右键选择插入变量类型和选择富文本；界面层根据视图窗口自适应缩放尺寸。

如上所述的一种逻辑积木架构，其中，业务层包括：常量库、变量管理器、存储库、公共数据管理、素材库、导入导出功能、数据选择器、常量库多窗口、批量操作功能、预览引擎功能、全局搜索功能和自定义主题。

本发明还提供一种逻辑积木架构的工作方法，包括：

应用启动，解析URL参数，存入全局变量及本地存储中；

初始化构建用户界面框架实例，通过URL传参数控制路由到首屏页面；

使用创建读流方法流式读取二进制文件数据，二进制文件存入构建用户界面框架实例中；

加载服务器资源；

监听本地文件数据变化，并更新构建用户界面框架实例；

通过前端开发框架提供的渲染进程开启主进程和渲染进程间的通信。

初始化完成后，使用逻辑积木架构生成常量库及常量库实例、实例的属性，存入构建用户界面框架实例中；

创建场景组件并生成变量，操作组件内容时，存入构建用户界面框架实例中；

当使用盘素材时，使用素材信息存入构建用户界面框架实例中并更新本地二进制文件数据；

当预览场景组件或橱窗组件时，通过网页浏览加载预览页面，并建立传递函数、返回数据；

当开启、关闭多窗口常量表，保存逻辑积木数据、关闭逻辑积木窗口时，通过渲染进程通信进行关闭；

当保存逻辑积木数据时，首先更新构建用户界面框架实例中的数据，并将构建用户界面框架实例数据更新到本地二进制文件，将数据保存至服务器。

本发明实现的有益效果如下：采用本发明提供的逻辑积木架构，能够清晰直观的展示出编程知识，适合用户编程要求。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。

图1是本发明实施例一提供的一种逻辑积木架构示意图；

图2是一种逻辑积木架构工作方法流程图。

具体实施方式

下面结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例一

参见图1，本发明实施例一提供一种逻辑积木架构，包括视图层、业务层、持久层、通信层和安全层。其中：

视图层

在视图层设置组件库，组件库包括ElementUI（界面元素组件）、自定义组件、第三方组件和其他NPM（前端部署）组件。

（二）业务层包括核心业务和核心能力。视图层与业务层通过vue框架（是一款用于构建用户界面的框架）来控制各个组件间数据通信、渲染更新。

核心业务包括Scene（场景）制作器、橱窗制作器、函数制作器，用于产出scene组件。scene组件由若UI控件、事件、函数操作、橱窗组件构成，使常量库、变量来记录控制运行状态。当操作常量库、变量、scene制作器、函数制作器、橱窗制作器时，程序通过vue将数据保存至内存变量中。

其中Scene制作器承担整体框架逻辑，橱窗及函数制作器提供支持，主要用来制作通用组件及方法。制作界面布局都选用了从左至右的操作顺序排列，统一用户使用习惯。

Scene制作器为界面制作器的核心功能，Scene制作器分为三个区域：Scene列表、传入传出参数区、事件区。Scene列表显示当前作品中存在的所有Scene，并提供了快速新建，拖拽分组功能，单独导入导出Scene功能。单独导入导出Scene，有利于用户间的模板分享、合作者间的协作开发。传入传出参数区展示当前选中Scene的传入参数和传出参数，事件区展示当前选中Scene的编辑事件；传入传出参数，是逻辑积木的特色设计，一般作者级用户在使用scene的时候，作品本身的数值，与Scene里的数值，不会互相冲突。所以每个scene都有一套私有的临时变量，用来进行Scene本身的逻辑计算。传入传出参数主要用于接收数值，进行运算或者处理一定逻辑后，再次传出。整个传入传出参数的过程图2所示。事件区是编辑当前scene的核心区域。事件编辑提供了清晰的事件执行流程，便于用户理解和使用。

其中，事件执行流程包括：

初始化事件，绘制前先处理数值，在绘制scene界面前，需要先对数值进行处理，这时可用初始化事件添加事件来搞定；

绘制UI，通过添加元件的方式，绘制出当前scene的界面UI，元件包括基础元件和自定义元件，基础元件包括图片、文本、长文本、按钮、进度条，自定义元件包括橱窗、泳道，以便用户更好的实现逻辑，提升制作效率。其中，橱窗通过“橱窗制作器”，可以设计出用户所需要的元件样式，并在scene的绘制UI步骤中添加用户设计的橱窗。橱窗是一种展示用的元件，将“scene向橱窗传传入的参数”展示出来的元件，橱窗不可以对scene的数值进行运算和改变，所以橱窗只有传入参数，没有传出参数；橱窗还是一种可以添加按钮的交互元件，在橱窗内可以添加按钮，但是按钮的事件逻辑并不在橱窗中设置，需要在被使使用的scene中绑定事件。

绘制后一次性处理，在UI界面初始化后执行，可对UI界面处理一些特殊数值或画面效果。

循环更新，在scene的运行过程中，每帧都会执行此事件，可判断全局数值变化，处理被动触发事件逻辑等。

按钮绑定的事件与其他四项不同，它不仅仅是在“scene的表现绘制”过程中，而是封装好的公共事件，可随时调用。

橱窗制作器的核心功能为制作橱窗模板样式，提供给Scene界面使用。功能设计与Scene差别主要为可以设置自身宽高、没有传出参数、不能直接绑定按钮交互事件、特有的自定义通知事件，能来主动呼叫scene事件。

函数制作器主要功能为封装逻辑类的计算，没有界面交互，只有计算逻辑事件。

业务层的核心技术还包括数据选择器，数据选择器可以对工具内全部数据进行查看和使用，即：常量库、变量、系统数据、存储库、UI画面等。采用全局单例模式实现，json数据格式进行交互。提供四种视图和交互方式：只能选择，即可手填输入可选择，右键选择插入变量类型，富文本。UI层根据视图窗口自适应缩放尺寸，交互简单使用流畅。

业务层的核心能力包括：常量库、变量管理器、存储库、公共数据管理、素材库、导入导出功能、数据选择器、常量库多窗口、批量操作功能、预览引擎功能、全局搜索功能和自定义主题等。

（三）持久层包括bin（二进制）文件、cdn（内容分发网络）静态资源、服务器数据https、浏览器localstorage（本地存储）和VUX（移动端）数据管理。当保存逻辑积木整体数据时，会将内存数据保存至本地bin文件及服务器中，逻辑积木运行时，开启本地文件数据监听更新，本地文件数据变更和逻辑积木操作是同步操作，需分步进行。

（四）通信层与业务层之间通过组件通信，包括vuex、vue组件通信、vue事件总线通信。通过electron（前端开发框架）主进程、多渲染进程实现多窗口间数据同步更新。通信层与素材库之间通过IPC（进程间通信协议）进行进程通信。

（五）安全处理层，具体包括：逻辑积木对表单内容进行xss校验，对文件上传作大小、格式校验；对图片进行云端敏感内容过滤；对服务器的请求进行token（令牌）校验；对程序执行文件进行代码签名；对scene制作器中核心的UI绘制中的数据进行加密处理，对引擎进行解密。

如图2所示，本发明实施例还提供一种逻辑积木架构工作方法，包括：

步骤201、应用启动，解析URL参数，存入全局变量及localstorage中；

步骤202、初始化Vue实例VueStore和VueRouter，通过URL传参数控制Vue Router路由到首屏页面；

步骤203、使用node提供的createReadStream方法流式读取本地bin文件中的json数据，bin存入VueStore；

步骤204、加载CND或服务器资源；

步骤205、使用node提供的fs.watchFile监听本地文件数据变化，并更新VueStore；

步骤206、通过Electron提供的IPC.renderer（渲染进程）开启主进程和渲染进程间的通信；

步骤207、初始化完成后，使用逻辑积木架构生成常量库及常量库实例、实例的属性，存入VueStore；

步骤208、创建scene组件并生成变量，操作组件内容时，存入VueStore；

步骤209、当使用盘素材时，使用素材信息存入VueStore并更新本地bin文件数据；

步骤210、当预览scene组件或橱窗组件时，通过webView（网页浏览）加载预览页面，并建立postMessage传递、返回数据；

步骤211、当开启、关闭多窗口常量表，保存逻辑积木数据、关闭逻辑积木窗口时，通过IPC.Renderer通信进行关闭；

步骤212、当保存逻辑积木数据时，首先更新vueStore数据，并将vueStore数据更新到本地bin文件，ajax将数据保存至服务器。

与上述实施例对应的，本发明实施例提供一种逻辑积木架构工作装置，包括：至少一个存储器和至少一个处理器；

存储器用于存储一个或多个程序指令；

处理器，用于运行一个或多个程序指令，用以执行一种逻辑积木架构工作方法。

与上述实施例对应的，本发明实施例提供一种计算机可读存储介质，计算机存储介质中包含一个或多个程序指令，一个或多个程序指令用于被处理器执行一种逻辑积木架构工作方法。

本发明所公开的实施例提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序指令，当所述计算机程序指令在计算机上运行时，使得计算机执行上述的一种逻辑积木架构工作方法。

在本发明实施例中，处理器可以是一种集成电路芯片，具有信号的处理能力。处理器可以是通用处理器、数字信号处理器(Digital Signal Processor，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)、现场可编程门阵列(FieldProgrammable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

可以实现或者执行本发明实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本发明实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。处理器读取存储介质中的信息，结合其硬件完成上述方法的步骤。

存储介质可以是存储器，例如可以是易失性存储器或非易失性存储器，或可包括易失性和非易失性存储器两者。

其中，非易失性存储器可以是只读存储器(Read-Only Memory，简称ROM)、可编程只读存储器(Programmable ROM，简称PROM)、可擦除可编程只读存储器(Erasable PROM，简称EPROM)、电可擦除可编程只读存储器(Electrically EPROM，简称EEPROM)或闪存。

易失性存储器可以是随机存取存储器(Random Access Memory，简称RAM)，其用作外部高速缓存。通过示例性但不是限制性说明，许多形式的RAM可用，例如静态随机存取存储器(Static RAM，简称SRAM)、动态随机存取存储器(Dynamic RAM，简称DRAM)、同步动态随机存取存储器(Synchronous DRAM，简称SDRAM)、双倍数据速率同步动态随机存取存储器(Double Data RateSDRAM，简称DDRSDRAM)、增强型同步动态随机存取存储器(EnhancedSDRAM，简称ESDRAM)、同步连接动态随机存取存储器(Synchlink DRAM，简称SLDRAM)和直接内存总线随机存取存储器(DirectRambus RAM，简称DRRAM)。

本发明实施例描述的存储介质旨在包括但不限于这些和任意其它适合类型的存储器。

本领域技术人员应该可以意识到，在上述一个或多个示例中，本发明所描述的功能可以用硬件与软件组合来实现。当应用软件时，可以将相应功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。计算机可读介质包括计算机存储介质和通信介质，其中通信介质包括便于从一个地方向另一个地方传送计算机程序的任何介质。存储介质可以是通用或专用计算机能够存取的任何可用介质。

以上所述的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的技术方案的基础之上，所做的任何修改、等同替换、改进等，均应包括在本发明的保护范围之内。

Claims (9)

1.一种逻辑积木架构，其特征在于，包括：视图层、业务层、持久层、通信层和安全层；

在视图层设置组件库，组件库包括界面元素组件、自定义组件、第三方组件和前端部署组件；

业务层包括核心业务和核心能力，视图层与业务层通过构建用户界面框架来控制各个组件间数据通信、渲染更新；核心业务包括场景制作器、橱窗制作器、函数制作器，用于产出场景组件；

持久层包括二进制文件、内容分发网络静态资源、服务器数据、浏览器本地存储和移动端数据管理，当保存逻辑积木整体数据时，会将内存数据保存至二进制文件及服务器中，逻辑积木运行时，开启本地文件数据监听更新，本地文件数据变更和逻辑积木操作是同步操作；

通信层与业务层之间通过组件通信，通过前端开发框架主进程、多渲染进程实现多窗口间数据同步更新；通信层与素材库之间通过进程间通信协议进行进程通信；

安全处理层，具体包括：逻辑积木对表单内容进行校验，对文件上传作大小、格式校验；对图片进行云端敏感内容过滤；对服务器的请求进行令牌校验；对程序执行文件进行代码签名；对场景制作器中核心的界面绘制中的数据进行加密处理，对引擎进行解密。

2.如权利要求1所述的一种逻辑积木架构，其特征在于，场景组件由若界面控件、事件、函数操作、橱窗组件构成，使常量库、变量来记录控制运行状态；当操作常量库、变量、场景制作器、函数制作器、橱窗制作器时，程序通过构建用户界面框架将数据保存至内存变量中。

3.如权利要求2所述的一种逻辑积木架构，其特征在于，场景制作器分为三个区域：场景列表、传入传出参数区、事件区。

4.如权利要求3所述的一种逻辑积木架构，其特征在于，场景列表显示当前作品中存在的所有场景，并提供了快速新建，拖拽分组功能，单独导入导出场景功能，有利于用户间的模板分享、合作者间的协作开发；传入传出参数区展示当前选中场景的传入参数和传出参数；事件区展示当前选中场景的编辑事件。

5.如权利要求4所述的一种逻辑积木架构，其特征在于，事件执行流程包括：

初始化事件，绘制前先处理数值，在绘制场景界面前，需要先对数值进行处理，这时可用初始化事件添加事件来搞定；

绘制界面，通过添加元件的方式，绘制出当前场景的界面，元件包括基础元件和自定义元件，基础元件包括图片、文本、长文本、按钮、进度条，自定义元件包括橱窗、泳道，以便用户更好的实现逻辑，提升制作效率；

绘制后一次性处理，在界面初始化后执行，对界面特殊数值或画面效果进行处理；

循环更新，在采集的运行过程中，每帧都会执行此事件，判断全局数值变化，处理被动触发事件逻辑；

按钮绑定的事件是封装好的公共事件，能够被随时调用。

6.如权利要求1所述的一种逻辑积木架构，其特征在于，函数制作器用于封装逻辑类的计算，没有界面交互，只有计算逻辑事件。

7.如权利要求1所述的一种逻辑积木架构，其特征在于，业务层的核心技术还包括数据选择器，数据选择器对工具内全部数据进行查看和使用；采用全局单例模式实现，采用预设数据格式进行交互，提供四种视图和交互方式：只能选择，可手填输入可选择，右键选择插入变量类型和选择富文本；界面层根据视图窗口自适应缩放尺寸。

8.如权利要求1所述的一种逻辑积木架构，其特征在于，业务层包括：常量库、变量管理器、存储库、公共数据管理、素材库、导入导出功能、数据选择器、常量库多窗口、批量操作功能、预览引擎功能、全局搜索功能和自定义主题。

9.一种逻辑积木架构的工作方法，其特征在于，包括：

应用启动，解析URL参数，存入全局变量及本地存储中；

初始化构建用户界面框架实例，通过URL传参数控制路由到首屏页面；

使用创建读流方法流式读取二进制文件数据，二进制文件存入构建用户界面框架实例中；

加载服务器资源；

监听本地文件数据变化，并更新构建用户界面框架实例；

通过前端开发框架提供的渲染进程开启主进程和渲染进程间的通信；

初始化完成后，使用逻辑积木架构生成常量库及常量库实例、实例的属性，存入构建用户界面框架实例中；

创建场景组件并生成变量，操作组件内容时，存入构建用户界面框架实例中；

当使用盘素材时，使用素材信息存入构建用户界面框架实例中并更新本地二进制文件数据；

当预览场景组件或橱窗组件时，通过网页浏览加载预览页面，并建立传递函数、返回数据；

当开启、关闭多窗口常量表，保存逻辑积木数据、关闭逻辑积木窗口时，通过渲染进程通信进行关闭；

当保存逻辑积木数据时，首先更新构建用户界面框架实例中的数据，并将构建用户界面框架实例数据更新到本地二进制文件，将数据保存至服务器。