PHP と Vue の連携: 完璧な脳マッピング アプリケーションを構築する

PHP と Vue のコラボレーション: 完璧なブレイン マップ関数アプリケーションの構築

1. はじめに
インターネットの発展に伴い、ほとんどの人が懸念しているのは、情報の取得と処理の需要が増加しています。このニーズを満たすには、脳マッピング機能アプリケーションが最適です。この記事では、PHP と Vue を連携して完璧なマインド マッピング アプリケーションを構築する方法を紹介します。

2. プロジェクト概要
バックエンド開発言語として PHP を、フロントエンド開発フレームワークとして Vue.js を使用します。 PHP はデータの保存と読み取りを処理し、Vue.js はマインド マップ関数のレンダリングとユーザーとの対話を担当します。

3. 技術的な実装

1. データベース設計
   まず、ユーザーの脳マップ データを保存するデータベースを設計する必要があります。 mindmap という名前のデータベースを作成し、その中に users と mindmaps という 2 つのテーブルを作成します。

#users テーブルには次のフィールドが含まれます:

id: ユーザー ID
• username: ユーザー名
• password: パスワード

mindmaps このテーブルには次のフィールドが含まれます:

id: マインド マップ ID
• title : マインドマップタイトル
• content: ブレインマップコンテンツ
• user_id: ユーザーID

##バックエンド開発
2. PHPを使用して開発しています。バックエンドインターフェース。まず、データベース接続を設定する必要があります。

   db.php
   という名前のファイルを作成し、次のコードを入力します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;?php $servername = &quot;localhost&quot;; $username = &quot;your_username&quot;; $password = &quot;your_password&quot;; $dbname = &quot;mindmap&quot;; $conn = mysqli_connect($servername, $username, $password, $dbname); if (!$conn) { die(&quot;Connection failed: &quot; . mysqli_connect_error()); } ?&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

次に、

login.php

という名前のファイルを作成します。ユーザーのログイン要求を処理します。次のコードを入力します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;?php include 'db.php'; $data = json_decode(file_get_contents('php://input'), true); $username = $data['username']; $password = $data['password']; $sql = &quot;SELECT * FROM users WHERE username='$username' AND password='$password'&quot;; $result = mysqli_query($conn, $sql); if (mysqli_num_rows($result) &gt; 0) { $row = mysqli_fetch_assoc($result); $response = [ 'success' =&gt; true, 'user_id' =&gt; $row['id'] ]; } else { $response = [ 'success' =&gt; false, 'message' =&gt; 'Authentication failed' ]; } echo json_encode($response); ?&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>このコードは、フロントエンドによって送信されたログイン要求を受け入れ、データベース内のユーザー名とパスワードを検証します。認証が成功すると、ユーザー ID を含む応答が返されます。

次に、ユーザーのマインド マップ データを取得するために、

mindmaps.php

という名前のファイルを作成します。次のコードを入力します: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;?php include 'db.php'; $user_id = $_GET['user_id']; $sql = &quot;SELECT * FROM mindmaps WHERE user_id='$user_id'&quot;; $result = mysqli_query($conn, $sql); $response = []; while ($row = mysqli_fetch_assoc($result)) { $response[] = $row; } echo json_encode($response); ?&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>このコードは、ユーザー ID に基づいてユーザーの脳マップ データを取得し、それをフロント エンドに返します。

フロントエンド開発

Vue.js を使用してフロントエンド インターフェイスを実装します。まず、Vue.js をインストールし、
3. App.vue
   というファイルを作成する必要があります。次のコードを入力します:

   <template>
     <div>
       <h1 id="message">{{ message }}</h1>
       <ul>
         <li v-for="mindmap in mindmaps" :key="mindmap.id">
           {{ mindmap.title }}
         </li>
       </ul>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         message: "Welcome to MindMap App",
         mindmaps: [],
       };
     },
     mounted() {
       this.fetchMindmaps();
     },
     methods: {
       fetchMindmaps() {
         const user_id = 1; // replace with the actual user ID
         axios.get(`/mindmaps.php?user_id=${user_id}`).then((response) => {
           this.mindmaps = response.data;
         });
       },
     },
   };
   </script>
   
   <style scoped>
   h1 {
     color: blue;
   }
   </style>

このコードは、タイトルとマインド マップのリストを含む単純なインターフェイスをレンダリングします。

fetchMindmaps

メソッドを呼び出してバックグラウンドからマインド マップ データを取得し、それを mindmaps 配列に割り当てます。 4. 概要

PHP と Vue.js の連携により、完璧なマインド マッピング アプリケーションを構築することに成功しました。 PHP はデータの保存と読み取りを処理し、Vue.js は脳マップ機能の提示とユーザーとの対話を担当します。このアプリケーションは、ユーザーが思考をより適切に管理および整理し、作業効率を向上させるのに役立ちます。

上記は基本的な例であり、ニーズに応じて拡張および最適化できます。素晴らしいアプリの構築が成功することを祈っています。

以上がPHP と Vue の連携: 完璧な脳マッピング アプリケーションを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。