Comment importer et exporter des données de carte mentale à l'aide de Vue et jsmind ?

Comment importer et exporter des données de carte mentale à l'aide de Vue et jsmind ?

La carte mentale est un outil de réflexion intuitif et efficace qui nous aide à organiser et organiser notre réflexion et à clarifier nos idées. Dans le développement Web, la combinaison de Vue et jsmind peut facilement réaliser l'importation et l'exportation de données de cartes mentales.

1. Présentez la bibliothèque et les styles jsmind

Tout d'abord, vous devez présenter la bibliothèque et les styles jsmind. Il peut être introduit via CDN, ou les fichiers liés à jsmind peuvent être téléchargés localement.

<!-- 引入jsmind库 -->
<script src="https://unpkg.com/jsmind/dist/jsmind.min.js"></script>
<!-- 引入jsmind样式 -->
<link rel="stylesheet" href="https://unpkg.com/jsmind/dist/jsmind.css">

2. Créer un composant Vue

Ensuite, nous créons un composant Vue pour afficher la carte mentale et gérer l'importation et l'exportation des données.

<template>
  <div>
    <!-- 展示思维导图的容器 -->
    <div id="jsmind_container"></div>
    
    <!-- 导入按钮 -->
    <input type="file" @change="importData" accept=".json">
    
    <!-- 导出按钮 -->
    <button @click="exportData">导出</button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在mounted钩子中初始化思维导图
    this.initJsmind();
  },
  methods: {
    initJsmind() {
      const mind = {
        meta: {
          name: '思维导图',
          author: '作者'
        },
        format: 'node_tree',
        data: [
          { id: 'root', isroot: true, topic: '主题', expanded: true, children: [] }
        ]
      };
      
      const container = document.getElementById('jsmind_container');
      this.jsmindInstance = jsMind.show(container, mind);
    },
    importData(event) {
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (event) => {
        const importedData = JSON.parse(event.target.result);
        this.jsmindInstance.show(importedData);
      };
      reader.readAsText(file);
    },
    exportData() {
      const exportedData = this.jsmindInstance.get_data('node_tree');
      const json = JSON.stringify(exportedData);
      const blob = new Blob([json], { type: 'application/json' });

      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.download = '思维导图.json';
      link.click();
    }
  }
};
</script>

3. Analyser les données de la carte mentale

Le format de données de la carte mentale est le format JSON universel, et les données importées peuvent être analysées en objets js via la méthode JSON.parse. Ensuite, transmettez les données analysées à la méthode show de l'instance jsmind pour afficher la carte mentale importée.

importData(event) {
  const file = event.target.files[0];
  const reader = new FileReader();
  reader.onload = (event) => {
    const importedData = JSON.parse(event.target.result);
    this.jsmindInstance.show(importedData);
  };
  reader.readAsText(file);
}

4. Exporter les données de la carte mentale

L'exportation des données de la carte mentale nécessite de convertir les données de l'instance jsmind au format JSON et d'utiliser l'objet Blob pour créer un fichier. Enfin, le téléchargement du fichier est déclenché via la méthode clic de la balise a.

exportData() {
  const exportedData = this.jsmindInstance.get_data('node_tree');
  const json = JSON.stringify(exportedData);
  const blob = new Blob([json], { type: 'application/json' });

  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = '思维导图.json';
  link.click();
}

5. Terminez l'importation et l'exportation des données de la carte mentale

Grâce aux étapes ci-dessus, nous avons terminé la fonction d'utilisation de Vue et jsmind pour importer et exporter les données de la carte mentale. Les utilisateurs peuvent cliquer sur le bouton Importer pour sélectionner le fichier importé, puis cliquer sur le bouton Exporter pour télécharger les données de la carte mentale au format local au format JSON. Les utilisateurs peuvent également initialiser la carte mentale dans le hook monté du composant Vue pour étendre et optimiser davantage les fonctions.

<template>
  <div>
    <div id="jsmind_container"></div>
    <input type="file" @change="importData" accept=".json">
    <button @click="exportData">导出</button>
  </div>
</template>

<script>
export default {
  mounted() {
    this.initJsmind();
  },
  // ...
};
</script>

Les méthodes et exemples de code ci-dessus permettent d'utiliser Vue et jsmind pour importer et exporter des données dans des cartes mentales. De cette façon, nous pouvons traiter de manière flexible les données des cartes mentales et importer et exporter facilement des cartes mentales.

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!