vue のスキャフォールディングと thinkphp を組み合わせる方法

Vue はデータ駆動型 JavaScript フレームワークであり、ThinkPHP はオープンソースの PHP フレームワークであり、どちらもそれぞれの分野で非常に人気があります。 Vue と ThinkPHP をどのように併用するかは、Web アプリケーションをより効率的かつ便利に開発できるため、非常に重要な問題です。この記事では、VueとThinkPHPを使った開発方法を紹介します。

1. Vue プロジェクトの作成

Vue を使用するには、まず Vue プロジェクトを作成する必要があります。これは、Vue CLI (コマンド ライン インターフェイス) を使用して行うことができます。 Vue CLI は、次のコマンドを使用してインストールできます:

npm install -g vue-cli

次に、次のコマンドを使用して新しい Vue プロジェクトを作成できます:

vue init webpack my-project

ここで、「my-project」はプロジェクト名です。 。次に、プロジェクト ディレクトリに移動し、必要な依存関係をすべてインストールします:

cd my-project
npm install

2. ThinkPHP のインストール

これで、新しい Vue プロジェクトが作成されました。次に、ThinkPHP をインストールして構成する必要があります。ここでは、PHP と MySQL サーバーがすでにインストールされていることを前提としています。フレームワーク コードの最新バージョンは、ThinkPHP の公式 Web サイトからダウンロードして、プロジェクトのサーバー ディレクトリに配置できます。次に、データベース接続を構成し、データを保存するデータベース テーブルを作成する必要があります。次のコードを使用して、単純なテーブルを作成できます。

CREATE TABLE `users` (
  `id` int(11) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL DEFAULT '',
  `email` varchar(255) NOT NULL DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

これにより、「id」、「name」、「email」の 3 つのフィールドを持つ「users」という名前のテーブルが作成されます。

3. Vue を ThinkPHP に接続する

これで、Vue を ThinkPHP に接続する準備が整いました。 Vue プロジェクトのルート ディレクトリに、「config」という新しいフォルダーを作成する必要があります。このフォルダーに、「index.js」という新しいファイルを作成する必要があります。これは、サーバーとの通信のオプションを設定するために使用される Vue 構成ファイルです。このファイルは、次のコードを使用して作成できます。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

これにより、「/api」からのすべてのリクエストをプロキシし、「localhost:8080」上のサーバーに送信するように Vue 開発サーバーが設定されます。必要に応じてこれらの値を変更できます。

次に、Vue プロジェクトのエントリ ファイル (通常は「index.js」) を変更する必要があります。次のコードを使用して、Vue のサーバーへの接続をセットアップできます。

import axios from 'axios'

axios.defaults.baseURL = '/api'

Vue.prototype.$http = axios

これにより、Vue に axios ライブラリを使用してすべての HTTP リクエストを送信するように指示されます。ここでは、リクエストが正しいサーバーにプロキシされるようにベース URL も設定します。

次に、サーバーからデータを取得するための単純なコンポーネントを作成する必要があります。次のコードを使用して、このコンポーネントを作成できます。

<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }} ({{ user.email }})</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      users: []
    }
  },

  created () {
    this.$http.get('/users')
      .then(response => {
        this.users = response.data
      })
  }
}
</script>

これにより、サーバーからユーザーのリストを取得し、名前と電子メール アドレスを表示する「UserList」という Vue コンポーネントが作成されます。

最後に、サーバー側で、Vue によって行われたリクエストを処理するハンドラーを作成する必要があります。このハンドラーは、次のコードを使用して作成できます。

<?php

namespace app\index\controller;

use think\Controller;
use think\Db;

class Api extends Controller
{
    public function getUsers()
    {
        $users = Db::name(&#39;users&#39;)->select();
        return json($users);
    }
}

これにより、「/api/users」ルート上のリクエストを処理し、ユーザーのリストを返す「Api」というコントローラーが作成されます。

4. アプリケーションの実行

これで、アプリケーションを実行する準備が整いました。 Vue プロジェクトのルート ディレクトリで、次のコマンドを使用して開発サーバーを起動できます:

npm run dev

これにより、Vue の開発サーバーが起動し、Vue が ThinkPHP サーバーに接続されます。サンプル コンポーネントには、次の URL を使用してアクセスできます。

http://localhost:8080/users

これにより、サーバーからユーザーのリストが取得され、ページに表示されます。

概要

この記事では、Vue と ThinkPHP を開発に使用する方法を紹介します。 Vue プロジェクトの作成、ThinkPHP のインストールと構成、Vue と ThinkPHP の接続のプロセスについて学びました。また、サーバーからデータを取得するための単純な Vue コンポーネントを作成し、サーバー側のハンドラーを作成する方法についても説明しました。 Vue と ThinkPHP を使用して開発を始めたい場合は、この記事が間違いなく役立ちます。

以上がvue のスキャフォールディングと thinkphp を組み合わせる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。