Créer des applications de mind mapping flexibles : la collision de PHP et Vue

Créer des applications de cartographie mentale flexibles et polyvalentes : la collision de PHP et Vue

La cartographie cérébrale est une carte mentale graphique utilisée pour nous aider à organiser et à présenter des structures de pensée complexes. À l’ère actuelle d’explosion de l’information, une application efficace de cartographie cérébrale est devenue un outil essentiel pour traiter de grandes quantités d’informations. Cet article explique comment utiliser PHP et Vue pour créer une application de cartographie mentale flexible et modifiable.

1. Introduction

L'application de cartographie cérébrale se compose principalement de deux parties : back-end et front-end. Le backend est responsable de la gestion du stockage et de la gestion des données, et le frontend est responsable de la présentation et de l'interaction avec l'utilisateur. En tant que langage de script côté serveur, PHP est très adapté à la gestion de la logique back-end. Vue est un framework JavaScript populaire qui permet une interaction frontale et une liaison de données. En combinant les puissantes fonctions de PHP et Vue, nous pouvons créer une application de cartographie mentale riche en fonctionnalités, flexible et polyvalente.

2. Développement back-end

Tout d'abord, nous devons créer une base de données pour stocker les données de la carte cérébrale. Supposons que nous ayons deux tables, l'une est une table de nœuds (nœud), utilisée pour stocker des informations sur chaque nœud ; l'autre est une table de relations (relation), utilisée pour stocker la relation entre les nœuds. Voici les instructions SQL pour créer la table de nœuds et la table de relations :

CREATE TABLE `node` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `parent_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

CREATE TABLE `relation` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `from_id` int(11) NOT NULL,
  `to_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

Ensuite, nous utilisons PHP pour implémenter la logique back-end. Tout d’abord, nous devons nous connecter à la base de données, ce qui peut être fait à l’aide de classes d’opérations de base de données telles que PDO ou mysqli. Voici un exemple de code pour utiliser PDO pour se connecter à la base de données :

<?php
  $dsn = 'mysql:host=localhost;dbname=your_database;charset=utf8';
  $username = 'your_username';
  $password = 'your_password';

  try {
    $pdo = new PDO($dsn, $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  } catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
  }
?>

Ensuite, nous pouvons écrire des fonctions PHP pour gérer les opérations d'ajout, de suppression, de modification et d'interrogation des nœuds et des relations. Voici quelques exemples de fonctions couramment utilisées :

<?php
  // 获取所有节点
  function getNodes($pdo) {
    $stmt = $pdo->query('SELECT * FROM `node`');
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
  }

  // 创建一个节点
  function createNode($pdo, $title, $parentId) {
    $stmt = $pdo->prepare('INSERT INTO `node` (`title`, `parent_id`) VALUES (?, ?)');
    $stmt->execute([$title, $parentId]);
    return $pdo->lastInsertId();
  }

  // 更新节点的标题
  function updateNode($pdo, $id, $title) {
    $stmt = $pdo->prepare('UPDATE `node` SET `title` = ? WHERE `id` = ?');
    $stmt->execute([$title, $id]);
    return $stmt->rowCount();
  }

  // 删除一个节点及其所有子节点
  function deleteNode($pdo, $id) {
    // 先删除子节点
    $stmt = $pdo->prepare('DELETE FROM `node` WHERE `parent_id` = ?');
    $stmt->execute([$id]);

    // 再删除自己
    $stmt = $pdo->prepare('DELETE FROM `node` WHERE `id` = ?');
    $stmt->execute([$id]);

    return $stmt->rowCount();
  }
?>

3. Développement front-end

Dans la partie front-end, nous utiliserons Vue pour réaliser l'affichage et l'interaction des cartes cérébrales. Tout d’abord, nous devons introduire Vue et d’autres fichiers de bibliothèque nécessaires. Ces fichiers peuvent être importés à l'aide d'une installation CDN ou npm. Ce qui suit est un exemple de code qui présente Vue et d'autres fichiers de bibliothèque :

<!DOCTYPE html>
<html>
<head>
  <title>脑图应用</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <!-- 这里是脑图的展示区域 -->
  </div>
</body>
</html>

Ensuite, nous pouvons écrire des composants Vue pour réaliser l'affichage et l'interaction de la carte cérébrale. Voici un exemple simple de composant de carte cérébrale :

<script>
  Vue.component('mind-map', {
    data() {
      return {
        nodes: [] // 用于存储节点数据
      };
    },
    mounted() {
      // 获取节点数据
      axios.get('/api/nodes')
        .then(response => {
          this.nodes = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    methods: {
      createNode(title, parentId) {
        // 创建新节点
        axios.post('/api/nodes', {
          title: title,
          parentId: parentId
        })
          .then(response => {
            // 添加到节点列表中
            this.nodes.push(response.data);
          })
          .catch(error => {
            console.error(error);
          });
      },
      updateNode(node) {
        // 更新节点标题
        axios.put(`/api/nodes/${node.id}`, {
          title: node.title
        })
          .then(response => {
            console.log(response.data);
          })
          .catch(error => {
            console.error(error);
          });
      },
      deleteNode(node) {
        // 删除节点
        axios.delete(`/api/nodes/${node.id}`)
          .then(response => {
            // 从节点列表中移除
            this.nodes.splice(this.nodes.indexOf(node), 1);
          })
          .catch(error => {
            console.error(error);
          });
      }
    },
    template: `
      <div>
        <ul>
          <li v-for="node in nodes" :key="node.id">
            <input type="text" v-model="node.title" @blur="updateNode(node)">
            <button @click="createNode(node.title, node.id)">添加子节点</button>
            <button @click="deleteNode(node)">删除节点</button>
          </li>
        </ul>
      </div>
    `
  });

  // 创建Vue实例
  new Vue({
    el: '#app'
  });
</script>

4. Exécutez l'application

Enfin, nous pouvons exécuter l'application pour voir l'effet. Tout d’abord, vous devez déployer le code backend sur le serveur, puis ouvrir le fichier frontend dans le navigateur. Si tout va bien, vous pouvez voir une simple application de cartographie mentale. Vous pouvez ajouter, modifier et supprimer des nœuds, et leurs modifications seront reflétées dans la carte mentale en temps réel.

Pour résumer, grâce à la collision de PHP et Vue, nous pouvons créer une application de cartographie mentale flexible et modifiable. PHP est responsable du traitement back-end et du stockage des données dans la base de données ; tandis que Vue est responsable de l'affichage et de l'interaction front-end, permettant une interaction instantanée avec les utilisateurs. J'espère que l'exemple de code de cet article pourra vous aider à créer une application de cartographie mentale efficace, à mieux organiser les informations et à gérer les pensées.

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!