在這篇文章中，將介紹如何使用 Laravel 與 Vue.js 構建一個具有良好使用體驗的 Web 應用。我們將討論如何組織 Laravel 路由與控制器，並展示如何在前端 Vue.js 中進行頁面切換和資料傳遞。這篇文章的核心在於結合 Inertia.js 和 Vue.js，使得前後端可以無縫地合作，提升開發效率與用戶體驗。
資料夾結構介紹
在 Laravel 與 Vue.js 合作開發中，我們通常會看到以下的資料夾結構：
/app
/Http
/Controllers
ShoppingController.php
/resources
/js
/Pages
StepOneView.vue
StepTwoView.vue
StepThreeView.vue
/views
/routes
frontend.php
這個結構遵循了 Laravel 和 Vue.js 的標準分佈，使得前端和後端的邏輯能夠清晰地區分開來。在 routes/frontend.php 中，我們會定義頁面路由，並使用 Inertia 來渲染 Vue.js 頁面。
建立 Controller
在 Laravel 中，我們通常會創建一個控制器來處理應用邏輯。在本範例中，我們會建立一個 ShoppingController，負責渲染頁面與處理資料傳遞。
控制器範例
<?php
namespace App\Http\Controllers;
use Inertia\Inertia;
use App\Models\Shopping;
use Illuminate\Http\Request;
class ShoppingController extends Controller
{
// 頁面產生與連結的方法
public function step01()
{
// 返回第一步驟的頁面
return Inertia::render('Frontend/StepOneView', []);
}
public function step02()
{
// 返回第二步驟的頁面
return Inertia::render('Frontend/StepTwoView', []);
}
public function step03()
{
// 返回第三步驟的頁面
return Inertia::render('Frontend/StepThreeView', []);
}
public function step04(Request $request)
{
// 處理表單提交並儲存資料
$data = $request->all();
Shopping::create([
'name' => $data['name'],
'phone' => $data['phone'],
'email' => $data['email'],
'address01' => $data['address01'],
'address02' => $data['address02'],
'address03' => $data['address03'],
]);
// 返回第四步驟的頁面
return Inertia::render('Frontend/StepFourView');
}
}
在這段程式碼中，我們為每個步驟（step01、step02、step03）定義了一個方法，這些方法將使用 Inertia 返回相對應的 Vue.js 頁面。當用戶填寫完資料後，我們會將資料儲存到資料庫，並跳轉到下一個步驟。
群組化路由管理
為了讓路由更具可維護性，Laravel 提供了路由群組功能。我們可以將相關的路由放在一起，並為這些路由添加共同的前綴，這樣可以讓程式碼更加清晰。
群組化路由範例
// routes/frontend.php
Route::prefix('shopping')->group(function(){
Route::get('step-1', [ShoppingController::class, 'step01'])->name('step-1');
Route::get('step-2', [ShoppingController::class, 'step02'])->name('step-2');
Route::get('step-3', [ShoppingController::class, 'step03'])->name('step-3');
Route::post('shopping-create', [ShoppingController::class, 'step04'])->name('shopping-create');
});
在這個範例中，我們將所有與購物流程相關的路由放入 shopping 群組中，並給每個路由設置了對應的名稱（name() 方法）。這樣，我們就可以在 Vue.js 中輕鬆地引用這些路由。
Vue.js 中頁面切換
使用 Inertia.js，我們可以在 Vue.js 中進行頁面切換，而不需要刷新整個頁面。這意味著我們可以像單頁應用（SPA）一樣操作，不需要重新載入頁面或重新渲染整個頁面。
頁面切換範例
在 StepOneView.vue 中，我們可以這樣實現頁面切換：
<template>
<button @click="nextStep">下一步</button>
</template>
<script>
import { router } from '@inertiajs/vue3';
export default {
data() {
return {
data: {
furniture1: 0,
furniture2: 0,
furniture3: 0,
},
};
},
methods: {
nextStep() {
if (this.data.furniture1 + this.data.furniture2 + this.data.furniture3 === 0) {
alert('請選擇商品');
return;
}
// 使用 Inertia 進行頁面跳轉
router.get(route('step-2'));
sessionStorage.setItem('object', JSON.stringify(this.data));
},
},
};
</script>
在這段程式碼中，當用戶按下「下一步」按鈕時，我們會檢查表單是否填寫完整。如果滿足條件，就使用 router.get() 方法來跳轉到下一個步驟，並把資料保存在 sessionStorage 中。
StepThreeView 中資料提交
在 StepThreeView.vue 中，我們需要將表單資料提交到後端，並儲存到資料庫中：
<template>
<button @click="submitForm">提交</button>
</template>
<script>
import { router } from '@inertiajs/vue3';
export default {
data() {
return {
deliverData: {
name: '',
phone: '',
email: '',
addressCity: '',
addressNumber: '',
addressLocation: '',
},
};
},
methods: {
submitForm() {
if (!this.deliverData.name || !this.deliverData.phone || !this.deliverData.email || !this.deliverData.addressCity || !this.deliverData.addressNumber || !this.deliverData.addressLocation) {
alert('請全部填寫');
return;
}
// 提交資料
router.post(route('shopping-create'), {
name: this.deliverData.name,
email: this.deliverData.email,
phone: this.deliverData.phone,
address01: this.deliverData.addressCity,
address02: this.deliverData.addressNumber,
address03: this.deliverData.addressLocation,
});
},
},
};
</script>
這段程式碼會將表單資料提交到 step04 路由，該路由會將資料儲存到資料庫並跳轉到下一個步驟。
結論
在這篇文章中，介紹了如何使用 Laravel 和 Vue.js 搭配 Inertia.js 建立現代化的 Web 應用。透過 群組化路由 和清晰的控制器設計，我們能夠有效地管理頁面邏輯和資料流，並且使用 Inertia.js 提供的頁面跳轉機制來保持應用的流暢性和高效性。這樣的架構讓前後端協作更加簡便，同時也能夠利用 Vue.js 來提供豐富的使用者介面。接下來會介紹使用 Laravel 和 Vue 3 建立電影資料管理系統。
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
大家可以考慮多多分享文章和考慮訂閱沙龍方案或贊助等喔!不過請注意不要違反著作權等行為。當然決定權都在於您，不會干涉您的任何決定。
提醒，文章僅供正當的知識參考，文章不負任何責任。
