網站前端相關文章
保持學習的工程師
更新於 2024/12/15閱讀時間約 14 分鐘

Laravel (資料操作並連接其他資料表)

在這篇文章中，我們將介紹如何使用 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 請求：我們使用 fetch API 來發送 POST 請求，並將資料轉換成 JSON 格式。

5. 結論

通過這篇文章，學習了如何在 Laravel 中使用 MVC 架構進行資料操作，並使用外鍵建立資料表之間的關聯。也展示了如何使用前端技術，如 Vue + TypeScript，來向後端發送資料創建請求。這樣的架構可以幫助開發者更清晰地組織程式碼，提高維護性和擴展性。


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

 

大家可以考慮多多分享文章和考慮訂閱沙龍方案或贊助等喔!不過請注意不要違反著作權等行為。當然決定權都在於您，不會干涉您的任何決定。接下來會介紹從Seeder到視圖展示。

 

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

分享至
成為作者繼續創作的動力吧！
網站前端相關文章
追蹤
網站前端相關文章
追蹤
付費閱讀
從 Google News 追蹤更多 vocus 的最新精選內容從 Google News 追蹤更多 vocus 的最新精選內容

作者的相關文章

阿棋的沙龍 的其他內容

你可能也想看

發表回應

成為會員 後即可發表留言
© 2024 vocus All rights reserved.