PHP和Vue融合开发脑图功能的奇妙之处解析

// 获取节点数据接口
app.get('/nodes', (req, res) => {
  // 从数据库中查询节点数据
  const nodes = db.query("SELECT * FROM nodes");
  res.send(nodes);
});

// 添加节点数据接口
app.post('/nodes', (req, res) => {
  // 从请求中获取节点数据
  const newNode = req.body;
  // 将节点数据插入数据库
  db.query(`INSERT INTO nodes (text, parentId, x, y) VALUES ('${newNode.text}', ${newNode.parentId}, ${newNode.x}, ${newNode.y})`);
  res.send("Node added successfully");
});

// 更新节点数据接口
app.put('/nodes/:id', (req, res) => {
  const nodeId = req.params.id;
  // 从请求中获取节点数据
  const updatedNode = req.body;
  // 更新数据库中指定id的节点数据
  db.query(`UPDATE nodes SET text = '${updatedNode.text}', x = ${updatedNode.x}, y = ${updatedNode.y} WHERE id = ${nodeId}`);
  res.send("Node updated successfully");
});

// 删除节点数据接口
app.delete('/nodes/:id', (req, res) => {
  const nodeId = req.params.id;
  // 从数据库中删除指定id的节点数据
  db.query(`DELETE FROM nodes WHERE id = ${nodeId}`);
  res.send("Node deleted successfully");
});

// Node组件
Vue.component('node', {
  props: ['node'],
  template: `
    <div :style="{left: node.x + 'px', top: node.y + 'px'}" class="node">
      <input v-model="node.text" :disabled="!node.editable" />
    </div>
  `
});

// Mindmap组件
Vue.component('mindmap', {
  props: ['nodes'],
  template: `
    <div class="mindmap">
      <node v-for="node in nodes" :key="node.id" :node="node"></node>
    </div>
  `,
  mounted() {
    // 调用后端接口，获取节点数据并绑定到组件上
    fetch('/nodes')
      .then(response => response.json())
      .then(data => {
        this.nodes = data;
      });
  }
});

// 创建Vue实例
new Vue({
  el: '#app',
  template: `
    <div id="app">
      <mindmap></mindmap>
    </div>
  `
});