Guiding the country: best practice experience in building brain map functions with PHP and Vue

Guide to the country: Best practical experience in building brain map functions with PHP and Vue

Introduction:
Brain map is a commonly used information organization and thinking tool , it can help us better clarify our thoughts and organize information. In web development, we can use PHP and Vue frameworks to build mind map functions to provide users with a better mind map experience. This article will introduce how to use PHP and Vue to build mind mapping functions, and share some best practices.

1. Database design:
   Before building the brain map function, we first need to design a database structure to store the node data of the brain map. A common design method is to use two tables, one table is used to store the basic information of nodes, and the other table is used to store the hierarchical relationship between nodes. The following is a sample code for the table structure:

-- 创建节点表
CREATE TABLE `nodes` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `parent_id` int(11) unsigned NOT NULL DEFAULT '0',
  `title` varchar(255) NOT NULL DEFAULT '',
  `content` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- 创建节点关系表
CREATE TABLE `node_relations` (
  `parent_id` int(11) unsigned NOT NULL,
  `child_id` int(11) unsigned NOT NULL,
  PRIMARY KEY (`parent_id`, `child_id`),
  FOREIGN KEY (`parent_id`) REFERENCES `nodes` (`id`) ON DELETE CASCADE,
  FOREIGN KEY (`child_id`) REFERENCES `nodes` (`id`) ON DELETE CASCADE
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2. Back-end development:
   Use PHP to build a back-end API interface for front-end calls and data interaction. We can use PHP frameworks (such as Laravel) to speed up development. The following is a PHP code example for obtaining node data:

<?php

namespace AppHttpControllers;

use AppModelsNode;
use IlluminateHttpRequest;

class NodeController extends Controller
{
    public function index()
    {
        $nodes = Node::with('children')->where('parent_id', 0)->get();

        return response()->json($nodes);
    }
}

In the above code, we obtain the root node (the node where parent_id is 0) through the Node model, and Use the with('children') method to preload child node data to reduce the number of subsequent queries.

3. Front-end development:
   Use the Vue framework to build the front-end interface and implement the interactive functions of the brain map. The following is a Vue component code example for displaying brain map data:

<template>
  <div class="mindmap">
    <ul>
      <li v-for="node in nodes" :key="node.id">
        {{ node.title }}
        <Mindmap :nodes="node.children" v-if="node.children.length > 0" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Mindmap',
  props: ['nodes'],
  components: {
    Mindmap: () => import('./Mindmap.vue'),
  },
};
</script>

<style>
/* 样式省略 */
</style>

In the above code, we use Vue’s v-for instruction to traverse the node data and use Recursively display the hierarchical relationship of nodes. When a node has child nodes, we render the child nodes recursively through dynamic components.

4. Data interaction:
   The front end obtains brain map data through the API interface and passes the data to the Vue component for display. The following is a Vue code example for obtaining brain map data:

<script>
export default {
  name: 'MindmapApp',
  data() {
    return {
      nodes: [],
    };
  },
  mounted() {
    this.fetchNodes();
  },
  methods: {
    fetchNodes() {
      // 调用后端API接口获取脑图数据
      axios.get('/api/nodes')
        .then((response) => {
          this.nodes = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

In the above code, we use the axios library to initiate an asynchronous request and call the backend API interface to obtain Brain map data, and assign the data to the nodes attribute of the Vue instance.

Summary:
Through the cooperation of PHP and Vue, we can easily build the brain map function and provide users with a better brain map experience. In actual projects, we can further enhance the interactivity of the brain map by adding functions such as editing nodes and dragging nodes. I hope that the sharing of this article can inspire everyone to build the brain map function. Everyone is welcome to explore more best practices and experiences.

The above is the detailed content of Guiding the country: best practice experience in building brain map functions with PHP and Vue. For more information, please follow other related articles on the PHP Chinese website!