Créez d'excellents exemples d'applications de fonctions de cartographie cérébrale via PHP et Vue

Créez d'excellents exemples d'applications de fonctions de carte cérébrale via PHP et Vue

Introduction :
La carte cérébrale est un outil largement utilisé dans la gestion des connaissances et la cartographie mentale. Elle peut nous aider à organiser des informations complexes, à clarifier les relations logiques et à créer et documenter rapidement. cadres mentaux. Dans cet article, nous présenterons comment créer une application de cartographie mentale efficace et puissante à l'aide de PHP et Vue.

1. Sélection technologique

1. PHP : en tant que langage côté serveur populaire, PHP dispose d'un support étendu et d'une énorme communauté. Il peut facilement interagir avec les bases de données, gérer la logique d'arrière-plan et fournir des interfaces API.
2. Vue : en tant que framework JavaScript moderne, Vue possède une syntaxe concise, un rendu efficace et d'excellentes capacités de création de composants, ce qui le rend très approprié pour créer des pages frontales hautement interactives.
3. MySQL : en tant que base de données relationnelle couramment utilisée, MySQL fournit un stockage de données fiable et des fonctions de requête efficaces, et convient au stockage et à la gestion des données de nœuds des cartes cérébrales.

2. Étapes de mise en œuvre

1. Conception de la base de données
   Afin de stocker et de gérer les données des nœuds de la carte cérébrale, nous devons concevoir une table de base de données. Nous pouvons créer une table nommée nodes, contenant les champs suivants : id (ID de nœud, clé primaire à incrémentation automatique), parent_id ( ID du nœud parent), text (contenu du texte du nœud), level (niveau du nœud), etc. 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`)
);

2. 后台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']);
    }
}

3. 前端界面
   使用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

L'instruction SQL pour créer la table est la suivante :

rrreee

API backend
Utilisez PHP pour écrire l'API backend afin de fournir des opérations CRUD sur les données des nœuds. Nous pouvons utiliser des frameworks comme Laravel ou Slim pour simplifier le processus de développement.

🎜🎜Par exemple, nous créons un contrôleur NodeController, qui contient les méthodes suivantes : 🎜

🎜index() : Récupère la liste des nœuds. 🎜🎜store(Request $request) : Créez un nouveau nœud. 🎜🎜update(Request $request, $id) : Mettre à jour le nœud. 🎜🎜destroy($id) : Supprimez le nœud. 🎜

🎜Exemple de code : 🎜rrreee

🎜Interface frontale🎜Utilisez Vue pour créer l'interface frontale, obtenir et restituer les données du nœud en appelant l'API d'arrière-plan et réaliser l'affichage et les fonctions d'édition de la carte cérébrale. 🎜🎜🎜Tout d'abord, nous créons un composant Vue Mindmap.vue pour afficher la carte mentale. La structure du composant est la suivante : 🎜rrreee🎜 Ensuite, nous introduisons le composant Mindmap dans le composant racine et obtenons les données du nœud via l'API : 🎜rrreee🎜Dans le monté code> fonction de hook, nous pouvons utiliser des outils tels que <code>axios ou fetch pour envoyer des requêtes HTTP afin d'obtenir les données du nœud renvoyées par l'API d'arrière-plan et les attribuer au nodes du composant racine. 🎜🎜À ce stade, nous avons terminé les principales étapes de la création d'une application de cartographie mentale via PHP et Vue. Dans le développement actuel, nous pouvons également ajouter d'autres fonctions, telles que le tri par glisser-déposer, la recherche de nœuds, l'exportation de cartes mentales, etc. 🎜🎜Conclusion : 🎜Créer des applications fonctionnelles de cartographie cérébrale via PHP et Vue est une tâche intéressante et stimulante, mais elle peut également apporter des connaissances riches et des résultats techniques. Grâce aux capacités de traitement logique d'arrière-plan et d'interaction avec les bases de données de PHP, ainsi qu'à la flexibilité et aux performances efficaces de Vue, nous pouvons créer d'excellentes applications de cartographie mentale et fournir des outils de gestion des connaissances puissants et conviviaux. Grâce à l'apprentissage et à la pratique, nous pouvons continuellement améliorer nos compétences et notre expérience en développement PHP et Vue et les appliquer à des projets plus passionnants. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!