Vue实现图形化积木式编程(九)

最新推荐文章于 2024-05-12 17:10:51 发布
最新推荐文章于 2024-05-12 17:10:51 发布
阅读量964 收藏 1
点赞数
文章标签： node.js vue.js javascript 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41895625/article/details/120686408
版权

Blockly代码块编辑区域基本场景搭建

路由

下一篇

历史回顾

前言

前段时间想要做一个web端的图形化积木式编程（类似少儿编程）的案例，网上冲浪了一圈又一圈，终于技术选型好，然后代码一顿敲，终于出来了一个雏形。

TIPS：该案例设计主要参考iRobot Coding,只用做学习用途，侵删。

https://code.irobot.com/#/

最终实现效果

最终实现效果

本文实现效果

  • Blockly代码块编辑区域基本场景搭建
    blockly代码块编辑区域基本场景搭建

完整代码

  • Blockly代码块编辑区域基本场景搭建
<template>
  <div id="blockly">
    <!-- 工作区 -->
    <div id="blocklyDiv" ref="blocklyDiv" style="height: 500px; width: 700px;"></div>
    <button style="position: fixed;left: 50px;top: 10px;" @click="block2code">生成代码</button>
    <!-- 代码显示区 -->
    <div style="background-color: lightgrey;width: 700px;text-align: left">
      {{code?code:'请点击生成代码按钮'}}
    </div>
    <button style="position: fixed;left: 150px;top: 10px;" @click="runCode">执行代码</button>
  </div>
</template>

<script>
import Blockly from 'blockly'
import BlocklyJS from 'blockly/javascript';

export default {
  name: "blocklyClass1",
  data() {
    return {
      code:'',
      options: {
        toolbox: {
          "kind": "flyoutToolbox",

          "contents": [
            {
              "kind": "block",
              "type": "controls_if"
            },
            {
              "kind": "block",
              "type": "controls_repeat_ext"
            },
            {
              "kind": "block",
              "type": "logic_compare"
            }
            ,
            {
              "kind": "block",
              "type": "math_number"
            }
            ,
            {
              "kind": "block",
              "type": "math_arithmetic"
            }
            ,
            {
              "kind": "block",
              "type": "text"
            }
            ,
            {
              "kind": "block",
              "type": "text_print"
            }
          ]
        }
      }
    }
  },
  mounted() {
    Blockly.inject(this.$refs.blocklyDiv, this.options);
  },
  methods:{
    /**
     * block代码块转为代码
     */
    block2code(){
      this.code = BlocklyJS.workspaceToCode(this.$refs.blocklyDiv.workspace)
    },

    /**
     * 执行生成代码
     */
    runCode(){
        if(!this.code){alert('请先点击生成代码');return}
        eval(this.code)
    },
  },
}
</script>

<style scoped>
#blockly {
  position: absolute;
  left: 50px;
  top: 50px;
  bottom: 0;
  width: calc(100vw - 50px);
  height: calc(100vh - 50px);
  display: flex;
  flex-direction: column;
}
</style>

代码分解

0.项目初始化

  • 利用脚手架搭建vue项目
npx @vue/cli create block-class
  • 脚手架中选择Vue2、npm脚手架中选择Vue2、npm
  • 启动工程
npm run serve
  • 安装Block依赖
npm install --save blockly
  • 引入模块
import Blockly from 'blockly';
  • 配置白名单!

不配置白名单，解析器在解析到xml、block等标签的时候会报错，而其实我们并不希望解析器解析这些block定义的工具栏标签

//main.js - blocky配置
Vue.config.ignoredElements = ['field','block','category','xml','mutation','value','sep']

1.Blockly基本场景搭建

  • blocklyDiv为整个block工作区，个人习惯将工具栏写在工作区里面（不一定嵌套在工作区，Block是通过将获取到的这个工具栏xml元素注入到工作区来实现的）
<template>
  <div id="blockly">
    <!-- 工作区 -->
    <div id="blocklyDiv" ref="blocklyDiv" style="height: 500px; width: 700px;">
      <!-- 工具栏 -->
      <xml id="toolbox" ref="toolbox" style="display: none">
        <block type="controls_if"></block>
        <block type="controls_repeat_ext"></block>
        <block type="logic_compare"></block>
        <block type="math_number"></block>
        <block type="math_arithmetic"></block>
        <block type="text"></block>
        <block type="text_print"></block>
      </xml>
    </div>
  </div>
