究極之道：使用PHP和Vue開發創新的腦圖功能
引言：
隨著資訊爆炸時代的來臨，人們需要更有效率地整理處理海量的資訊。腦圖作為一種視覺化的資訊組織方式，被廣泛應用於心智圖、專案管理和知識整理等領域。運用PHP和Vue開發創新的腦圖功能，將進一步提升資訊整理與管理的效率。本文將介紹如何利用PHP和Vue來實現一個簡單而強大的腦圖功能，並附上對應的程式碼範例。
首先，我們需要建立一個用於儲存節點資訊的資料庫表。可以使用下列SQL語句來建立一個簡單的節點表：
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;
然後，我們可以使用PHP提供的PDO擴充函式庫來連接資料庫，並編寫對應的介面函數供前端呼叫。範例程式碼如下：
<?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();
}首先，我們需要引進Vue的CDN函式庫，並建立一個Vue實例。然後，在Vue實例的資料中定義一個nodes數組，用來儲存從伺服器端取得的節點資料。同時，我們可以編寫對應的方法來處理節點的展開和新增。範例程式碼如下：
<!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>以上是究極之道：使用PHP和Vue開發創新的腦圖功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
