在 Laravel 5.3 中使用 Pjax
前言
日前拜讀 Summer 的 在 Laravel 應用中使用 pjax 進行頁面加速,自己研究了一下午,這邊分享下心得。
註:因為輸入法問題,比較習慣使用繁體中文,若有不方便之處,還請版上前輩們多多見諒。
正文
一般來說,在 Laravel 5.* 版本使用 Pjax 時,都會建議使用 jQuery.pjax 這個前端庫搭配 spatie/laravel-pjax 這個中間件進行。
不過我本人著實不太喜歡為了一個 pjax 還要加載一整套 jQuery,畢竟現在我開發大多都是應用 Vuejs 或 React,用不太到 jQuery。
所以我花了點時間整理一下不依賴 jQuery 的 pjax 實作方法。
安裝 Pjax
以 npm 安裝 pjax 相依性套件 moOx/pjax:
npm i pjax --save
在 JS 中加入 Pjax
在 resources/assets/js/bootstrap.js
中加入以下內容:
window.Pjax = require('pjax');
在 resources/assets/js/app.js
中加入以下內容:
new Pjax({
elements: 'a',
selectors: ['body'],
});
最後用 gulp 編譯
gulp
安裝中間件(Middleware)
這邊我使用 spatie/laravel-pjax 這個套件
composer require spatie/laravel-pjax
在 app/Http/Kernel.php
的 protected $middlewareGroups
的 web
中加入以下內容:
\Spatie\Pjax\Middleware\FilterIfPjax::class,
$middlewareGroups
大概會像是以下的內容:
/**
* The application's route middleware groups.
*
* @var array
*/
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\Spatie\Pjax\Middleware\FilterIfPjax::class,
],
'api' => [
'throttle:60,1',
'bindings',
],
];
議題(issues)
- LoadingBar(加載進度條):
這個部份可以直接參考 在 Laravel 應用中使用 pjax 進行頁面加速 - 中間件的必要性(一):在開發的過程中,赫然發現有沒有中間件的效果都是一樣的,其主要原因是因為 spatie/laravel-pjax 會去檢驗本次的請求是不是 pjax() 請求,在 Laravel 中是去檢驗 Request Header 中是否存在 X-PJAX 這個值,但是 moOx/pjax 並不會在 header 中加入這個值。
- 中間件的必要性(二):另外,spatie/laravel-pjax 會去檢驗在 Request Header 中的 X-PJAX-Container 這個值,以決定應該傳怎樣的資料回去,可是很不幸的 moOx/pjax 也不會丟出這個值。
結論
其實就算不使用 spatie/laravel-pjax,還是能有 pjax 的效果(雖然資料量並不會減少,但是能減少外部資源請求的次數,在不使用 HTTP/2 的網站其實還是有利的)
推荐文章: