Laravel8+Vue3+Bootstrap5實作TODO List ep04:製作取得待辦事項的API

Table of Contents

Table of Contents

使用Laravel8+Vue3+Bootstrap5實作TODO List網頁應用程式的系列文章第四篇。
本文將介紹如何建立一個GET API來取得測試資料。

教學影片

Route

RouteServiceProvider中定義了基本的兩組route

  • web: routes/web.php
  • api: routes/api.php

兩個route檔案都是在routes資料夾下。

HTTP Request Methods

以下列出四種常見的發送請求的方法。

  • GET: 表示用來取得資料。
  • POST: 表示用來儲存資料。
  • PUT: 表示用來更新資料。
  • DELETE: 表示用來刪除資料。

製作第一個API Route

api.php

使用get方式。


use App\Http\Controllers\TodoController

Route::get('/todos', [TodoController::class, 'index'])

可以使用指令來檢查Route設定。

php artisan route:list

TodoController

編輯index函數

function index()
{
    return response()->json(Todo::orderBy('created_at', 'DESC')->get());
}

檢查GET API結果

用瀏覽器開啟以下網址。

https://8010-xxxxxxxxxx/api/todos/

記得要有todos前要有api

畫面上有顯示出資料庫上todos表的內容就表示你的API被正確地執行完成了。