Laravel(時間參數與分頁功能)

更新於 發佈於 閱讀時間約 8 分鐘

在開發 Web 應用時,管理大量資料通常需要處理分頁和格式化顯示的需求。本文將介紹如何在 Laravel 中實現 時間格式轉換 以及 分頁功能,並用實際案例來展示如何將這些功能整合到你的應用程式中。

1. 轉換時間格式(castsformat

在模型中轉換時間格式

MovieList 模型中,我們需要將資料庫中的 publish_date 欄位轉換為適合顯示的時間格式。這可以透過 Laravel 的 Cast 功能來實現。

首先,打開你的 MovieList 模型檔案,並在 $casts 屬性中加入 publish_date 欄位的轉換設定。這樣,你就可以將 publish_date 自動轉換為 datetime 類型,並在後續操作中方便地格式化。

protected $casts = [
'movie_types_id' => 'int',
'film_length' => 'int',
'publish_date' => 'datetime', // 將 publish_date 轉換為 datetime 類型
'price' => 'int'
];

這段程式碼確保了 publish_date 欄位的資料會被自動轉換為 Carbon 類型,這是 Laravel 預設的日期時間處理工具。接著,我們可以在展示時使用 format 方法來轉換為我們所需的格式。

$movie->publish_date->format('Y/m/d');  // 格式化為 年/月/日

轉換後的格式化範例

在我們的應用程式中,通常會將日期格式化為像是 YYYY/MM/DD 的形式。使用 Carbon 類型的方法,我們可以輕鬆地達成這個目標:

$movie->publish_date?->format('Y/m/d');  // 使用問號確保當時間為 null 時不會報錯

2. 使用分頁來顯示大量資料

分頁是處理大量資料的一個常見需求,Laravel 提供了 paginate 方法來輕鬆實現。這不僅有助於提高性能,還能提升用戶體驗,讓頁面不會因為載入大量資料而變得緩慢。

在控制器中使用 paginate

MovieControllerindex 方法中,我們使用 paginate(5) 來每頁顯示 5 條電影資料。這樣能確保用戶在瀏覽電影資料時,不會一次性加載過多的資訊,從而保持頁面的流暢性。

public function index()
{
// 使用 paginate 來處理分頁,這裡每頁顯示 5 條資料
$data = MovieList::paginate(5);

return Inertia::render('Backend/Movie/MovieIndex', [
// 當使用 paginate 時,透過 through 進行資料轉換
'movie' => $data->through(function ($item) {
return [
'id' => $item->id,
'name' => $item->name,
'film_length' => $item->film_length,
'price' => $item->price,
'publish_date' => $item->publish_date?->format('Y/m/d'), // 格式化 publish_date
];
}),
]);
}

在這段程式碼中,我們首先使用 paginate(5) 來獲取每頁 5 條資料,並且利用 through() 方法對每一條資料進行格式化,特別是 publish_date 欄位,這裡我們格式化為 YYYY/MM/DD

頁面顯示分頁導航

接著,我們需要在前端頁面顯示分頁導航,讓用戶能夠切換到不同的頁面。在 MovieIndex 視圖中,我們使用 movie.links 屬性來渲染分頁連結。

<ul class="flex gap-4 mt-4">
<li v-for="(page, index) in movie.links" :key="index">
<Link
:href="page.url ?? ''"
class="p-2"
:class="{ 'bg-blue-500 text-white': page.active, 'opacity-50 pointer-events-none': !page.url }"
>
<span v-if="page.label.includes('Previous')">前一頁</span>
<span v-else-if="page.label.includes('Next')">後一頁</span>
<span v-else>{{ page.label }}</span>
</Link>
</li>
</ul>

在這段程式中,我們迭代 movie.links,這是 Laravel 提供的分頁連結物件,它包含了前一頁、下一頁以及每頁的頁碼。根據這些資料,我們渲染出相應的按鈕,並且使用 :class 來動態修改按鈕的樣式,例如當按鈕是當前頁時,會加上 bg-blue-500 text-white 這個樣式。

3. 小結

如何提高應用的性能與可讀性

  • 時間格式轉換:透過 $casts 屬性,我們可以輕鬆將時間資料庫欄位轉換為適當的格式,並使用 format 方法來顯示用戶友好的時間格式。
  • 分頁功能:使用 paginate 方法來簡單地分頁顯示資料,配合 through() 方法進行資料格式化,使得頁面在顯示大量資料時更加高效且具有可讀性。

最後

在這篇文章中,我們展示了如何使用 Laravel 的時間格式轉換功能分頁功能 來提升應用的效能和可讀性。這不僅能幫助你管理大量資料,還能提供更好的用戶體驗。接下來會介紹在 Laravel 中設計登入功能。


對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段,大家有不同看法的話歡迎進行良性的知識交流!

 

大家可以考慮多多分享文章和考慮訂閱沙龍方案或贊助等喔!不過請注意不要違反著作權等行為。當然決定權都在於您,不會干涉您的任何決定。

 

提醒,文章僅供正當的知識參考,文章不負任何責任。



avatar-img
0會員
23內容數
有軟體開發相關文章。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
阿棋的沙龍 的其他內容
在這篇文章中,我們將深入探討如何在 Laravel 應用程式中處理檔案上傳。我們將從前端頁面的檔案選擇到後端儲存與顯示檔案的完整流程,涵蓋從用戶選擇檔案,到將其上傳並保存在伺服器,直到如何在資料庫中儲存檔案路徑,並在頁面上顯示它們。這些步驟將有助於您瞭解如何在 Laravel 中高效地處理檔案上傳。
在這篇文章中,將介紹如何使用 Laravel 和 Vue 3,並搭配 Inertia.js 來建立一個簡單的電影資料管理系統。我們將涵蓋電影資料的新增、編輯、刪除等基本操作,並且實現動態更新頁面而不需重新載入。
在這篇文章中,將介紹如何使用 Laravel 與 Vue.js 構建一個具有良好使用體驗的 Web 應用。我們將討論如何組織 Laravel 路由與控制器,並展示如何在前端 Vue.js 中進行頁面切換和資料傳遞。
在現代 Web 開發中,前後端分離的架構越來越受歡迎。本文將帶領你從建立 Laravel 路由、將後端資料傳遞到前端,到如何使用 Tailwind CSS 美化頁面,並將資料儲存到資料庫。
這份指南提供了如何將 Vue.js 和 Laravel 進行集成的詳細步驟,並涵蓋了開發環境的設置、所需的工具、以及相關的安裝和配置方法。下面是步驟的概述與要點,對於有意使用這些技術的開發者將有很大幫助。
在本篇文章中,我們將深入探討如何在 Laravel 中建立關聯資料、使用 Eloquent ORM 操作資料庫,並將資料傳遞到前端視圖。這篇文章將涵蓋從資料庫遷移、Seeder、關聯模型的建立,到資料傳遞的完整流程,並介紹如何在前端展示資料。
在這篇文章中,我們將深入探討如何在 Laravel 應用程式中處理檔案上傳。我們將從前端頁面的檔案選擇到後端儲存與顯示檔案的完整流程,涵蓋從用戶選擇檔案,到將其上傳並保存在伺服器,直到如何在資料庫中儲存檔案路徑,並在頁面上顯示它們。這些步驟將有助於您瞭解如何在 Laravel 中高效地處理檔案上傳。
在這篇文章中,將介紹如何使用 Laravel 和 Vue 3,並搭配 Inertia.js 來建立一個簡單的電影資料管理系統。我們將涵蓋電影資料的新增、編輯、刪除等基本操作,並且實現動態更新頁面而不需重新載入。
在這篇文章中,將介紹如何使用 Laravel 與 Vue.js 構建一個具有良好使用體驗的 Web 應用。我們將討論如何組織 Laravel 路由與控制器,並展示如何在前端 Vue.js 中進行頁面切換和資料傳遞。
在現代 Web 開發中,前後端分離的架構越來越受歡迎。本文將帶領你從建立 Laravel 路由、將後端資料傳遞到前端,到如何使用 Tailwind CSS 美化頁面,並將資料儲存到資料庫。
這份指南提供了如何將 Vue.js 和 Laravel 進行集成的詳細步驟,並涵蓋了開發環境的設置、所需的工具、以及相關的安裝和配置方法。下面是步驟的概述與要點,對於有意使用這些技術的開發者將有很大幫助。
在本篇文章中,我們將深入探討如何在 Laravel 中建立關聯資料、使用 Eloquent ORM 操作資料庫,並將資料傳遞到前端視圖。這篇文章將涵蓋從資料庫遷移、Seeder、關聯模型的建立,到資料傳遞的完整流程,並介紹如何在前端展示資料。
你可能也想看
Google News 追蹤
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
在本節中,我們介紹了PHP的基本語法,包括如何在HTML中嵌入PHP代碼,PHP腳本的執行順序,以及多種註解方式。我們還學習了如何定義和使用變數,包括單個變數和多個變數的賦值方法。這些基礎知識將幫助你開始使用PHP進行Web開發。
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
有的時候,會希望在物件導向中對原生的Class新增功能的時候,大多我們都會寫一個新的class並繼承。 但是其實Laravel提供了一個不同的方式,讓我們可以在常用的Class上,直接新增想要的function,那就是macro。
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Migration在 Laravel 中是一種用來管理資料庫結構變更的機制。它的主要目的是使開發者能夠在應用程序的不同環境中保持資料庫結構的一致性,並輕鬆地進行結構變更
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
Thumbnail
這篇文章介紹了網站的整體架構以及開發時所使用的工具和套件,包括 Next.js、Tailwind CSS 和 socket.io 等。文章回顧了程式碼的重構與優化,幫助開發者提高工作效率,適合希望深入瞭解前端開發和網站架構的讀者。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
在本節中,我們介紹了PHP的基本語法,包括如何在HTML中嵌入PHP代碼,PHP腳本的執行順序,以及多種註解方式。我們還學習了如何定義和使用變數,包括單個變數和多個變數的賦值方法。這些基礎知識將幫助你開始使用PHP進行Web開發。
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
自訂元件生成位置顧名思義就是可以指定部分HTML區塊渲染在特定的畫面上,即使在不同組件也能把A組件內的部分畫面,展現在B組件上,以下方程式舉例。
Thumbnail
有的時候,會希望在物件導向中對原生的Class新增功能的時候,大多我們都會寫一個新的class並繼承。 但是其實Laravel提供了一個不同的方式,讓我們可以在常用的Class上,直接新增想要的function,那就是macro。
Thumbnail
JavaScript 套件,頁碼 Pagination.js 搭配 axios API 請求範例
Thumbnail
在網頁開發中,時間與日期的處理是重要且基礎的部分,本文將介紹 JavaScript 中的日期的處理方法,並提供範例程式來協助你理解。
Migration在 Laravel 中是一種用來管理資料庫結構變更的機制。它的主要目的是使開發者能夠在應用程序的不同環境中保持資料庫結構的一致性,並輕鬆地進行結構變更