我正在 Laravel 8 中開發一個部落格應用程式。
ArticlesController 控制器我有這個方法來顯示單篇文章及其註解:
class ArticlesController extends FrontendController { // More code public function show($slug) { // Single article $article = Article::firstWhere('slug', $slug); $old_article = Article::where('id', '<', $article->id)->orderBy('id', 'DESC')->first(); $new_article = Article::where('id', '>', $article->id)->orderBy('id', 'ASC')->first(); // Comments $commentsQuery = Comment::where(['article_id' => $article->id, 'approved' => 1])->orderBy('id', 'desc'); $comments = $commentsQuery->paginate(10); $comments_count = $commentsQuery->count(); return view('themes/' . $this->theme_directory . '/templates/single', array_merge($this->data, [ 'categories' => $this->article_categories, 'article' => $article, 'old_article' => $old_article, 'new_article' => $new_article, 'comments' => $comments, 'comments_count' => $comments_count, 'tagline' => $article->title, ]) ); } }
在視圖中我有這樣的評論清單:
<div id="commentsList"> <ol class="commentlist {{ boolval($is_infinitescroll) ? 'infinite-scroll' : '' }}"> @foreach ($comments as $comment) <li class="depth-1 comment"> <div class="comment__avatar"> <img class="avatar" src="{{ asset('images/avatars/' . $comment->user->avatar) }}" alt="" width="50" height="50"> </div> <div class="comment__content"> <div class="comment__info"> <div class="comment__author">{{ $comment->user->first_name }} {{ $comment->user->last_name }}</div> <div class="comment__meta"> <div class="comment__time">{{ date('jS M Y', strtotime($comment->created_at)) }}</div> <div class="comment__reply"> <a class="comment-reply-link" href="#0">Reply</a> </div> </div> </div> <div class="comment__text"> <p>{{ $comment->body }}</p> </div> </div> </li> @endforeach </ol> <div class="ajax-load text-center is-hidden"> loading... </div> </div>
與文章相關的路線:
// Article routes Route::get('/', [ArticlesController::class, 'index'])->name('homepage'); Route::get('/category/{category_id}', [ArticlesController::class, 'category'])->name('category'); Route::get('/author/{user_id}', [ArticlesController::class, 'author'])->name('author'); Route::get('/show/{slug}', [ArticlesController::class, 'show'])->name('show');
我想用「無限滾動」取代評論分頁。
為此目的,我有:
/* Infinite comments */ function infiniteComments() { var page = 1; $(window).scroll(function() { if ($(window).scrollTop() + $(window).height() >= $(document).height() - $('.s-footer').height()) { page++; loadMoreData(page); } }); } function loadMoreData(page){ var base_url = window.location.href.split('?')[0]; $.ajax({ url: `${base_url}?page=${page}`, type: "get", beforeSend: function() { $('.ajax-load').show(); } }) .done(function(data) { if (data.html == "") { $('.ajax-load').hide(); return; } $('.ajax-load').hide(); $(".infinite-scroll").append(data.html); }) .fail(function(jqXHR, ajaxOptions, thrownError) { console.log('The server is not responding...'); }); } $(document).ready(function(){ infiniteComments(); });
造訪https://larablog.com/show/deserunt-qui-exeritationem?page=2
時正確顯示第2 頁的評論,Chrome 控制台顯示這些500(內部伺服器錯誤)錯誤:
https://larablog.com/show/deserunt-qui-exercitationem?page=65 500 (Internal Server Error) The server is not responding... https://larablog.com/show/deserunt-qui-exercitationem?page=76 500 (Internal Server Error) The server is not responding...
該錯誤可以追溯到到 ArticlesController 中第 70 行的錯誤訊息 - $article = Article::firstWhere('slug', $slug)
:
#嘗試取得非物件的屬性「id」。
這很奇怪,因為 $article = Article::firstWhere('slug', $slug)
在沒有 Ajax 的情況下工作正常。
firstWhere
傳回符合傳遞條件的第一筆記錄,預設為null
。所以,你的行將傳回
slug
與$slug
相符的第一篇文章,如果不存在這樣的記錄,則傳回null
。現在,每當您引用$article->id
時,您都會認為$article
是一個正確的Article
並且您想知道其id
的值。如果沒有匹配的文章,這將產生您遇到的錯誤。因此,明智的做法是在
$article
初始化後檢查empty($article)
,並在它確實為空時處理邊緣情況。這是我的解決方案:
在
routes\web.php
中加入了這個新路由:在 ArticlesController 中:
如果評論超過 10 條,我只會載入 Ajax 腳本:
腳本: