在這篇文章中，我們將介紹如何使用 Laravel 的 MVC（模型-視圖-控制器）架構來處理資料的創建、更新、刪除操作，並展示如何使用外鍵連接其他資料表。我們將從前端發送請求到後端，並演示如何在 Controller 中處理這些請求來操作資料。
1. 在 Laravel 中處理資料創建操作
在 Laravel 中，我們通常使用 Controller 來處理資料的 CRUD 操作（創建、讀取、更新、刪除）。以下是我們如何處理資料創建操作的範例。
BooksController：創建新書籍資料
<?php
namespace App\Http\Controllers;
use App\Models\Book;
use Illuminate\Http\Request;
class BooksController extends Controller
{
// 新增資料
public function create(Request $request)
{
// 使用 Laravel 的 Eloquent ORM 來創建新資料
Book::create([
'publisher_id' => $request->publisher_id,
'title' => $request->title,
'author' => $request->author,
'date' => $request->date,
'price' => $request->price,
]);
return ['message' => 'ok']; // 回傳成功訊息
}
}
在上面的 BooksController 中，我們定義了一個 create 方法，這個方法接收來自前端的請求資料，並將其存入資料庫。
路由設置
在 routes/web.php 中，我們需要設置對應的路由來處理資料創建的請求：
use App\Http\Controllers\BooksController;
Route::post('/create-book', [BooksController::class, 'create']);
2. 如何使用 Laravel 的 Eloquent 關聯
Laravel 的 Eloquent ORM 使得處理資料關聯變得非常簡單。在本範例中，將學習如何在 Book 模型中使用 belongsTo 關聯來連接出版社資料。
更新 Books 模型：定義與 Publisher 的關聯
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Book extends Model
{
use HasFactory;
protected $table = 'books';
protected $fillable = [
'title',
'author',
'date',
'price',
'publisher_id',
];
// 建立與 Publisher 之間的關聯
public function publisher()
{
// 一對多關聯，使用 belongsTo() 方法
return $this->belongsTo(Publisher::class);
}
}
更新 Publisher 模型：定義與 Book 的關聯
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Publisher extends Model
{
use HasFactory;
protected $table = 'publishers';
protected $fillable = [
'name',
'phone',
'email',
'address',
'manager_id',
'person',
];
// 建立與 Book 之間的關聯
public function books()
{
// 一對多關聯，使用 hasMany() 方法
return $this->hasMany(Book::class);
}
}
這樣，我們就能夠在 Book 模型中輕鬆地通過 publisher 來獲取相關的出版社資料，反之，透過 books 來獲取某出版社下的所有書籍資料。
3. 使用外鍵連接資料表
有時，我們需要在資料表中加入外鍵來建立兩個資料表之間的關聯。下面是如何在 books 資料表中添加外鍵 publisher_id 的方法。
創建資料表遷移：增加外鍵欄位
首先，我們需要為 books 資料表創建一個遷移文件，並新增 publisher_id 欄位：
php artisan make:migration add_publisher_id_to_books_table --table=books
在遷移文件中，我們會為 books 資料表新增 publisher_id 欄位，並將其設置為外鍵。
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::table('books', function (Blueprint $table) {
$table->unsignedBigInteger('publisher_id')->default(0)->comment('出版社id');
// 定義外鍵，引用 publishers 表的 id 欄位
$table->foreign('publisher_id')->references('id')->on('publishers');
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::table('books', function (Blueprint $table) {
$table->dropForeign(['publisher_id']);
$table->dropColumn('publisher_id');
});
}
};
執行這個遷移來更新資料表結構：
php artisan migrate
4. 前端使用 Vue + TypeScript 發送資料請求
接下來，我們將展示如何使用前端技術，如 Vue 3 和 TypeScript，來發送 POST 請求創建資料。
在 bookView.blade.php 中發送 POST 請求
我們將在 bookView.blade.php 中使用原生 JavaScript 實現資料創建。當用戶點擊按鈕時，將觸發一個 POST 請求，將資料傳送到 Laravel 的後端。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新增書籍</title>
</head>
<body>
<button id="create-btn">新增書籍</button>
<script>
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
// 當點擊新增書籍按鈕時，發送 POST 請求
document.getElementById('create-btn').addEventListener('click', function() {
fetch('/create-book', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': csrfToken, // 防止 CSRF 攻擊
},
body: JSON.stringify({
publisher_id: 1, // 假設已選擇的出版社 ID
title: '書本名稱',
author: '作者',
date: '2024-03-03',
price: 550,
})
})
.then(res => res.json())
.then(json => {
if (json.message === 'ok') {
alert('新增成功');
} else {
alert('新增失敗');
}
})
.catch(err => {
console.error('發生錯誤:', err);
});
});
</script>
</body>
</html>
註解說明：
- CSRF Token：為了保護應用免受跨站請求偽造（CSRF）攻擊，我們必須將 CSRF token 隨請求一同發送。Laravel 提供了一個
meta標籤來方便取得這個 token。 - 發送 JSON 請求：我們使用
fetchAPI 來發送 POST 請求，並將資料轉換成 JSON 格式。
5. 結論
通過這篇文章，學習了如何在 Laravel 中使用 MVC 架構進行資料操作，並使用外鍵建立資料表之間的關聯。也展示了如何使用前端技術，如 Vue + TypeScript，來向後端發送資料創建請求。這樣的架構可以幫助開發者更清晰地組織程式碼，提高維護性和擴展性。
對於這類的撰寫方式習慣嗎?歡迎多多進行良性的知識交流喔!目前是在學習階段，大家有不同看法的話歡迎進行良性的知識交流!
大家可以考慮多多分享文章和考慮訂閱沙龍方案或贊助等喔!不過請注意不要違反著作權等行為。當然決定權都在於您，不會干涉您的任何決定。接下來會介紹從Seeder到視圖展示。
提醒，文章僅供正當的知識參考，文章不負任何責任。
