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`),
  FOREIGN KEY (`parent_id`) REFERENCES `nodes` (`id`)
);

CREATE TABLE `edges` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `from_node_id` int(11) NOT NULL,
  `to_node_id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  FOREIGN KEY (`from_node_id`) REFERENCES `nodes` (`id`),
  FOREIGN KEY (`to_node_id`) REFERENCES `nodes` (`id`)
);

<?php
  // 连接数据库
  $db = new mysqli('localhost', 'username', 'password', 'database');
  
  // 获取所有节点
  function getAllNodes() {
    global $db;
    $result = $db->query("SELECT * FROM `nodes`");
    $nodes = array();
    while ($row = $result->fetch_assoc()) {
      $nodes[] = $row;
    }
    return $nodes;
  }
  
  // 获取所有边
  function getAllEdges() {
    global $db;
    $result = $db->query("SELECT * FROM `edges`");
    $edges = array();
    while ($row = $result->fetch_assoc()) {
      $edges[] = $row;
    }
    return $edges;
  }
  
  // 设置HTTP响应标头
  header('Content-Type: application/json');
  
  // 处理API请求
  $method = $_SERVER['REQUEST_METHOD'];
  $path = $_SERVER['REQUEST_URI'];
  
  if ($method === 'GET' && $path === '/api/nodes') {
    echo json_encode(getAllNodes());
  } else if ($method === 'GET' && $path === '/api/edges') {
    echo json_encode(getAllEdges());
  } else {
    http_response_code(404);
    echo json_encode(array('error' => 'Not Found'));
  }
?>

<template>
  <div>
    <div id="mindmap"></div>
  </div>
</template>

<script>
  export default {
    mounted() {
      // 从API获取数据
      fetch('/api/nodes')
        .then(response => response.json())
        .then(nodes => {
          // 使用数据来绘制脑图
          const mindmap = new d3.Mindmap('#mindmap')
            .nodes(nodes)
            .edges(this.edges)
            .render();
        });
    },
    computed: {
      edges() {
        // 从API获取边
        return fetch('/api/edges')
          .then(response => response.json())
          .then(edges => edges);
      }
    }
  }
</script>

<style>
  #mindmap {
    width: 800px;
    height: 600px;
  }
</style>

php -S localhost:8000