PHP和Vue的默契搭档：完美实现脑图功能

1. 概述

本文介绍了如何使用PHP和Vue构建一个脑图应用，实现节点之间的连接和数据存储。脑图是以树状结构为基础，具有草图式、非线性表述的图形组织方式，适合表达复杂的思维关系。

2. 技术栈

本应用使用PHP作为后端数据处理语言，使用Vue作为前端展示框架，同时使用axios和localStorage进行数据传输和存储。

2.1 PHP

PHP是一种广泛使用的开源服务器端脚本语言，与HTML配合使用可以快速构建一个功能强大的Web应用程序。在本应用中，PHP用于实现数据的增删改查等基本操作，具体代码如下：

  //连接数据库
  $conn = mysqli_connect($host,$user,$password,$database,$port);
  if (!$conn) {
    die("连接失败: " . mysqli_connect_error());
  }
  //查询数据
  $sql = "SELECT * FROM data";
  $result = mysqli_query($conn, $sql);
  $dataArr = array();
  while($row = mysqli_fetch_assoc($result)) {
    array_push($dataArr,$row);
  }
  //更新数据
  $sql = "UPDATE data SET content='$content', parent='$parent' WHERE id='$id'";
  mysqli_query($conn, $sql);
  //添加数据
  $sql = "INSERT INTO data (content,parent) VALUES ('$content','$parent')";
  mysqli_query($conn, $sql);
  //删除数据
  $sql = "DELETE FROM data WHERE id='$id'";
  mysqli_query($conn, $sql);

2.2 Vue

Vue是一个渐进式JavaScript框架，通过组件化实现代码的模块化和可复用性。在本应用中，Vue用于构建前端页面，包括脑图节点的展示和交互，具体代码如下：

  //声明Vue对象
  var app = new Vue({
    el: '#app',
    data: {
      nodes: [],
      currentNode: {},
      currentInput: ''
    },
    methods: {
      selectNode: function(node) {
        this.currentNode = node;
        this.currentInput = node.content;
      },
      updateNode: function() {
        axios.post('/update.php', {
          id: this.currentNode.id,
          content: this.currentInput,
          parent: this.currentNode.parent
        })
        .then(function (response) {
          app.initData();
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      deleteNode: function() {
        axios.post('/delete.php', {
          id: this.currentNode.id
        })
        .then(function (response) {
          app.initData();
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      addNode: function(parent) {
        axios.post('/add.php', {
          content: 'New Node',
          parent: parent
        })
        .then(function (response) {
          app.initData();
        })
        .catch(function (error) {
          console.log(error);
        });
      },
      initData: function() {
        axios.get('/data.php')
        .then(function (response) {
          app.nodes = response.data;
        })
        .catch(function (error) {
          console.log(error);
        });
      }
    },
    mounted: function() {
      this.initData();
    }
  })

3. 实现功能

本应用实现了以下三个基本功能：节点的增加、删除和修改。

3.1 节点的增加

用户可以通过输入框输入新节点的名称，然后在树状图中选择需要增加节点的父节点，点击“Add”按钮即可增加一个新节点。新增节点的父节点是当前选中的节点。

在Vue中，增加节点需要调用addNode方法，实现代码如下：

  addNode: function(parent) {
    axios.post('/add.php', {
      content: 'New Node',
      parent: parent
    })
    .then(function (response) {
      app.initData();
    })
    .catch(function (error) {
      console.log(error);
    });
  }

3.2 节点的删除

用户可以选择需要删除的节点，然后点击“Delete”按钮即可删除该节点。同时，删除节点会使其子节点一并删除。

在Vue中，删除节点需要调用deleteNode方法，具体代码如下：

  deleteNode: function() {
    axios.post('/delete.php', {
      id: this.currentNode.id
    })
    .then(function (response) {
      app.initData();
    })
    .catch(function (error) {
      console.log(error);
    });
  }

3.3 节点的修改

用户可以选择需要修改的节点，鼠标双击节点即可进入编辑模式，可以修改该节点的名称。修改完成后，点击“OK”按钮即可保存修改结果。

在Vue中，修改节点需要调用updateNode方法，具体代码如下：

  updateNode: function() {
    axios.post('/update.php', {
      id: this.currentNode.id,
      content: this.currentInput,
      parent: this.currentNode.parent
    })
    .then(function (response) {
      app.initData();
    })
    .catch(function (error) {
      console.log(error);
    });
  }

4. 总结

本文介绍了如何使用PHP和Vue构建一个脑图应用，实现节点的增加、删除和修改等基本功能。PHP作为后端数据处理语言，Vue作为前端展示框架，使得开发、维护和测试都变得更加简单高效。通过本应用的实现，可以体会到PHP和Vue作为默契搭档，如何实现高效的数据交互和页面渲染。