Découvrez la conception exquise de PHP et Vue dans le développement de fonctions de cartographie mentale

Découvrez la conception exquise de PHP et Vue dans le développement des fonctions de carte cérébrale

Les cartes cérébrales jouent un rôle important dans l'architecture de l'information et la cartographie mentale. Elles peuvent nous aider à organiser et à organiser notre réflexion et à comprendre rapidement la corrélation. et la hiérarchie des informations. Lors du développement de fonctions de cartographie cérébrale, PHP et Vue sont deux outils techniques couramment utilisés. Cet article présentera leur conception exquise dans le développement des fonctions de carte cérébrale et fournira quelques exemples de code à titre de référence.

1. Conception back-end (PHP)

Dans le processus de développement back-end, nous devons principalement considérer la conception des aspects suivants : stockage et traitement des données, ajout, suppression, modification de données, transmission et échange de données. .

Tout d’abord, le stockage et le traitement des données. Dans la fonction de carte cérébrale, nous devons stocker les données de la carte cérébrale de l'utilisateur dans la base de données pour les opérations et l'affichage ultérieurs. Nous pouvons utiliser les fonctions liées aux bases de données et les instructions SQL fournies par PHP pour stocker et traiter les données. Vous trouverez ci-dessous un exemple de code simple pour insérer des données de nœud de carte mentale dans une base de données.

<?php
// 连接数据库
$conn = mysqli_connect("localhost", "username", "password", "database");

// 检查连接是否成功
if (mysqli_connect_errno()) {
    die("连接数据库失败: " . mysqli_connect_error());
}

// 获取前端传递过来的脑图节点数据
$nodeData = $_POST['nodeData'];

// 将节点数据插入到数据库中
$sql = "INSERT INTO nodetable (data) VALUES ('$nodeData')";

if (mysqli_query($conn, $sql)) {
    echo "节点数据插入成功";
} else {
    echo "节点数据插入失败: " . mysqli_error($conn);
}

// 关闭数据库连接
mysqli_close($conn);
?>

Deuxièmement, ajoutez, supprimez, modifiez et vérifiez les données. Dans la fonction de carte cérébrale, les utilisateurs peuvent avoir besoin d'ajouter, de supprimer, de modifier et d'interroger des nœuds. Nous pouvons concevoir des fonctions ou des interfaces PHP correspondantes en fonction des opérations de l'utilisateur. Vous trouverez ci-dessous un exemple de code simple pour supprimer les données des nœuds de carte mentale de la base de données.

<?php
// 连接数据库
$conn = mysqli_connect("localhost", "username", "password", "database");

// 检查连接是否成功
if (mysqli_connect_errno()) {
    die("连接数据库失败: " . mysqli_connect_error());
}

// 获取前端传递过来的节点ID
$nodeId = $_POST['nodeId'];

// 删除节点数据
$sql = "DELETE FROM nodetable WHERE id = $nodeId";

if (mysqli_query($conn, $sql)) {
    echo "节点数据删除成功";
} else {
    echo "节点数据删除失败: " . mysqli_error($conn);
}

// 关闭数据库连接
mysqli_close($conn);
?>

Enfin, la transmission et l'échange de données. Dans la fonction de carte cérébrale, la transmission et l'échange de données doivent être effectués entre le front-end et le back-end. Nous pouvons utiliser l'interface API de PHP pour réaliser la transmission et l'échange de données. Vous trouverez ci-dessous un exemple de code simple pour obtenir les données du nœud de la carte cérébrale dans la base de données et les renvoyer au front-end.

<?php
// 连接数据库
$conn = mysqli_connect("localhost", "username", "password", "database");

// 检查连接是否成功
if (mysqli_connect_errno()) {
    die("连接数据库失败: " . mysqli_connect_error());
}

// 查询节点数据
$sql = "SELECT * FROM nodetable";
$result = mysqli_query($conn, $sql);

