指南明灯：PHP和Vue在脑图功能开发中的实用经验

CREATE TABLE `nodes` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `parent_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
);

$app->post('/nodes', function () use ($app) {
  $data = $app->request->getBody();
  $node = new Node($data['title'], $data['parent_id']);
  $node->save();
  echo json_encode($node);
});

$app->put('/nodes/:id', function ($id) use ($app) {
  $data = $app->request->getBody();
  $node = Node::find($id);
  $node->title = $data['title'];
  $node->parent_id = $data['parent_id'];
  $node->save();
  echo json_encode($node);
});

$app->delete('/nodes/:id', function ($id) use ($app) {
  $node = Node::find($id);
  $node->delete();
  echo json_encode(['message' => 'Node deleted successfully']);
});

$app->get('/nodes/:id', function ($id) use ($app) {
  $node = Node::find($id);
  echo json_encode($node);
});

npm install vue vue-router axios

mounted() {
  axios.get('/api/nodes/1').then(response => {
    this.node = response.data;
  });
}

methods: {
  addNode(parentId) {
    axios.post('/api/nodes', {
      title: 'New Node',
      parent_id: parentId
    }).then(response => {
      this.node.children.push(response.data);
    });
  }
}

methods: {
  updateNode(node) {
    axios.put(`/api/nodes/${node.id}`, {
      title: node.title,
      parent_id: node.parent_id
    }).then(response => {
      // 更新成功
    });
  }
}

methods: {
  deleteNode(node) {
    axios.delete(`/api/nodes/${node.id}`).then(response => {
      this.node.children = this.node.children.filter(child => child.id !== node.id);
    });
  }
}