Guider le pays : expérience des meilleures pratiques dans la création de fonctions de cartographie cérébrale avec PHP et Vue

Guide du pays : Meilleures pratiques d'expérience dans la création d'une fonction de carte cérébrale avec PHP et Vue

Introduction :
La carte cérébrale est un outil d'organisation de l'information et de réflexion couramment utilisé, qui peut nous aider à mieux clarifier nos pensées et organiser l'information. Dans le développement Web, nous pouvons utiliser les frameworks PHP et Vue pour créer des fonctions de carte mentale afin d'offrir aux utilisateurs une meilleure expérience de carte mentale. Cet article présentera comment utiliser PHP et Vue pour créer des fonctions de cartographie mentale et partagera quelques bonnes pratiques.

1. Conception de la base de données :
   Avant de créer la fonction de carte cérébrale, nous devons d'abord concevoir une structure de base de données pour stocker les données des nœuds de la carte cérébrale. Une méthode de conception courante consiste à utiliser deux tables, une table est utilisée pour stocker les informations de base des nœuds et l'autre table est utilisée pour stocker la relation hiérarchique entre les nœuds. Voici un exemple de code pour la structure de la table :

-- 创建节点表
CREATE TABLE `nodes` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) unsigned NOT NULL DEFAULT '0',
  `title` varchar(255) NOT NULL DEFAULT '',
  `content` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- 创建节点关系表
CREATE TABLE `node_relations` (
  `parent_id` int(11) unsigned NOT NULL,
  `child_id` int(11) unsigned NOT NULL,
  PRIMARY KEY (`parent_id`, `child_id`),
  FOREIGN KEY (`parent_id`) REFERENCES `nodes` (`id`) ON DELETE CASCADE,
  FOREIGN KEY (`child_id`) REFERENCES `nodes` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Développement back-end :
   Utilisez PHP pour créer une interface API back-end pour les appels front-end et l'interaction des données. Nous pouvons utiliser des frameworks PHP (comme Laravel) pour accélérer le développement. Ce qui suit est un exemple de code PHP pour obtenir des données de nœud :

<?php

namespace AppHttpControllers;

use AppModelsNode;
use IlluminateHttpRequest;

class NodeController extends Controller
{
    public function index()
    {
        $nodes = Node::with('children')->where('parent_id', 0)->get();

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

Dans le code ci-dessus, nous obtenons le nœud racine (le nœud avec parent_id comme 0) via le modèle Node et utilisons with ('children') méthode pour précharger les données du nœud enfant afin de réduire le nombre de requêtes ultérieures. parent_id为0的节点），并使用with('children')方法来预加载子节点数据，以减少后续查询次数。

3. 前端开发：
   使用Vue框架来构建前端界面和实现脑图的交互功能。以下是一段Vue组件代码示例，用于展示脑图数据：

<template>
  <div class="mindmap">
    <ul>
      <li v-for="node in nodes" :key="node.id">
        {{ node.title }}
        <Mindmap :nodes="node.children" v-if="node.children.length > 0" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Mindmap',
  props: ['nodes'],
  components: {
    Mindmap: () => import('./Mindmap.vue'),
  },
};
</script>

<style>
/* 样式省略 */
</style>

上述代码中，我们使用Vue的v-for指令来遍历节点数据，并使用递归方式来展示节点的层级关系。当节点还有子节点时，我们通过动态组件来递归地渲染子节点。

4. 数据交互：
   前端通过API接口来获取脑图数据，并将数据传递给Vue组件进行展示。以下是一段Vue代码示例，用于获取脑图数据：

<script>
export default {
  name: 'MindmapApp',
  data() {
    return {
      nodes: [],
    };
  },
  mounted() {
    this.fetchNodes();
  },
  methods: {
    fetchNodes() {
      // 调用后端API接口获取脑图数据
      axios.get('/api/nodes')
        .then((response) => {
          this.nodes = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

在上述代码中，我们使用axios库来发起异步请求，调用后端API接口获取脑图数据，并将数据赋值给Vue实例的nodes

Développement front-end :

Utilisez le framework Vue pour construire l'interface front-end et implémenter les fonctions interactives de la carte cérébrale. Ce qui suit est un exemple de code de composant Vue pour afficher les données de la carte mentale :


rrreee🎜Dans le code ci-dessus, nous utilisons l'instruction v-for de Vue pour parcourir les données du nœud et utiliser la récursivité pour afficher la hiérarchie du nœud. relation. Lorsqu'un nœud a des nœuds enfants, nous restituons de manière récursive les nœuds enfants via des composants dynamiques. 🎜
🎜Interaction des données : 🎜Le frontal obtient les données de la carte cérébrale via l'interface API et transmet les données au composant Vue pour affichage. Voici un exemple de code Vue pour obtenir des données de carte cérébrale : 🎜🎜rrreee🎜Dans le code ci-dessus, nous utilisons la bibliothèque axios pour lancer une requête asynchrone, appelons l'interface API backend pour obtenir la carte cérébrale data et attribuer des données à l'attribut nodes de l'instance Vue. 🎜🎜Résumé : 🎜Grâce à la coopération de PHP et Vue, nous pouvons facilement créer la fonction de carte cérébrale et offrir aux utilisateurs une meilleure expérience de carte cérébrale. Dans les projets réels, nous pouvons encore améliorer l'interactivité de la carte cérébrale en ajoutant des fonctions telles que l'édition de nœuds et le déplacement de nœuds. J'espère que le partage de cet article pourra inciter tout le monde à développer la fonction de carte cérébrale. Tout le monde est invité à explorer davantage de meilleures pratiques et d'expériences. 🎜

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!