PHP 및 Vue를 통해 우수한 두뇌 매핑 기능 응용 사례 구축-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

PHP 및 Vue를 통해 우수한 두뇌 매핑 기능 응용 사례 구축

王林

Aug 26, 2023 pm 02:28 PM

php vue 뇌 매핑 애플리케이션

PHP 및 Vue를 통해 우수한 두뇌 매핑 기능 응용 사례 구축

PHP 및 Vue를 통해 뛰어난 두뇌 맵 기능 응용 사례 구축

소개:
브레인 맵은 지식 관리 및 마인드 매핑에 널리 사용되는 도구로, 복잡한 정보를 구성하고 관계를 명확하게 하며 신속하게 구축하고 구성하는 데 도움이 됩니다. 정신적 프레임워크를 문서화합니다. 이 기사에서는 PHP와 Vue를 사용하여 효율적이고 강력한 마인드 매핑 애플리케이션을 구축하는 방법을 소개합니다.

1. 기술 선택

PHP: 널리 사용되는 서버 측 언어인 PHP는 광범위한 지원과 대규모 커뮤니티를 갖추고 있으며 데이터베이스와 쉽게 상호 작용하고 백그라운드 로직을 처리하며 API 인터페이스를 제공할 수 있습니다.
Vue: 최신 JavaScript 프레임워크인 Vue는 간결한 구문, 효율적인 렌더링 및 탁월한 구성 요소화 기능을 갖추고 있어 대화형 프런트 엔드 페이지를 구축하는 데 매우 적합합니다.
MySQL: 일반적으로 사용되는 관계형 데이터베이스인 MySQL은 안정적인 데이터 저장과 효율적인 쿼리 기능을 제공하며 뇌 지도의 노드 데이터를 저장하고 관리하는 데 적합합니다.

2. 구현 단계

데이터베이스 설계
뇌지도의 노드 데이터를 저장하고 관리하려면 데이터베이스 테이블을 설계해야 합니다. 다음 필드를 포함하는 nodes라는 테이블을 생성할 수 있습니다: id(노드 ID, 자동 증가 기본 키), parent_id( 상위 노드 ID), text(노드 텍스트 콘텐츠), level(노드 수준) 등 nodes的表，包含以下字段：id（节点ID，自增主键）、parent_id（父节点ID）、text（节点文本内容）、level（节点所在层级）等。

创建表的SQL语句如下：

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

로그인 후 복사

后台API
使用PHP编写后台API，提供对节点数据的CRUD操作。我们可以使用框架如Laravel或Slim来简化开发过程。

例如，我们创建一个NodeController控制器，其中包含以下方法：

index()：获取节点列表。
store(Request $request)：创建新节点。
update(Request $request, $id)：更新节点。
destroy($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']);
    }
}

로그인 후 복사

前端界面
使用Vue构建前端界面，通过调用后台API获取并渲染节点数据，实现脑图的展示和编辑功能。

首先，我们创建一个Vue组件Mindmap.vue，用于展示脑图。组件的结构如下：

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

로그인 후 복사

然后，我们在根组件中引入Mindmap组件，并通过API获取节点数据：

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

로그인 후 복사

在mounted钩子函数中，我们可以使用axios或fetch等工具发送HTTP请求，获取后台API返回的节点数据，并赋值给根组件的nodes

테이블을 생성하는 SQL 문은 다음과 같습니다.

rrreee

백엔드 API
PHP를 사용하여 노드 데이터에 대한 CRUD 작업을 제공하는 백엔드 API를 작성합니다. Laravel 또는 Slim과 같은 프레임워크를 사용하여 개발 프로세스를 단순화할 수 있습니다.

NodeController

index()

store(Request $request)

update(Request $request, $id)

destroy($id)

🎜코드 예: 🎜rrreee

Mindmap.vue