Panduan Praktikal untuk Membangunkan Fungsi Peta Otak dengan PHP dan Vue

Panduan Praktikal untuk Membangunkan Fungsi Peta Otak dengan PHP dan Vue

Pengenalan:
Pemetaan otak ialah cara yang popular untuk mengatur maklumat, yang boleh mempersembahkan pemikiran kompleks atau hubungan pengetahuan dalam bentuk grafik. Dalam pembangunan aplikasi Internet moden, menambah fungsi pemetaan otak boleh meningkatkan pengalaman pengguna dan kesan visualisasi data. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pemetaan minda, dan menyediakan panduan praktikal dan contoh kod.

Pengenalan teknikal:

1. PHP: PHP ialah bahasa skrip sebelah pelayan yang digunakan untuk membangunkan aplikasi web. Dalam artikel ini, kami akan menggunakan PHP untuk mengendalikan interaksi pangkalan data dan permintaan API.
2. Vue: Vue ialah rangka kerja JavaScript popular yang digunakan untuk membina antara muka pengguna bahagian hadapan. Dalam artikel ini, kami akan menggunakan Vue untuk melaksanakan komponen bahagian hadapan peta otak.

Persediaan pembangunan:
Sebelum kita mula, kita perlu memastikan bahawa persekitaran pembangunan PHP dan Vue telah dipasang. Pakej yang diperlukan boleh dimuat turun dan dipasang di laman web rasmi.

Langkah 1: Reka bentuk pangkalan data
Pertama, kita perlu mereka bentuk pangkalan data untuk menyimpan data berkaitan peta otak. Berikut ialah contoh reka bentuk jadual pangkalan data yang dipermudahkan:

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`)
);

Langkah Kedua: Pembangunan Bahagian Belakang
Seterusnya, kami mula membangunkan kod bahagian belakang. Mula-mula, buat fail PHP bernama "api.php". Dalam fail ini, kami akan melaksanakan antara muka API sebelah pelayan.

<?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'));
  }
?>

Langkah Tiga: Pembangunan Bahagian Hadapan
Kini, kami mula membangunkan kod bahagian hadapan. Buat komponen Vue bernama "MindMap.vue". Dalam komponen ini, kami akan menggunakan teknologi pengikatan data dan komponenisasi Vue untuk melaksanakan fungsi interaktif peta otak.

<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>

Langkah 4: Jalankan aplikasi
Kini, kami telah menyelesaikan pembangunan kod bahagian belakang dan kod bahagian hadapan. Anda boleh menjalankan arahan berikut dalam baris arahan untuk memulakan pelayan setempat dan melihat aplikasi dalam tindakan:

php -S localhost:8000

Buka pelayar dan lawati "http://localhost:8000" untuk melihat fungsi pemetaan minda aplikasi.

Kesimpulan:
Artikel ini memperkenalkan panduan praktikal tentang cara menggunakan PHP dan Vue untuk membangunkan fungsi pemetaan otak, dan menyediakan contoh kod yang berkaitan. Dengan mempelajari artikel ini, anda boleh mempelajari cara menggunakan PHP dan Vue untuk melaksanakan interaksi pangkalan data dan fungsi komponen bahagian hadapan bagi peta otak. Saya harap artikel ini dapat membantu kerja pembangunan anda, dan saya mengucapkan selamat maju jaya!

Atas ialah kandungan terperinci Panduan Praktikal untuk Membangunkan Fungsi Peta Otak dengan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!