ThinkPHP6 を使用してシングルページアプリケーションを実装する方法-ThinkPHP-php.cn

ThinkPHP6 を使用してシングルページアプリケーションを実装する方法

WBOY

リリース： 2023-06-20 16:29:46

オリジナル

1269 人が閲覧しました

インターネットの急速な発展に伴い、Web アプリケーションは従来の複数ページのアプリケーションから単一ページのアプリケーションに徐々に変化してきました。シングルページアプリケーション (SPA) は、よりスムーズで高速なインタラクティブエクスペリエンスをユーザーに提供し、Ajax やその他のテクノロジを使用してページコンテンツをシームレスに更新し、動的ルーティングなどの高度な機能を実装できます。この記事では、ThinkPHP6 を使用して基本的なシングルページアプリケーションを実装する方法を紹介します。

ThinkPHP6 のインストール

まず、ThinkPHP6 フレームワークをインストールする必要があります。 Composer からインストールできますが、具体的な方法は以下の通りです:

コマンドラインウィンドウで、プロジェクトが存在するディレクトリを入力し、次のコマンドを入力します:

composer create-project topthink/think your_project_name

ログイン後にコピー

その中で、 your_project_name はプロジェクトの名前で、自分で設定できます。

インストールが完了すると、プロジェクトディレクトリに public という名前のフォルダーが見つかります。このフォルダーには、プロジェクトのエントリファイルindex.php といくつかの静的リソースファイルが含まれています。

基本ページの作成

次に、SPA アプリケーションのエントリページとして機能する基本的な HTML ファイルを作成する必要があります。パブリックフォルダーに、次の内容を含む index.html という名前のファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <title>SPA应用</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
    <div id="app">
        <!-- 这里放置SPA应用的内容 -->
    </div>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/app.js"></script>
</body>
</html>

ログイン後にコピー

このページでは、フロントの実装に使用される Vue.js および Axios.js JavaScript ライブラリを紹介しました。 -データの対話とビューのレンダリングを終了します。同時に、SPA アプリケーションのコンテンツをレンダリングするために、ページ上に ID app を持つ div を定義しました。

ルーティングの構成

ThinkPHP6 では、ルーティング構成ファイルは app/route ディレクトリにあります。このディレクトリに router.php という名前の新しいファイルを作成し、次の構成を追加する必要があります。

use thinkacadeRoute;

Route::get('/', function () {
    return view('index');
});

ログイン後にコピー

このコードの機能は、Web サイトのルートディレクトリリクエストを # にリダイレクトすることです。 ##index.html ページ。ここでは、ThinkPHP6 フレームワークによって提供されるルーティングショートカット関数 Route::get() を使用して、匿名関数を通じて index.html ページを返します。

SPA アプリケーションはバックグラウンドからデータをリクエストする必要があるため、バックグラウンドで RESTful API インターフェイスを作成する必要があります。 ThinkPHP6 では、

Route::resource() メソッドを通じて、RESTful 仕様に準拠した API インターフェースを自動的に作成できます。次のルーティング構成を router.php ファイルに追加します。

use appcontrollerBlog;

Route::resource('blog', Blog::class);

ログイン後にコピー

このコードの機能は、

blog という名前の API インターフェイスを作成することです。対応するコントローラーは次のとおりです。 アプリコントローラーブログ。ここの Blog コントローラーは自分で作成する必要があります。コマンドラインを使用してブログコントローラーを簡単に生成できます。

php think make:controller Blog

ログイン後にコピー

このコマンドは、

app/controller ディレクトリドキュメントに Blog.php という名前のコントローラーを作成します。これで、Blog コントローラーでさまざまなリクエストメソッドを定義し、SPA アプリケーションによって送信された API リクエストを処理できるようになりました。たとえば、index という名前のメソッドを追加します。

namespace appcontroller;

use thinkacadeDb;

class Blog
{
    public function index()
    {
        $result = Db::table('blog')->select();

        return json($result);
    }
}

ログイン後にコピー

このコードの機能は、データベースからブログデータを取得し、結果を JSON 形式で返すことです。ここでは、ThinkPHP6 フレームワークが提供する

Db::table() メソッドを使用してデータベースを操作します。

最後に、

index.html ページに JavaScript コードを記述して、データのレンダリングとインタラクションを完了する必要があります。 publicstaticjs ディレクトリに、app.js という名前のファイルを作成し、次のコードを追加します。

const app = new Vue({
    el: '#app',
    data: {
        blogs: []
    },
    created: function () {
        axios.get('http://localhost/blog')
            .then(response => {
                this.blogs = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
});

ログイン後にコピー

このコードの機能は、Vue.js と Axios を使用することです。 .js は、バックグラウンド API インターフェイスからブログデータを取得し、ページ上にデータをレンダリングします。ここでは、Vue.js が提供する

data 属性を使用してブログデータを保存します。同時に、created ライフサイクル関数を通じてデータを初期化し、 Axios.js BlogデータのGETメソッド。

これで、SPA アプリケーションの基本的な構成とコードの記述が完了しました。最後に、次のようにアプリケーションを起動するだけです。

php think run

ログイン後にコピー

ブラウザに

http://localhost と入力すると、SPA アプリケーションの効果を確認できます。

概要

この記事では、ThinkPHP6 フレームワークを使用して基本的な SPA アプリケーションを作成する方法を紹介します。 Vue.js や Axios.js などの JavaScript ライブラリを

index.html ページに導入し、API インターフェイスと JavaScript コードを作成することで、Web アプリケーションで単一ページの動的な対話を実現できます。 ThinkPHP6 フレームワークは、豊富なルーティングおよびデータベース操作メソッドを提供し、高品質な Web アプリケーションを迅速に開発できます。

以上がThinkPHP6 を使用してシングルページアプリケーションを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。