Visionary: PHP と Vue を使用してユニークなマインドマッピングアプリケーションを構築する-PHPチュートリアル-php.cn

Visionary: PHP と Vue を使用してユニークなマインドマッピングアプリケーションを構築する

WBOY

リリース： 2023-08-15 11:02:01

オリジナル

845 人が閲覧しました

Visionary: PHP と Vue を使用してユニークなマインドマッピングアプリケーションを構築する

ビジョン: PHP と Vue を使用してユニークなマインドマッピングアプリケーションを作成する

はじめに:
今日の情報爆発の時代では、私たちは大量のデータに直面しています。情報と複雑なマインドマップ。思考をより整理し、作業効率を向上させるために、マインドマップアプリケーションが登場しました。この記事では、PHP と Vue フレームワークを使用して、アイデアをより明確にするための独自のマインドマッピングアプリケーションを作成する方法を紹介します。

1. テクノロジーの選択
始める前に、適切なテクノロジーの選択を決定する必要があります。 PHP は成熟したバックエンド言語として、豊富な開発リソースと強力な機能を備えており、バックエンドサービスの構築に非常に適しています。 Vue フレームワークは、ユーザーインターフェイスをより便利に構築するのに役立つ、シンプルで使いやすい強力なフロントエンドフレームワークです。したがって、バックエンド言語として PHP を選択し、フロントエンドフレームワークとして Vue を選択します。

2. バックエンド開発

データベース設計
まず、脳マップのノードと関係を保存する適切なデータベースを設計する必要があります。マインドマップアプリケーションのノードには、ノード ID、ノードコンテンツ、親ノード ID という属性があると仮定します。 MySQL データベースを使用してこれらのノードを保存できます。

フィールド id (ノード ID)、content (ノードcontent)、parent_id (親ノード ID)。ノード ID と親ノード ID は両方とも整数型で、ノードの内容は文字列型です。

バックエンドインターフェイス

<?php

header('Content-type: application/json');

// 连接数据库
$mysqli = new mysqli('localhost', 'username', 'password', 'database');

// 检查连接状态
if ($mysqli->connect_errno) {
    echo json_encode(['error' => '数据库连接失败']);
    exit;
}

// 处理请求
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 获取请求参数
    $content = $_POST['content'];
    $parentId = $_POST['parent_id'];

    // 执行SQL语句
    $result = $mysqli->query("INSERT INTO nodes (content, parent_id) VALUES ('$content', '$parentId')");

    // 处理执行结果
    if ($result) {
        echo json_encode(['success' => true]);
    } else {
        echo json_encode(['error' => '创建节点失败']);
    }
} else {
    echo json_encode(['error' => '无效的请求']);
}

// 关闭数据库连接
$mysqli->close();

?>

ログイン後にコピー

フロントエンドで Vue フレームワークを使用すると、その強力なコンポーネント化機能を使用して、ユーザーインターフェース。以下はブレインマップコンポーネントの簡単な例です:

<template>
  <div class="mind-map">
    <div class="node" v-for="node in nodes" :key="node.id">
      {{ node.content }}
      <button @click="addNode(node.id)">添加子节点</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nodes: []
    }
  },
  mounted() {
    this.fetchNodes()
  },
  methods: {
    fetchNodes() {
      // 发起请求获取节点数据
      fetch('/api/nodes')
        .then(response => response.json())
        .then(data => {
          this.nodes = data
        })
        .catch(error => {
          console.error(error)
        })
    },
    addNode(parentId) {
      // 发起请求创建节点
      fetch('/api/nodes', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          parent_id: parentId
        })
      })
        .then(response => response.json())
        .then(data => {
          if (data.success) {
            this.fetchNodes()
          } else {
            console.error(data.error)
          }
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

<style scoped>
.node {
  margin-left: 20px;
}
</style>

ログイン後にコピー

4. デプロイと使用

バックエンドインターフェイスのデプロイ