Maison >développement back-end >tutoriel php >La solution ultime : utiliser PHP et Vue pour développer des fonctions innovantes de mind mapping

La solution ultime : utiliser PHP et Vue pour développer des fonctions innovantes de mind mapping

WBOYoriginal: 2023-08-16 08:07:52902parcourir

La méthode ultime : utiliser PHP et Vue pour développer des fonctions innovantes de cartographie cérébrale

Introduction :
Avec l'avènement de l'ère de l'explosion de l'information, les gens doivent organiser et traiter des quantités massives d'informations plus efficacement. En tant que méthode d'organisation visuelle de l'information, la cartographie mentale est largement utilisée dans des domaines tels que la cartographie mentale, la gestion de projet et l'organisation des connaissances. L'utilisation de PHP et Vue pour développer des fonctions innovantes de cartographie cérébrale améliorera encore l'efficacité de l'organisation et de la gestion de l'information. Cet article présentera comment utiliser PHP et Vue pour implémenter une fonction de cartographie cérébrale simple et puissante, et joindra des exemples de code correspondants.

Principes de base du fonctionnement de la carte cérébrale
La carte cérébrale est une forme graphique qui affiche les relations entre les informations dans une structure arborescente. Dans une carte mentale, il y a toujours un nœud racine, et il peut y avoir de nombreux sous-nœuds sous le nœud racine, et il peut y avoir davantage de sous-nœuds sous les sous-nœuds, et ainsi de suite. En faisant glisser et en connectant différents nœuds, différentes organisations d'informations et établissement de relations peuvent être réalisées.
Utilisez PHP côté serveur
PHP est un langage de script côté serveur largement utilisé qui peut fournir une prise en charge des données et implémenter un traitement logique simple pour le front-end. Dans cette fonction de carte mentale, nous pouvons utiliser PHP pour stocker et obtenir des informations sur les nœuds.

Tout d'abord, nous devons créer une table de base de données pour stocker les informations sur les nœuds. Vous pouvez utiliser l'instruction SQL suivante pour créer une simple table de nœuds :

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

Ensuite, nous pouvons utiliser la bibliothèque d'extension PDO fournie par PHP pour nous connecter à la base de données et écrire la fonction d'interface correspondante que le front-end appellera. L'exemple de code est le suivant :

<?php

$dbHost = 'localhost';
$dbName = 'your_database_name';
$dbUser = 'your_username';
$dbPass = 'your_password';

$pdo = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8mb4", $dbUser, $dbPass);

function getNodes($parentId = null) {
    global $pdo;
    
    $query = $pdo->prepare("SELECT * FROM nodes WHERE parent_id = ?");
    $query->execute([$parentId]);
    
    return $query->fetchAll(PDO::FETCH_ASSOC);
}

function addNode($title, $parent_id) {
    global $pdo;
    
    $query = $pdo->prepare("INSERT INTO nodes (title, parent_id) VALUES (?, ?)");
    $query->execute([$title, $parent_id]);
    
    return $pdo->lastInsertId();
}

Utiliser Vue pour le front-end
Vue est un framework JavaScript populaire qui peut nous aider à créer des applications frontales interactives. Dans cette fonction de carte cérébrale, nous pouvons utiliser Vue pour afficher et interagir avec les nœuds.

Tout d'abord, nous devons présenter la bibliothèque CDN de Vue et créer une instance Vue. Ensuite, définissez un tableau de nœuds dans les données de l'instance Vue pour stocker les données de nœuds obtenues du serveur. En même temps, nous pouvons écrire des méthodes correspondantes pour gérer l’expansion et l’ajout de nœuds. L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Brainmap</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="node in nodes" @click="toggleNode(node)">
                {{ node.title }}
                <ul v-if="node.expanded">
                    <li v-for="child in getChildren(node.id)" @click.stop="toggleNode(child)">
                        {{ child.title }}
                    </li>
                </ul>
            </li>
        </ul>
        <input type="text" v-model="newNodeTitle">
        <button @click="addNode">Add</button>
    </div>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                nodes: [],
                newNodeTitle: ''
            },
            mounted() {
                this.loadNodes();
            },
            methods: {
                loadNodes() {
                    // 调用服务器端接口获取节点数据
                    axios.get('/api/getNodes.php')
                        .then(response => {
                            this.nodes = response.data;
                        })
                        .catch(error => {
                            console.error(error);
                        });
                },
                getChildren(parentId) {
                    return this.nodes.filter(node => node.parent_id === parentId);
                },
                toggleNode(node) {
                    node.expanded = !node.expanded;
                },
                addNode() {
                    const newNode = {
                        title: this.newNodeTitle,
                        parent_id: null,
                        expanded: false
                    };
                    
                    // 调用服务器端接口添加节点
                    axios.post('/api/addNode.php', newNode)
                        .then(response => {
                            newNode.id = response.data;
                            this.nodes.push(newNode);
                            this.newNodeTitle = '';
                        })
                        .catch(error => {
                            console.error(error);
                        });
                }
            }
        });
    </script>
</body>
</html>

Conclusion
En utilisant PHP et Vue pour développer des fonctions innovantes de cartographie cérébrale, nous pouvons implémenter un outil d'organisation et de gestion de l'information simple et puissant. PHP est responsable du stockage et de l'obtention des informations sur les nœuds, et Vue est responsable de l'affichage et de l'interaction. Cette fonction de carte cérébrale peut être largement utilisée dans la gestion de projets d'entreprise, l'organisation des connaissances personnelles et d'autres scénarios, et peut permettre une organisation et une sélection efficaces des informations. Nous espérons que les exemples de code contenus dans cet article pourront aider les lecteurs à comprendre et à appliquer le processus de développement de la fonction de carte mentale.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comprendre et appliquer les normes d'écriture PHP : établir une base solide pour une carrière de programmeurArticle suivant：Comprendre et appliquer les normes d'écriture PHP : établir une base solide pour une carrière de programmeur

Articles Liés

Voir plus