Lihat reka bentuk PHP dan Vue yang indah dalam pembangunan fungsi pemetaan minda

Intai reka bentuk PHP dan Vue yang indah dalam pembangunan fungsi peta otak

Peta otak memainkan peranan penting dalam seni bina maklumat dan pemetaan minda, yang boleh membantu kita mengatur dan mengatur pemikiran kita, serta memahami korelasi dengan cepat dan hierarki maklumat. Apabila membangunkan fungsi pemetaan otak, PHP dan Vue ialah dua alat teknikal yang biasa digunakan. Artikel ini akan memperkenalkan reka bentuk indah mereka dalam pembangunan fungsi pemetaan minda dan menyediakan beberapa contoh kod untuk rujukan.

1. Reka bentuk bahagian belakang (PHP)

Dalam proses pembangunan bahagian belakang, kami terutamanya perlu mempertimbangkan reka bentuk aspek berikut: penyimpanan dan pemprosesan data, penambahan data, pemadaman, pengubahsuaian dan penghantaran dan pertukaran data .

Pertama, penyimpanan dan pemprosesan data. Dalam fungsi peta otak, kita perlu menyimpan data peta otak pengguna dalam pangkalan data untuk operasi dan paparan seterusnya. Kita boleh menggunakan fungsi berkaitan pangkalan data dan pernyataan SQL yang disediakan oleh PHP untuk menyimpan dan memproses data. Di bawah ialah contoh kod mudah untuk memasukkan data nod peta minda ke dalam pangkalan data.

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

Kedua, tambah, padam, ubah suai dan semak data. Dalam fungsi peta otak, pengguna mungkin perlu menambah, memadam, mengubah suai dan bertanya nod. Kami boleh mereka bentuk fungsi atau antara muka PHP yang sepadan mengikut operasi pengguna. Di bawah ialah contoh kod mudah untuk memadam data nod peta minda daripada pangkalan data.

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

Akhir sekali, penghantaran dan pertukaran data. Dalam fungsi peta otak, penghantaran dan pertukaran data perlu dijalankan di antara hujung depan dan belakang. Kami boleh menggunakan antara muka API PHP untuk merealisasikan penghantaran dan pertukaran data. Di bawah ialah contoh kod mudah untuk mendapatkan data nod peta otak dalam pangkalan data dan mengembalikannya ke bahagian hadapan.

<?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. Reka bentuk hadapan (Vue)

Dalam proses pembangunan bahagian hadapan, kami terutamanya perlu mempertimbangkan aspek reka bentuk berikut: operasi dan pengikatan DOM, pengemaskinian dan pemaparan data, serta pengikatan dan tindak balas acara.

Pertama, manipulasi dan pengikatan DOM. Dalam fungsi peta otak, kita perlu mencipta dan mengemas kini DOM nod secara dinamik, dan mengikat peristiwa yang sepadan. Vue menyediakan banyak arahan dan fungsi cangkuk kitaran hayat untuk membantu kami melaksanakan fungsi ini. Di bawah ialah contoh kod mudah untuk mencipta DOM nod peta minda.

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

Kedua, pengemaskinian dan rendering data. Dalam fungsi peta otak, pengguna boleh melakukan operasi seperti menambah, memadam, mengubah suai dan menanyakan nod Kami perlu mengemas kini dan memberikan data yang sepadan dengan tepat pada masanya. Data responsif Vue dan fungsi harta yang dikira boleh membantu kami mengemas kini dan memberikan data. Di bawah ialah contoh kod mudah untuk menambah nod peta minda baharu.

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

Akhir sekali, pengikatan dan sambutan acara. Dalam fungsi peta otak, pengguna mungkin perlu menyeret, menukar saiz, klik, dsb. pada nod Kita perlu mengikat dan bertindak balas kepada fungsi yang sepadan untuk acara yang sepadan. Fungsi pengikatan peristiwa dan kaedah Vue boleh membantu kami melaksanakan pengikatan dan tindak balas acara. Di bawah ialah contoh kod mudah untuk menyeret nod peta minda.

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

Ringkasnya, reka bentuk indah PHP dan Vue dalam pembangunan fungsi peta otak dicerminkan dalam penyimpanan dan pemprosesan data bahagian belakang, penambahan, pemadaman, pengubahsuaian, dan penghantaran dan pertukaran data, serta pengendalian dan pengikatan DOM bahagian hadapan, Kemas kini dan pemaparan data serta pengikatan dan tindak balas acara. Dengan reka bentuk dan penggunaan yang betul, kami boleh membangunkan fungsi pemetaan minda yang kaya dengan ciri dan mesra pengguna.

Atas ialah kandungan terperinci Lihat reka bentuk PHP dan Vue yang indah dalam pembangunan fungsi pemetaan minda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!