thinkphp で単一ページを設定する方法-ThinkPHP-php.cn

thinkphp で単一ページを設定する方法

WBOY

リリース： 2023-06-03 10:46:38

転載

1330 人が閲覧しました

1. シングルページアプリケーションとは何ですか?

シングルページアプリケーション、英語では Single-Page Application、SPA と呼ばれます。 Ajax や HTML5 などのテクノロジーに基づいたアプリケーションの一種で、ページの部分コンテンツを動的にロードすることでユーザーエクスペリエンスを最適化する Web アプリケーションです。従来のアプリケーションとは異なり、シングルページアプリケーションには HTML ページが 1 つだけ含まれており、ページコンテンツは JavaScript を通じて動的に読み込まれ、コンテンツの表示とページ間の切り替えを実現します。

2. シングルページアプリケーションの作成

ThinkPHP でシングルページアプリケーションを作成するにはさまざまな方法があり、この記事ではそのうちの 1 つを紹介します。

1. コントローラーの作成

ThinkPHP では、すべてのビジネスロジックがコントローラーに実装されます。したがって、アプリケーションのコントローラー内にシングルページアプリケーションのコントローラーを作成する必要があります。 SinglePageController という名前のコントローラーを作成します。

<?php
namespace app\index\controller;
use think\Controller;
class SinglePageController extends Controller
{
    public function index()
    {
        return view();
    }
}

ログイン後にコピー

上記のコードでは、Controller クラスを継承する SinglePageController クラスを定義し、ページの読み込み操作を実行するインデックスメソッドを定義します。

2. ビューの作成

ThinkPHP のビューエンジンを通じて単一ページのアプリケーションビューを作成する必要があります。 ThinkPHP のビューエンジンを使用すると、PHP コードを HTML コードに追加して、ビューの再利用やページ分離などの機能を実現できます。

<!-- singlepage.html -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>单页应用</title>
    <script src="//cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div id="nav">
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于我们</a></li>
            <li><a href="#product">产品介绍</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </div>
    <div id="content"></div>
    <script type="text/javascript">
        $(document).ready(function(){
            $(window).bind(&#39;hashchange&#39;, function() {
                var url = window.location.hash.slice(1);
                $(&#39;#content&#39;).load(url + &#39;.html&#39;);
            });
            $(window).trigger(&#39;hashchange&#39;);
        });
    </script>
</body>
</html>

ログイン後にコピー

コード内にナビゲーションバー (ID は nav) を作成し、コンテンツ領域 (ID は content) を作成しました。 JavaScript で hashchange イベントをバインドしました。ハッシュが変更されるたび (つまり、ナビゲーションバーのリンクが変更されるとき)、Ajax を通じて対応する HTML ページをコンテンツ領域に読み込みます。

注: シングルページアプリケーションのコンテンツは、すべてを 1 ページに同時に表示するのではなく、複数の HTML ページで構成する必要があります。

3. ルーティングルールを定義する

SinglePageController クラスは、index メソッドを通じて単一ページアプリケーションのビューをレンダリングするため、ルーティングルールで singlepage という名前のルーティングルールを定義する必要があります。 ##

<?php
use think\Route;
// 单页应用路由
Route::rule(&#39;singlepage/:id&#39;,&#39;index/SinglePage/index&#39;);

ログイン後にコピー

上記のコードでは、singlepage という名前のルーティングルールを定義し、パラメータとして ID を SinglePageController クラスの Index メソッドに渡します。

以上がthinkphp で単一ページを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。