登峰造极：探索PHP和Vue在脑图功能中的突出优势

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "your_database";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 插入新的脑图节点
$sql = "INSERT INTO mindmap (node_id, parent_node_id, content) VALUES (1, 0, 'PHP and Vue')";
if ($conn->query($sql) === TRUE) {
    echo "新的脑图节点已插入";
} else {
    echo "插入节点失败: " . $conn->error;
}

$conn->close();
?>

<?php
// 接收前端传递的数据
$node_id = $_POST['node_id'];
$new_content = $_POST['content'];

// 编辑脑图节点
$sql = "UPDATE mindmap SET content='$new_content' WHERE node_id=$node_id";
if ($conn->query($sql) === TRUE) {
    echo "脑图节点已编辑";
} else {
    echo "编辑节点失败: " . $conn->error;
}

$conn->close();
?>

<template>
  <div class="mindmap">
    <div v-for="node in nodes" :key="node.node_id">
      {{ node.content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nodes: [
        { node_id: 1, content: 'PHP and Vue' },
        { node_id: 2, content: 'Server-side and Client-side' },
        { node_id: 3, content: 'Backend and Frontend' },
      ]
    }
  }
}
</script>

<style scoped>
.mindmap {
  display: flex;
  flex-direction: column;
}
</style>