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('hashchange', function() {
var url = window.location.hash.slice(1);
$('#content').load(url + '.html');
});
$(window).trigger('hashchange');
});
</script>
</body>
</html>コード内にナビゲーション バー (ID は nav) を作成し、コンテンツ領域 (ID は content) を作成しました。 JavaScript で hashchange イベントをバインドしました。ハッシュが変更されるたび (つまり、ナビゲーション バーのリンクが変更されるとき)、Ajax を通じて対応する HTML ページをコンテンツ領域に読み込みます。
注: シングルページ アプリケーションのコンテンツは、すべてを 1 ページに同時に表示するのではなく、複数の HTML ページで構成する必要があります。
3. ルーティング ルールを定義する
SinglePageController クラスは、index メソッドを通じて単一ページ アプリケーションのビューをレンダリングするため、ルーティング ルールで singlepage という名前のルーティング ルールを定義する必要があります。 ##
<?php use think\Route; // 单页应用路由 Route::rule('singlepage/:id','index/SinglePage/index');
以上がthinkphp で単一ページを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
