Blockly结构变更事件及工作区结构存读后端数据库技术问询

Hey there! Let's walk through your Blockly integration questions—this is a really common scenario for web apps using Blockly, so I've got you covered.

一、Blockly结构变更对应的事件 #

Blockly的工作区（Workspace）会在结构发生变化时触发change事件，这个事件涵盖了几乎所有操作：创建积木、删除积木、移动积木、修改积木值等等。

你可以给工作区添加事件监听器来捕获这些变化，示例代码如下：

// 获取你的Blockly工作区实例
const workspace = Blockly.inject('blocklyDiv', { /* 配置项 */ });

// 添加变更监听
workspace.addChangeListener((event) => {
  // 可以通过event.type判断具体的变更类型，比如：
  // 'create'：积木被创建
  // 'delete'：积木被删除
  // 'move'：积木被移动
  // 'change'：积木属性被修改
  console.log('Workspace changed:', event.type);
  
  // 这里可以触发保存逻辑（建议加防抖，避免频繁请求）
});

💡 小贴士：因为用户操作会频繁触发change事件，建议给保存逻辑加个防抖函数，比如延迟500ms再执行保存，避免给后端发送太多请求：

let saveTimeout;
workspace.addChangeListener(() => {
  clearTimeout(saveTimeout);
  saveTimeout = setTimeout(() => {
    // 执行保存到后端的逻辑
    saveWorkspaceToBackend();
  }, 500);
});

二、获取工作区结构并提交到后端保存 #

要把工作区的结构转换成可存储的格式，Blockly提供了官方的序列化API：Blockly.serialization.workspaces.save()，它会返回一个JSON对象，包含工作区的所有积木配置。

示例代码如下：

function saveWorkspaceToBackend() {
  const workspace = Blockly.getMainWorkspace();
  // 序列化工作区为JSON
  const workspaceJson = Blockly.serialization.workspaces.save(workspace);
  
  // 用fetch发送POST请求到后端接口
  fetch('/api/save-blockly-workspace', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      // 如果需要身份验证，这里可以加token，比如：
      // 'Authorization': `Bearer ${userToken}`
    },
    body: JSON.stringify({
      userId: currentUserId, // 替换成你的用户ID
      workspaceData: workspaceJson
    })
  })
  .then(response => response.json())
  .then(data => {
    console.log('Workspace saved successfully:', data);
  })
  .catch(error => {
    console.error('Error saving workspace:', error);
  });
}

后端只需要接收这个JSON数据，存储到数据库对应的用户记录里就可以了。

三、用户登录后重新加载工作区结构 #

当用户登录后，你需要从后端获取该用户保存的工作区JSON，然后用Blockly.serialization.workspaces.load()把数据加载到工作区中。

示例代码如下：

function loadWorkspaceFromBackend(userId) {
  const workspace = Blockly.getMainWorkspace();
  
  // 从后端获取保存的工作区数据
  fetch(`/api/get-blockly-workspace?userId=${userId}`, {
    headers: {
      'Authorization': `Bearer ${userToken}` // 身份验证头
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.workspaceData) {
      // 清空现有工作区（可选，根据需求决定是否保留现有内容）
      workspace.clear();
      // 加载保存的工作区数据
      Blockly.serialization.workspaces.load(data.workspaceData, workspace);
      console.log('Workspace loaded successfully');
    }
  })
  .catch(error => {
    console.error('Error loading workspace:', error);
  });
}

// 用户登录成功后调用
loadWorkspaceFromBackend(currentUserId);

💡 注意：如果你的Blockly使用了自定义积木，要确保在加载工作区之前已经注册了这些自定义积木，否则会无法正确解析。

内容的提问来源于stack exchange，提问作者Ahmed Shehab