Building flexible mind mapping applications: the collision of PHP and Vue-PHP Tutorial-php.cn

Building flexible mind mapping applications: the collision of PHP and Vue

WBOY

Release： 2023-08-25 17:46:01

Original

882 people have browsed it

Building flexible mind mapping applications: the collision of PHP and Vue

Building a flexible mind map application: the collision of PHP and Vue

Brain map is a graphical mind map used to help us organize and Present complex thinking structures. In today's era of information explosion, an efficient brain mapping application has become an essential tool for us to process large amounts of information. This article will introduce how to use PHP and Vue to build a flexible and changeable mind mapping application.

1. Introduction

The mind mapping application mainly consists of two parts: back-end and front-end. The backend is responsible for handling data storage and management, and the frontend is responsible for presentation and user interaction. As a server-side scripting language, PHP is very suitable for handling back-end logic. Vue is a popular JavaScript framework that enables front-end interaction and data binding. Combining the powerful functions of PHP and Vue, we can build a feature-rich, flexible and versatile mind mapping application.

2. Back-end development

First, we need to create a database to store the brain map data. Suppose we have two tables, one is a node table (node), used to store information about each node; the other is a relationship table (relation), used to store the relationship between nodes. The following are the SQL statements to create node tables and relationship tables:

CREATE TABLE `node` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL,
  `parent_id` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

CREATE TABLE `relation` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `from_id` int(11) NOT NULL,
  `to_id` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

Copy after login

Next, we use PHP to implement the back-end logic. First, we need to connect to the database, which can be done using database operation classes such as PDO or mysqli. The following is a sample code for using PDO to connect to the database:

<?php
  $dsn = 'mysql:host=localhost;dbname=your_database;charset=utf8';
  $username = 'your_username';
  $password = 'your_password';

  try {
    $pdo = new PDO($dsn, $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  } catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage();
  }
?>

Copy after login

Then, we can write some PHP functions to handle the addition, deletion, modification and query operations of nodes and relationships. The following are some commonly used function examples:

<?php
  // 获取所有节点
  function getNodes($pdo) {
    $stmt = $pdo->query('SELECT * FROM `node`');
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
  }

  // 创建一个节点
  function createNode($pdo, $title, $parentId) {
    $stmt = $pdo->prepare('INSERT INTO `node` (`title`, `parent_id`) VALUES (?, ?)');
    $stmt->execute([$title, $parentId]);
    return $pdo->lastInsertId();
  }

  // 更新节点的标题
  function updateNode($pdo, $id, $title) {
    $stmt = $pdo->prepare('UPDATE `node` SET `title` = ? WHERE `id` = ?');
    $stmt->execute([$title, $id]);
    return $stmt->rowCount();
  }

  // 删除一个节点及其所有子节点
  function deleteNode($pdo, $id) {
    // 先删除子节点
    $stmt = $pdo->prepare('DELETE FROM `node` WHERE `parent_id` = ?');
    $stmt->execute([$id]);

    // 再删除自己
    $stmt = $pdo->prepare('DELETE FROM `node` WHERE `id` = ?');
    $stmt->execute([$id]);

    return $stmt->rowCount();
  }
?>

Copy after login

3. Front-end development

In the front-end part, we will use Vue to realize the display and interaction of brain maps. First, we need to introduce Vue and other necessary library files. These files can be brought in using a CDN or npm installation. The following is a sample code that introduces Vue and other library files:

<!DOCTYPE html>
<html>
<head>
  <title>脑图应用</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <!-- 这里是脑图的展示区域 -->
  </div>
</body>
</html>

Copy after login

Then, we can write Vue components to realize the display and interaction of the brain map. The following is a simple example of a brain map component:

<script>
  Vue.component('mind-map', {
    data() {
      return {
        nodes: [] // 用于存储节点数据
      };
    },
    mounted() {
      // 获取节点数据
      axios.get('/api/nodes')
        .then(response => {
          this.nodes = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
    methods: {
      createNode(title, parentId) {
        // 创建新节点
        axios.post('/api/nodes', {
          title: title,
          parentId: parentId
        })
          .then(response => {
            // 添加到节点列表中
            this.nodes.push(response.data);
          })
          .catch(error => {
            console.error(error);
          });
      },
      updateNode(node) {
        // 更新节点标题
        axios.put(`/api/nodes/${node.id}`, {
          title: node.title
        })
          .then(response => {
            console.log(response.data);
          })
          .catch(error => {
            console.error(error);
          });
      },
      deleteNode(node) {
        // 删除节点
        axios.delete(`/api/nodes/${node.id}`)
          .then(response => {
            // 从节点列表中移除
            this.nodes.splice(this.nodes.indexOf(node), 1);
          })
          .catch(error => {
            console.error(error);
          });
      }
    },
    template: `
      <div>
        <ul>
          <li v-for="node in nodes" :key="node.id">
            <input type="text" v-model="node.title" @blur="updateNode(node)">
            <button @click="createNode(node.title, node.id)">添加子节点</button>
            <button @click="deleteNode(node)">删除节点</button>
          </li>
        </ul>
      </div>
    `
  });

  // 创建Vue实例
  new Vue({
    el: '#app'
  });
</script>

Copy after login

4. Run the application

Finally, we can run the application to see the effect. First, you need to deploy the backend code to the server and then open the frontend file in the browser. If everything is fine, you can see a simple mind mapping application. You can add, edit, and delete nodes, and their changes will be reflected in the mind map in real time.

To sum up, through the collision of PHP and Vue, we can build a flexible and changeable mind mapping application. PHP is responsible for back-end processing and storing data in the database; while Vue is responsible for front-end display and interaction, achieving instant interaction with users. I hope the sample code in this article can help you build an efficient mind mapping application and better organize information and manage thoughts.

The above is the detailed content of Building flexible mind mapping applications: the collision of PHP and Vue. For more information, please follow other related articles on the PHP Chinese website!