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

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」という新しいファイルを作成する必要があります。これは、サーバーとの通信のオプションを設(shè)定するために使用される Vue 構(gòu)成ファイルです。このファイルは、次のコードを使用して作成できます。

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

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

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

import?axios?from?'axios'

axios.defaults.baseURL?=?'/api'

Vue.prototype.$http?=?axios

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

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

<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 コンポーネントが作成されます。

最後に、サーバー側(cè)で、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. アプリケーションの実行

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

npm?run?dev

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

http://localhost:8080/users

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

概要

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

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