在 Laravel 6.0 中使用 pjax 進行頁面加速，並實現頁面頂部進度條

Hemer發表於2020-02-12
Laravel

自己學習Laravel也有一段時間了，最近在寫專案時想用頁面頂部進度條來使自己的頁面效果好一點。於是便檢視了站長5年前的一份文章，但是我自己使用起來總是會發生錯誤（可能是我自己弄錯了），於是便自己進行摸索。
此篇文章是我發表第的第一篇，編輯器不太會使用，請見諒.

在你閱讀以下文章時，強烈建議您先閱讀站長髮的文章.閱讀站長文章

一.安裝 rcrowe/Turbo

執行 composer 命令

    composer require spatie/laravel-pjax

二.註冊中介軟體

在 app\Http\Kernel.php $middlewareGroups 陣列中的 web 中新增

\Spatie\Pjax\Middleware\FilterIfPjax::class,

三.使用中介軟體

如果對使用中介軟體不熟悉的建議先去看一下


Route::middleware(['web'])->prefix('index')->group(function () {
        Route::get('index', function () {
            return view("index");
        });
        Route::get('login', function () {
            return view("login");
        });
    });    
        #使用中介軟體有很多種方法,我就不一一舉例.

四.頁面中引入css和js

下載 jquery.pjax.js 以及 nprogress 之後在頁面引入css和js 並新增以下js程式碼

注意:此時頁面應該引入了三個js檔案分別是 Jquery jquery.pjax.js nprogress.js

$(document).ready(function()
{
    $(document).pjax('a', 'body');
    $(document).on('pjax:start', function() {
      NProgress.start();
  });
  $(document).on('pjax:end', function() {
      NProgress.done();
      //self.siteBootUp();
  });
});

這段程式碼是我從站長那篇文章複製過來的，但是 self.siteBootUp() 這個方法一直報錯，我就把它給刪了

感謝您閱讀我的文章,如果遇到什麼問題，歡迎在下方與我一起討論.

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章