</template>
  • 引入blockly库，通过Blockly.inject(‘在DOM中注入工作区的区域’,‘注入选项字典’)

注入的选项有很多，具体查看:Blockly注入选项

<script>
import Blockly from 'blockly'
export default {
  name: "blocklyClass1",
  mounted() {
  	//目前只配置了工具栏
    let options = {
      toolbox: this.$refs.toolbox
    }
    //将工作区注入到blocklyDiv的元素上，并将配置的选项注入
    Blockly.inject(this.$refs.blocklyDiv,options);
  }
}
</script>

2.工具栏工具列表转化为JSON格式

  • 为了让工具栏列表更具灵活性，把它转为JSON格式是首选
      <!-- 工具栏 -->
      <xml id="toolbox" ref="toolbox" style="display: none">
        <block type="controls_if"></block>
        <block type="controls_repeat_ext"></block>
        <block type="logic_compare"></block>
        <block type="math_number"></block>
        <block type="math_arithmetic"></block>
        <block type="text"></block>
        <block type="text_print"></block>
      </xml>
  • 转为JSON格式
{
          "kind": "flyoutToolbox",
          "contents": [
            {
              "kind": "block",
              "type": "controls_if"
            },
            {
              "kind": "block",
              "type": "controls_repeat_ext"
            },
            {
              "kind": "block",
              "type": "logic_compare"
            }
            ,
            {
              "kind": "block",
              "type": "math_number"
            }
            ,
            {
              "kind": "block",
              "type": "math_arithmetic"
            }
            ,
            {
              "kind": "block",
              "type": "text"
            }
            ,
            {
              "kind": "block",
              "type": "text_print"
            }
          ]
        }
  • 将template中的xml元素删除掉，在data中加入options的选择，里面加入一个key为toolbox的工具栏列表
export default {
  name: "blocklyClass1",
  data() {
    return {
      options: {
        toolbox: {
          "kind": "flyoutToolbox",
          "contents": [
            {
              "kind": "block",
              "type": "controls_if"
            },
            {
              "kind": "block",
              "type": "controls_repeat_ext"
            },
            {
              "kind": "block",
              "type": "logic_compare"
            }
            ,
            {
              "kind": "block",
              "type": "math_number"
            }
            ,
            {
              "kind": "block",
              "type": "math_arithmetic"
            }
            ,
            {
              "kind": "block",
              "type": "text"
            }
            ,
            {
              "kind": "block",
              "type": "text_print"
            }
          ]
        }
      }
    }
  },
  mounted() {
  	//选项中的toolbox改为了配置的字典列表
    Blockly.inject(this.$refs.blocklyDiv, this.options);
  }
}
</script>

  • 当然了，除了这中直列的工具栏以为，还可以配置带分类的工具栏:

  • 直列式工具栏
    直列式工具栏

  • 带分类工具栏
    在这里插入图片描述

  • 带分类工具栏配置如下（kind设置为category，然后再嵌套一层contents的列表）：

{
  "kind": "categoryToolbox",
  "contents": [
    {
      "kind": "category",
      "name": "Control",
      "contents": [
        {
          "kind": "block",
          "type": "controls_if"
        },
        {
          "kind": "block",
          "type": "controls_whileUntil"
        },
        {
          "kind": "block",
          "type": "controls_for"
        }
      ]
    },
    {
      "kind": "category",
      "name": "Logic",
      "contents": [
        {
          "kind": "block",
          "type": "logic_compare"
        },
        {
          "kind": "block",
          "type": "logic_operation"
        },
        {
          "kind": "block",
          "type": "logic_boolean"
        }
      ]
    }
  ]
}

3.生成代码

  • 将代码块拖动到工作区之后，就应该生成对应代码了
  • 我们需要生成的是javascript的代码，所以引入’blockly/javascript’的库
  • Block还支持生成的代码有Python，PHP，Lua，或Dart，按需引入相关库即可
import BlocklyJS from 'blockly/javascript';
  • 定义一个生成代码按钮和一个显示生成代码的区域
    <button style="position: fixed;left: 50px;top: 10px;" @click="block2code">生成代码</button>
    <!-- 代码显示区 -->
    <div style="background-color: lightgrey;width: 700px;text-align: left">
      {{code?code:'请点击生成代码按钮'}}
    </div>
  • 生成代码