// 将节点数据转换为JSON格式并返回给前端
$data = array();
while ($row = mysqli_fetch_assoc($result)) {
    $data[] = $row;
}
echo json_encode($data);

// 关闭数据库连接
mysqli_close($conn);
?>

2. Conception front-end (Vue)

Dans le processus de développement front-end, nous devons principalement prendre en compte les aspects de conception suivants : fonctionnement et liaison DOM, mise à jour et rendu des données, ainsi que liaison et réponse aux événements.

Tout d’abord, la manipulation et la liaison du DOM. Dans la fonction de carte mentale, nous devons créer et mettre à jour dynamiquement le DOM du nœud, et lier les événements correspondants. Vue fournit une multitude d'instructions et de fonctions de hook de cycle de vie pour nous aider à implémenter ces fonctions. Vous trouverez ci-dessous un exemple de code simple pour créer le DOM d'un nœud de carte mentale.

<template>
    <div class="node" v-for="node in nodes" :key="node.id">
        {{ node.data }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            nodes: []
        }
    },
    created() {
        // 从后端获取节点数据
        // ...

        // 将节点数据更新到页面中
        this.nodes = response.data;
    }
}
</script>

Deuxièmement, la mise à jour et le rendu des données. Dans la fonction de carte cérébrale, les utilisateurs peuvent effectuer des opérations telles que l'ajout, la suppression, la modification et l'interrogation de nœuds. Nous devons mettre à jour et restituer les données correspondantes en temps opportun. Les données réactives et les fonctions de propriétés calculées de Vue peuvent nous aider à mettre à jour et à restituer les données. Vous trouverez ci-dessous un exemple de code simple pour ajouter un nouveau nœud de carte mentale.

<template>
    <div>
        <input type="text" v-model="newNodeData">
        <button @click="addNode">添加节点</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            newNodeData: ""
        }
    },
    methods: {
        addNode() {
            // 向后端发送请求，将新节点数据存储到数据库中
            // ...

            // 更新页面中的节点数据
            this.nodes.push({
                id: response.data.id,
                data: this.newNodeData
            });

            // 清空输入框
            this.newNodeData = "";
        }
    }
}
</script>

Enfin, liaison d'événement et réponse. Dans la fonction de carte cérébrale, les utilisateurs peuvent avoir besoin de faire glisser, de modifier la taille, de cliquer, etc. sur les nœuds. Nous devons lier et répondre aux fonctions correspondantes pour les événements correspondants. Les fonctions de liaison d'événements et de méthodes de Vue peuvent nous aider à implémenter la liaison d'événements et la réponse. Vous trouverez ci-dessous un exemple de code simple pour faire glisser un nœud de carte mentale.

<template>
    <div class="node" v-for="node in nodes" :key="node.id" @mousedown="startDrag">
        {{ node.data }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            nodes: []
        }
    },
    methods: {
        startDrag(event) {
            // 记录鼠标的初始位置和节点的初始位置
            // ...

            // 监听鼠标的移动和松开事件
            document.addEventListener('mousemove', this.drag);
            document.addEventListener('mouseup', this.stopDrag);
        },
        drag(event) {
            // 根据鼠标的移动距离计算节点的新位置
            // ...

            // 更新节点的位置
            // ...
        },
        stopDrag(event) {
            // 移除鼠标的移动和松开事件监听
            document.removeEventListener('mousemove', this.drag);
            document.removeEventListener('mouseup', this.stopDrag);
        }
    }
}
</script>

En résumé, la conception exquise de PHP et Vue dans le développement des fonctions de carte cérébrale se reflète dans le stockage et le traitement des données back-end, l'ajout, la suppression, la modification, la transmission et l'échange de données, ainsi que le fonctionnement et la liaison du DOM frontal, la mise à jour et le rendu des données ainsi que la liaison et la réponse des événements. Avec une conception et une utilisation appropriées, nous pouvons développer des fonctions de cartographie mentale riches en fonctionnalités et conviviales.

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!