在 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.phpprotected $middlewareGroupsweb 中加入以下內容:

\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)

  1. LoadingBar(加載進度條):
    這個部份可以直接參考 在 Laravel 應用中使用 pjax 進行頁面加速
  2. 中間件的必要性(一):在開發的過程中,赫然發現有沒有中間件的效果都是一樣的,其主要原因是因為 spatie/laravel-pjax 會去檢驗本次的請求是不是 pjax() 請求,在 Laravel 中是去檢驗 Request Header 中是否存在 X-PJAX 這個值,但是 moOx/pjax 並不會在 header 中加入這個值。
  3. 中間件的必要性(二):另外,spatie/laravel-pjax 會去檢驗在 Request Header 中的 X-PJAX-Container 這個值,以決定應該傳怎樣的資料回去,可是很不幸的 moOx/pjax 也不會丟出這個值。

結論

其實就算不使用 spatie/laravel-pjax,還是能有 pjax 的效果(雖然資料量並不會減少,但是能減少外部資源請求的次數,在不使用 HTTP/2 的網站其實還是有利的)

本帖已被设为精华帖!
本帖由 Summer 于 3年前 加精
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 10

Good!先收藏了,过两天也实践一下~

3年前 评论

文章写的很好,繁体看的我蛋疼

3年前 评论

@binafor 實在不好意思,因為作業系統跟輸入法的關係,用繁體比較方便,還請見諒。

3年前 评论

pjax有问题,页面之前如果存在存在相同的js变量名,变量的值会混乱!

3年前 评论

@binafor 繁体字是中国几千年历史的传统字体形式,比简体字好看,香港台湾澳门都是用繁体字的,就是写起来麻烦,看久了就习惯了。

3年前 评论

请问laravel5.2怎么加这个功能呢

3年前 评论

非常感谢楼主的分享~
调试中遇到这样的错误,不知道楼主是否知道怎么解决:
Expecting a DOMNodeList or DOMNode instance, an array, a string, or null, but got "Illuminate\View\View".
导致ajax总是返回500错误

3年前 评论

@清酒竹杯 看訊息應該是 laravel-pjax 這個套件在 return 的資料型態上跟不太上 Laravel 改版的進程,目前我在使用上沒有發生這樣的狀況,不過以我的角度來說大概會去發 Pull Request 請原作者修改。

3年前 评论

请问pjax里使用,写JS,被html实体化了,怎么解决呢?

1年前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!