//将工作区作为参数传入，返回的是该工作区中的blocks组合块形成的代码
this.code = BlocklyJS.workspaceToCode(this.$refs.blocklyDiv.workspace)

4.执行代码

  • 用简单粗暴eval
  • 当然啦，eval执行将字符串转化为可执行的代码存在安全、执行函数的作用域、无法监控执行过程、无法断点和单步执行等问题，在以后的篇章中会优化
eval(this.code)

后续计划

Blockly

  • 自定义block块
  • blockly第三方组件使用
  • 接入js-interpreter，步骤运行block块
  • …(想到啥写啥)

开源项目GitHub链接

https://github.com/Wenbile/Child-Programming-Web

资源下载链接

你的点赞是我继续编写的动力

温温温B
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
write-vue3-from-scratch:学习vue学习vue写vue学习vue
05-14
文档 发展 $ npm install $ npm run test 执照 无论你想要什么
vue-from-scratch
03-05
从头开始的Vue 待办事项清单 配置webpack完成渲染一个简单的vue渲染的页面。简单的渲染出来一个Hello world。 配置webpack完成渲染.vue文件 增加HTML-Webpack-Plugin自动生成HTML文件 配置webpack完成devServer可以有一个开发的服务器 抽出webpack的manifest文件 抽出第三方依赖到vendeor 每次编译之前清空dist文件夹（clean-webpack-plugin） 将css单独抽出成为一个捆绑 先锋供应商的尺寸 webpack长缓存 Vue路由器 威克斯 TODO列表实现过程记录： 对于第一个功能的实现比较简单，就是配置进入以及输出，不牵扯到vue的单页文件，只是单纯的约会vue的依赖，以及new一个vue的实例，创建一个html文件，将打包生成好的文件约会到html。优化的点在于：可以约会一个webpa
Vue实现图形化积木式编程(十二)
温温温B的博客
07-23 904
执行Blockly生成代码
第三周笔记(2)
m0_66489617的博客
02-06 584
GUI图形用户界面编程 我们可以通过python提供的丰富的组件，快速的实现使用图形界面和用户交互 GUI编程类似于搭积木，将一个个组件放到窗口中 GUI编程整体描述 ...
2024年前端最全vue 音频可视化(2)，记一次字节跳动Web前端社招面试
最新发布
2401_84447297的博客
05-12 262
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
探索 Vue-Scratch-Card：为你的Web应用添加有趣的刮刮卡功能
gitblog_00089的博客
04-04 393
探索 Vue-Scratch-Card：为你的Web应用添加有趣的刮刮卡功能 项目地址:https://gitcode.com/ZENGzoe/vue-scratch-card Vue-Scratch-Card 是一个基于 Vue.js 的轻量级组件，它让你能在Web应用中轻松集成刮刮卡功能。这款开源项目旨在提供一种简单、灵活的方式来创建互动式的刮刮卡效果，无论是用于促销活动，还是增加用户体验，都...
Vue实现图形化积木式编程(十)
温温温B的博客
10-24 1950
Blockly自定义块
vue实现Scratch3.0（sb3）文件播放
u010529525的博客
12-17 4856
当前项目需要用到Scratch3.0的二次开发，由于Scratch是由react开发，但是本开发项目前端框架为vue，需要实现将gui绘制的sb3文件在vue项目中播放，配置如下： 1、需要在vue项目中引入以下包： "scratch-vm":"0.2.0-prerelease.20191119203901", "scratch-render":"0.1.0-prerelease.20...
Vue实现图形化积木式编程Vue前端源码
08-31
少儿编程前端，基于Vue+Vuetify+Blockly+Babylon.js的个人开源项目
Vue实现图形化积木式编程Thinkjs后端源码
08-31
少儿编程后端，基于Node.js+ThinkJS+MySQL的个人开源项目
vue+vuex实现可视化图形编辑器
05-13
vue+vuex实现可视化图形编辑器，支出底图上传，8点控制拖拽，动态绑定数据显示。（需要服务器环境才可以运行）
基于vue的移动端页面可视化搭建工具
08-10
基于 vue 的移动端页面可视化搭建工具
Vue.extend 编程式插入组件的实现
10-15
主要介绍了Vue.extend 编程式插入组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-router实现编程式导航的代码实例
10-17
今天小编就为大家分享一篇关于vue-router实现编程式导航的代码实例，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
Vue3 + vite 中使用 scratch-block 记录
qq_43715736的博客
05-17 505
记录了在vue3+vite环境中集成开发scratch-block的步骤。包括了安装库、修改源码、demo。
模拟Scratch的可视化脚本编辑器（一）
wangnan8015的专栏
10-22 7699
目录简介DemoBlock定义格式类目定义Block类型Block外观类型Block定义自行扩展BlockDemo运行步骤 简介 儿童编程学习工具Scratch最先由麻省理工学院2007年就推出,目前谷歌正在与麻省理工合作开发下一代Scratch。 由于喜欢Scratch的可视化脚本编辑方式，于是决定模拟做一个更为通用化的脚本编辑模块，不仅仅用于儿童编辑学习，可以通过定制变成各种类型脚本编辑工具...
vue-springboot基于Java的scratch在线学习知识分享网站系统
豆包程序员
12-31 357
建立一个方便管理的学习网站系统的平台，方便信息资源的共享，提高管理的效率，为管理员和会员提供了学习网站系统的辅助服务。本系统将最大程度地提高管理者整体的工作效率和工作质量，降低管理和工作的成本，改善工作的环境和条件，提高管理者的管理和决策的自动化和科学化水平。从数据挖掘的角度出发，了解信息管理系统的作用，对学习网站的过程以及用处进行更深一步的研究，数据的处理效率，以及具体的应用方向。详细技术：HTML+CSS+JS+springboot+SSM+vue+MYSQL+MAVEN。
【Vue】（IDE）基于Vue+Echarts的数据可视化界面
SKMIT的博客
10-04 5437
文章目录一、 开发环境和背景简介二、 效果三、 代码四、 设计总结 一、 开发环境和背景简介 这是自己的一个项目，组内有个哥们用VSCode去写html文件的格式，Vue中不太会导入js的文件格式，所以他的项目拿过来，运行之后空白一片。于是就自己看了Echarts文档重新编写，最后的效果在下面。 开发工具：IDE 2021.2 JDK1.8 。 Echarts官方文档 ElementUI官方文档 二、 效果 三、 代码 <template> <!-- 1 --> &lt
050Vue3+Blockly搭积木式可视化编程二次开发环境搭建
阿赛
12-27 1917
Blockly是一个将可视代码编辑器添加到Web和移动应用程序的库。 Blockly 编辑器使用互锁的图形块来表示代码概念，如变量，逻辑表达式，循环等。它使得用户可以不必关注语法细节就能直接按照编程原则进行编程。您可以通过调用 Blockly.inject（location，options） 来注入一个 Blockly 工作区。 第一个参数告诉 Blockly 将工作空间注入 DOM 的位置。 第二个参数是用于配置的名称-值对字典。 注入代码将选项字典解析为 Blockly.Options 的实例。您还可以
vue实现图形验证码登录
07-25
Vue可以通过使用第三方库来实现图形验证码登录。下面我会给你一个基本的实现步骤： 1. 首先，需要安装一个适用于Vue的图形验证码库，比如`vue-verify-code`。通过运行以下命令进行安装： ``` npm install vue-verify-code ``` 2. 在你的Vue组件中，导入所需的库，并使用它来生成图形验证码。在模板中添加一个`<verify-code>`标签来展示图形验证码，如下所示： ```vue <template> <div> <verify-code ref="verifyCode"></verify-code> <button @click="refreshCode">刷新验证码</button> <input type="text" v-model="inputCode" placeholder="请输入验证码"> <button @click="verifyCode">验证</button> </div> </template> <script> import VerifyCode from 'vue-verify-code'; export default { components: { VerifyCode }, data() { return { inputCode: '' }; }, methods: { refreshCode() { this.$refs.verifyCode.refresh(); }, verifyCode() { const result = this.$refs.verifyCode.verify(this.inputCode); if (result) { // 验证通过，执行登录操作 // ... } else { // 验证失败，提示用户重新输入 // ... } } } } </script> ``` 3. 上述代码中，通过`this.$refs.verifyCode.refresh()`方法可以刷新验证码，而`this.$refs.verifyCode.verify(this.inputCode)`方法可以用于验证用户输入的验证码是否正确。根据验证结果，你可以执行相应的操作。 请注意，上述代码只是一个简单的示例，你需要根据具体的需求进行适当的修改和扩展。另外，确保你已经在项目中导入了相关的CSS文件，以使图形验证码正常显示。 希望以上内容对你有所帮助！如有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

温温温B

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值