Cara terbaik: menggunakan PHP dan Vue untuk membangunkan fungsi pemetaan minda yang inovatif-tutorial php-php.cn

Cara terbaik: menggunakan PHP dan Vue untuk membangunkan fungsi pemetaan minda yang inovatif

WBOY

Lepaskan： 2023-08-16 08:08:02

asal

869 orang telah melayarinya

Cara terbaik: menggunakan PHP dan Vue untuk membangunkan fungsi pemetaan minda yang inovatif

Cara terbaik: menggunakan PHP dan Vue untuk membangunkan fungsi pemetaan otak yang inovatif

Pengenalan:
Dengan kemunculan era ledakan maklumat, orang ramai perlu mengatur dan memproses sejumlah besar maklumat dengan lebih cekap. Sebagai kaedah organisasi maklumat visual, pemetaan minda digunakan secara meluas dalam bidang seperti pemetaan minda, pengurusan projek, dan organisasi pengetahuan. Menggunakan PHP dan Vue untuk membangunkan fungsi pemetaan otak yang inovatif akan meningkatkan lagi kecekapan organisasi dan pengurusan maklumat. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi pemetaan otak yang mudah dan berkuasa, dan melampirkan contoh kod yang sepadan.

Prinsip asas fungsi peta otak
Peta otak ialah bentuk grafik yang memaparkan hubungan maklumat dalam struktur pokok. Dalam peta minda, sentiasa ada nod akar, dan boleh terdapat banyak subnod di bawah nod akar, dan boleh terdapat lebih banyak subnod di bawah subnod, dan seterusnya. Dengan menyeret dan menyambungkan nod yang berbeza, organisasi maklumat dan perhubungan yang berbeza boleh dicapai.
Menggunakan PHP di bahagian pelayan
PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas yang boleh memberikan sokongan data dan melaksanakan pemprosesan logik mudah untuk bahagian hadapan. Dalam fungsi peta minda ini, kita boleh menggunakan PHP untuk menyimpan dan mendapatkan maklumat nod.

Pertama, kita perlu mencipta jadual pangkalan data untuk menyimpan maklumat nod. Anda boleh menggunakan pernyataan SQL berikut untuk mencipta jadual nod ringkas:

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;

Salin selepas log masuk

Kemudian, kita boleh menggunakan perpustakaan sambungan PDO yang disediakan oleh PHP untuk menyambung ke pangkalan data dan menulis fungsi antara muka yang sepadan untuk bahagian hadapan untuk dipanggil. Kod sampel adalah seperti berikut:

<?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();
}

Salin selepas log masuk

Menggunakan Vue untuk bahagian hadapan
Vue ialah rangka kerja JavaScript yang popular yang boleh membantu kami membina aplikasi bahagian hadapan yang interaktif. Dalam fungsi peta otak ini, kita boleh menggunakan Vue untuk memaparkan dan berinteraksi dengan nod.

Pertama, kita perlu memperkenalkan perpustakaan CDN Vue dan mencipta tika Vue. Kemudian, tentukan tatasusunan nod dalam data contoh Vue untuk menyimpan data nod yang diperoleh daripada pelayan. Pada masa yang sama, kita boleh menulis kaedah yang sepadan untuk mengendalikan pengembangan dan penambahan nod. Kod sampel adalah seperti berikut:

<!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>

Salin selepas log masuk

Kesimpulan
Dengan menggunakan PHP dan Vue untuk membangunkan fungsi pemetaan otak yang inovatif, kami boleh melaksanakan alat organisasi dan pengurusan maklumat yang mudah dan berkuasa. PHP bertanggungjawab untuk menyimpan dan mendapatkan maklumat nod, dan Vue bertanggungjawab untuk paparan dan interaksi. Fungsi peta otak ini boleh digunakan secara meluas dalam pengurusan projek perusahaan, organisasi pengetahuan peribadi dan senario lain, dan boleh mencapai organisasi dan penyaringan maklumat yang cekap. Kami berharap contoh kod dalam artikel ini dapat membantu pembaca memahami dan mengaplikasikan proses pembangunan fungsi peta otak.

Atas ialah kandungan terperinci Cara terbaik: menggunakan PHP dan Vue untuk membangunkan fungsi pemetaan minda yang inovatif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!