Laravel8+Vue3+Bootstrap5實作TODO List ep05:製作新增、更新、刪除待辦事項的API

Table of Contents

Table of Contents

使用Laravel8+Vue3+Bootstrap5實作TODO List網頁應用程式的系列文章第五篇。
本文將介紹如何建立新增、更新、刪除待辦事項的API。

教學影片

新增待辦事項

  • 請求方法: post
  • URL路徑: /todo
  • 處理函數: TodoController@store

TodoController@store

public function store(Request $request)
{
    $newTodo = new Todo();
    $newTodo->body = $request->body;
    $newTodo->save();
    return response->json($newTodo);
}

使用curl測試

使用以下指令做POST的測試。

curl -X POST -H "content-type: application/json" -d'{"body":"learn php"}' 127.0.0.1:8010/api/todo

更新待辦事項

  • 請求方法: put
  • URL路徑: /todo/{todo}
  • 處理函數: TodoController@update

TodoController@update

public function update(Request $request, todo $todo)
{
    $todo->update($request->all());
    return response()->json($todo);
}

使用curl測試

使用以下指令做PUT的測試。

curl -X PUT -H "content-type: application/json" -d'{"body":"learn laravel"}' 127.0.0.1:8010/api/todo/12

刪除待辦事項

  • 請求方法: delete
  • URL路徑: /todo/{todo}
  • 處理函數: TodoController@destroy

TodoController@update

public function destroy(todo $todo)
{
    $todo->delete();
    return response(null, Response::HTTP_NO_CONTENT);
}

使用curl測試

使用以下指令做DELETE的測試。

curl -X DELETE -H "content-type: application/json" -d'{}' 127.0.0.1:8010/api/todo/1