PHP和Vue结合开发脑图功能的案例研究与实践

<template>
  <div class="node">
    <div class="node-title">{{ title }}</div>
    <div class="node-children">
      <node v-for="child in children" :key="child.id" :data="child"></node>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Node',
  props: ['data'],
  data() {
    return {
      title: this.data.title,
      children: this.data.children,
    };
  },
};
</script>

<style>
.node {
  /* 样式省略 */
}
.node-title {
  /* 样式省略 */
}
.node-children {
  /* 样式省略 */
}
</style>

<?php
use PsrHttpMessageResponseInterface as Response;
use PsrHttpMessageServerRequestInterface as Request;
use SlimFactoryAppFactory;

require __DIR__ . '/vendor/autoload.php';

$app = AppFactory::create();

$app->get('/api/mindmap/{id}', function (Request $request, Response $response, $args) {
    // 根据id获取脑图数据
    $id = $args['id'];
    $mindmap = [
        'id' => $id,
        'title' => '脑图标题',
        'children' => [
            // 子节点数据省略
        ],
    ];
    
    $response->getBody()->write(json_encode($mindmap));
    return $response->withHeader('Content-Type', 'application/json');
});

$app->run();

export default {
  data() {
    return {
      mindmap: null,
    };
  },
  mounted() {
    this.fetchMindmap();
  },
  methods: {
    async fetchMindmap() {
      const response = await fetch('/api/mindmap/1');
      const json = await response.json();
      this.mindmap = json;
    },
  },
};