進入第 22 天，這天或許會感覺跟第 13 天：前端 Vue3 搭配後端 Laravel 9.x很相似...
確實！不過這天要練習的是 api，說白點！先前習慣用 routes/web.php 搭配 Blade 視圖看畫面，這裡主要是請前端用 api 呼叫，所以後端要建立的路由在 routes/api.php。

Laravel 提供的 API 開發工具

圖片來源：30天 JavaScript 提升計畫：從零到精通結合2024年的創新功能 - 第 11 天：API 與 Axios

就如同上圖要表達的一樣，前後端溝通就像在餐廳用餐(前端)請服務生點餐(API 請求)交送給廚師(後端)一樣，前後之間的溝通橋樑就是 API，所以進入主題吧！

定義 API 路由
在 routes/api.php 檔案中定義 API 路由，這裡使用 apiResource，laravel 會自動建立一個 RESTful 資源路由，包括 index, store, show, update, destroy 方法。

回顧：第 4 天：控制器的資源控制器(Resource Controllers)

use App\Http\Controllers\Api\PostController;

Route::apiResource('posts', PostController::class);

創建 API 控制器
指令 php artisan make:controller Api/PostController --api 生成控制器類，在 app/Http/Controllers/Api/PostController.php 中使用 API 方法：

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Models\Post;
use Illuminate\Http\Request;

class PostController extends Controller
{
    public function index()
    {
        return response()->json(Post::all());
    }

    public function store(Request $request)
    {
        $post = Post::create($request->all());
        return response()->json($post, 201);
    }

    public function show(Post $post)
    {
        return response()->json($post);
    }

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

    public function destroy(Post $post)
    {
        $post->delete();
        return response()->json(null, 204);
    }
}

前端與後端的交互

前端安排用 Vue3.4 搭配 Axios 進行 API 請求，處理 JSON 數據。

Axios

1. 前後端要溝通的橋樑主要使用 Axios 套件，所以這裡要先安裝套件。

   npm install axios
   

2. 配置 Axios
   在 resources/js/axios.js 中配置 Axios：

   import axios from 'axios';
   
   axios.defaults.baseURL = '/api';
   axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
   
   export default axios;
   

Vue3.4
安裝流程與相同，可以參考，過程中有其他問題，歡迎提出一起討論解決！

回顧：第 13 天：前端 Vue3 搭配後端 Laravel 9.x的安裝 Vite (選擇自己的前端框架)

這裡主要建立一個元件 resources/js/components/PostList.vue

<template>
  <div>
    <h1>Posts</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
    <button @click="fetchPosts">Load Posts</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const posts = ref([]);

const fetchPosts = async () => {
  try {
    const response = await axios.get('/posts');
    posts.value = response.data;
  } catch (error) {
    console.error('Error fetching posts:', error);
  }
};
</script>

畫面操作呼叫後端 api

這部分主要測試 2 件事：

• 實現一個簡單的前後端交互示例，例如：從 Vue 3 前端向 Laravel API 發送請求並顯示結果。
• 實現 CRUD 操作，測試前端和後端的數據流。

實現前後端交互

1. 在 Laravel 中測試 API
   使用 Postman 測試 API 路由：發送 GET 請求到 http://127.0.0.1:8000/api/posts，可以看到所有的貼文資料。

2. 在 Vue 元件中呼叫 API

   • 在 resources/views/welcome.blade.php 中新增 Vue 元件，這是前後端畫面的重點溝通橋樑：

     <div id="app">
       <post-list></post-list>
     </div>
     
     <script src="{{ mix('js/app.js') }}"></script>
     

   • 在 Vue 元件中，點擊「Load Posts」按鈕應該會觸發 fetchPosts 方法，呼叫 Laravel API 並顯示貼文資料。

實現 CRUD 操作

1. 建立、更新和刪除操作
   在 PostController 中處理相應的請求方法，例如 store、update 和 destroy，然後在 Vue 元件中實作表單提交或按鈕點擊來呼叫這些 API 方法。

2. 前端表單處理

   <template>
     <div>
       <h2>Posts</h2>
       <ul>
         <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
       </ul>
       <button @click="fetchPosts">Load Posts</button>
     </div>
     <hr>
     <div>
       <h2>Create Post</h2>
       <form @submit.prevent="createPost">
         <input v-model="newPost.title" placeholder="Post Title" />
         <textarea v-model="newPost.content" placeholder="Post Content"></textarea>
         <button type="submit">Create Post</button>
       </form>
     </div>
   </template>
   
   <script setup>
   import { ref } from 'vue';
   import axios from 'axios';
   
   const posts = ref([]);
   const newPost = ref({ title: '', content: '' });
   
   const fetchPosts = async () => {
     try {
       const response = await axios.get('/posts');
       posts.value = response.data;
     } catch (error) {
       console.error('Error fetching posts:', error);
     }
   };
   
   const createPost = async () => {
     try {
       await axios.post('/posts', newPost.value);
       newPost.value = { title: '', content: '' };
       fetchPosts();
     } catch (error) {
       console.error('Error creating post:', error);
     }
   };
   </script>