通过PHP和Vue构建出色的脑图功能应用实例

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

<?php
namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppModelsNode;

class NodeController extends Controller
{
    public function index()
    {
        $nodes = Node::all();

        return response()->json($nodes);
    }

    public function store(Request $request)
    {
        $node = new Node;
        $node->text = $request->input('text');
        $node->parent_id = $request->input('parent_id');
        $node->level = $request->input('level');

        $node->save();

        return response()->json($node);
    }

    public function update(Request $request, $id)
    {
        $node = Node::findOrFail($id);
        $node->text = $request->input('text');

        $node->save();

        return response()->json($node);
    }

    public function destroy($id)
    {
        $node = Node::findOrFail($id);
        $node->delete();

        return response()->json(['message' => 'Node deleted successfully']);
    }
}

<template>
  <div class="mindmap">
    <ul>
      <li v-for="node in nodes" :key="node.id">
        <input v-model="node.text" @blur="updateNodeText(node)">
        <button @click="addNode(node)">添加子节点</button>
        <button @click="deleteNode(node)">删除节点</button>
        <ul>
          <mindmap :nodes="node.children"></mindmap>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    nodes: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    updateNodeText(node) {
      // 使用API请求更新节点文本
    },
    addNode(parentNode) {
      // 使用API请求添加子节点
    },
    deleteNode(node) {
      // 使用API请求删除节点
    }
  }
};
</script>

<template>
  <div>
    <mindmap :nodes="nodes"></mindmap>
  </div>
</template>

<script>
import Mindmap from "./components/Mindmap.vue";

export default {
  components: {
    Mindmap
  },
  data() {
    return {
      nodes: []
    };
  },
  mounted() {
    // 使用API请求获取节点数据
  }
};
</script>