建立資料

寫資料前要先有欄位，找到前面指令建立的 create_todos_table migration 檔案，
加上一個 name 欄位

public function up()
{
    Schema::create('todos', function (Blueprint $table) {
        $table->id();
        $table->string('name'); // 加入 name
        $table->timestamps();
    });
}

然後執行 migration

sail artisan migrate

Route::resource 會建立 POST /todo 路由，對應到 TodoController 中的 store 方法。

所以這就來改寫 store() 方法，加入建立 Todo 資料的功能

//app\Http\Controllers\TodoController.php

public function store(Request $request)
{ 
    $data = $request->all(); // 取得請求中的 body 資料

    $todo = new Todo;

    $todo->name = $data['name'];

    $todo->save();
}

Eloquent 建立資料的基本方法從宣告新的 Model 實例開始

$todo = new Todo;

宣告後可以任意編輯欄位資料，這時候都還沒進資料庫

$todo->name = $data['name'];

最後再儲存進資料庫

$todo->save();

基礎的建立資料方法就這樣，拆成一行行的好處是可以更清晰的撰寫每一欄資料的處理邏輯，不過如果不用對資料做太多處裡的話，可以用 create() 方法一口氣建立資料

$todo = Todo::create([
    'name' => $data['name'],
]);

create() 會直接寫入資料庫，寫入成功後會回傳該筆資料的實例。

不過 create 會用陣列一次寫入多個欄位，這樣子 Model 中必須定義 $fillable ，指定那些欄位可以被大量寫入的方法更改，才能夠用 create() 方法建立資料。

// app\Models\Todo.php

class Todo extends Model
{
    //...

    protected $fillable = [
        'name',
    ];
}

如果有定義 $fillable 但是沒將欄位定義在裡面，當執行像是 create() 這類方法時，會把資料中不包含在 $fillable 中的鍵值過濾掉，變得寫不進資料庫。

前端新增資料請求

後端控制器準備好之後回到前端準備發送請求，之前在 Dashboard 準備好輸入框跟按鈕了，就等按下按鈕後對後端發送請求。

//...

import { Head, Link, useForm } from "@inertiajs/inertia-react";

//...

export default function Dashboard(props) {
    const classes = useStyles();
    const { todos } = props;
    const { data, setData, post, processing, errors, reset, transform } =
        useForm({
            todo: "",
        });

    const handleChange = (event) => {
        setData(
            event.target.name,
            event.target.type === "checkbox"
                ? event.target.checked
                : event.target.value
        );
    };

    const submit = (e) => {
        e.preventDefault();
        
        // 轉換欄位名稱        
        transform((data) => ({
            name: data.todo,
        }));

        // 發送請求
        post(route("todo.store"));
    };

    //...
}    

一步步來說明。

useForm 是 inertia.js 的 hook ，用來管理表單資料跟發送請求。

useForm 的 post 就是發送 post 請求到指定路由。

route("todo.store") ， route 會找尋 name 符合的 route ，因為我用了 Route::resource 建立 todo 的路由，所以會有預設的 todo.store 這個 name。

這邊也可以直接指定路由

post('/todo');

useForm 的 transform 可以在發送請求前將資料做映射，像這邊將 todo 改為 name 才能對上後端的資料欄位名稱。

完成後讓 mix 重新編譯前端畫面，重整，然後輸入值在發送試試，成功的話可以到資料庫中看看新建的資料。

接下來要將寫入的資料讀取出來，等下一篇吧。

References

Eloquent:Getting Started