パーソナライズされたマインド マッピング ツールを構築する: PHP と Vue を組み合わせたアプリケーション

<?php

// 创建脑图节点
function createNode($data) {
    // 处理创建节点的逻辑
}

// 更新脑图节点
function updateNode($id, $data) {
    // 处理更新节点的逻辑
}

// 删除脑图节点
function deleteNode($id) {
    // 处理删除节点的逻辑
}

// 通过路由来判断请求类型和具体的操作
$method = $_SERVER['REQUEST_METHOD'];
switch ($method) {
    case 'POST':
        $data = $_POST;
        createNode($data);
        break;
    case 'PUT':
        $id = $_GET['id'];
        $data = $_POST;
        updateNode($id, $data);
        break;
    case 'DELETE':
        $id = $_GET['id'];
        deleteNode($id);
        break;
    default:
        // 其他请求类型的处理
        break;
}

CREATE TABLE `node` (
    `id` INT NOT NULL AUTO_INCREMENT,
    `parent_id` INT,
    `name` VARCHAR(255) NOT NULL,
    `content` TEXT,
    PRIMARY KEY (`id`)
);

// 初始化数据库连接
$db = new PDO('mysql:host=localhost;dbname=test;charset=utf8', 'username', 'password');

// 创建脑图节点
function createNode($data) {
    global $db;
    // 处理创建节点的逻辑，执行插入操作
    $sql = "INSERT INTO `node` (`parent_id`, `name`, `content`) VALUES (:parent_id, :name, :content);";
    $stmt = $db->prepare($sql);
    $stmt->execute($data);
    // 返回新创建节点的 id
    return $db->lastInsertId();
}

// 更新脑图节点
function updateNode($id, $data) {
    global $db;
    // 处理更新节点的逻辑，执行更新操作
    $sql = "UPDATE `node` SET `parent_id` = :parent_id, `name` = :name, `content` = :content WHERE `id` = :id;";
    $stmt = $db->prepare($sql);
    $stmt->bindParam(':id', $id);
    $stmt->execute($data);
}

// 删除脑图节点
function deleteNode($id) {
    global $db;
    // 处理删除节点的逻辑，执行删除操作
    $sql = "DELETE FROM `node` WHERE `id` = :id;";
    $stmt = $db->prepare($sql);
    $stmt->bindParam(':id', $id);
    $stmt->execute();
}

<template>
  <div>
    <div v-for="node in nodes" :key="node.id">
      <span>{{ node.name }}</span>
      <button @click="deleteNode(node.id)">删除</button>
    </div>
    <button @click="createNode()">新建节点</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nodes: [],
    };
  },
  methods: {
    createNode() {
      // 发送 Ajax 请求到后端创建节点
      // 刷新页面或者局部更新节点列表
    },
    deleteNode(id) {
      // 发送 Ajax 请求到后端删除节点
      // 刷新页面或者局部更新节点列表
    },
  },
  mounted() {
    // 发送 Ajax 请求获取节点列表
    // 更新节点列表
  },
};
</script>