Vue3+Axios

使用 Vue3 和 Axios 實現 CRUD 操作
在當今的前端開發中，Vue.js 作為一款流行的 JavaScript 框架，正在被越來越多的開發者所青睞。尤其是 Vue 3 引入了 Composition API 和更優雅的響應式處理，使得模板編寫和狀態管理變得更加直觀。在這篇部落格中，我將帶領大家透過一個簡單的示例，使用 Vue3 和 Axios 實現基礎的 CRUD（建立、讀取、更新、刪除）操作。

準備工作
在開始之前，我們需要確保已經在專案中安裝了 Vue3 和 Axios。如果您的專案還沒有這些庫，可以透過以下命令安裝它們：

npm install vue@next axios
接下來，我們會使用一個簡單的 JSON API 作為源。為了方便演示，我們將使用 JSONPlaceholder 這樣一個提供虛擬 REST API 的網站。

建立 Vue 3 專案
如果你還沒有建立 Vue 3 專案，可以透過 Vue CLI 迅速啟動一個專案：

npm install -g @vue/cli
vue create vue-crud-example
cd vue-crud-example
在專案的根目錄下，確保安裝了 Axios：

npm install axios
專案結構
我們的專案結構可能如下所示：

vue-crud-example/
├── public/
├── src/
│   ├── components/
│   │   └── CrudComponent.vue
│   ├── App.vue
│   ├── main.js
└── package.json
我們將在 components 資料夾中建立一個新的元件 CrudComponent.vue，並在其中實現我們的 CRUD 功能。

實現 CRUD 操作
現在，讓我們開始編寫 CrudComponent.vue 檔案：

<template>
  <div class="crud-container">
    <h1>Vue 3 CRUD Example</h1>
    
    <form @submit.prevent="createPost">
      <input v-model="newPost.title" placeholder="Title" required />
      <textarea v-model="newPost.body" placeholder="Body" required></textarea>
      <button type="submit">Create Post</button>
    </form>

    <div v-if="posts.length">
      <h2>Posts</h2>
      <ul>
        <li v-for="post in posts" :key="post.id">
          <3>{{ post.title }}</h3>
          <p>{{ post.body }}</p>
          <button @click="editPost(post)">Edit</button>
          <button @click="deletePost(post.id)">Delete</button>
        </li>
      </ul>
    </div>

    <div v-if="isEditing">
      <h2>Edit Post</h2>
      <form @submit.prevent="updatePost">
        <input v-model="currentPost.title" placeholder="Title" required />
        <textarea v-model="currentPost.body" placeholder="Body" required></textarea>
        <button type="submit">Update Post</button>
        <button @click="cancelEdit">Cancel</button>
      </form>
    </div>
  </div>
</template>

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

export default {
  setup() {
    const posts = ref([]);
    const newPost = ref({ title: '', body: '' });
    const isEditing = ref(false);
    const currentPost = ref({ id: null, title: '', body: '' });

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

    const createPost = async () => {
      try {
        const = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost.value);
        posts.value.push(response.data);
        newPost.value { title: '', body: '' };
      } catch (error)        console.error(" creating post:", error);
      }
    };

    const editPost = (post) => {
      isEditing.value = true;
      currentPost.value = { ...post };
    };

    const updatePost = async () => {
      try {
        await axios.put(`https://jsonplaceholder.typicode.com/posts/${currentPost.value.id}`, currentPost.value);
        const index = posts.value.findIndex(post => post.id === currentPost.value.id);
        posts.value[index] = currentPost.value;
        cancelEdit();
      } catch (error) {
        console.error("Error updating post:", error);
      }
    };

    const deletePost async (id) => {
      try {
        await axios.delete(`https://jsonplaceholder.typicode.com/posts/${id}`);
        posts.value = posts.value.filter(post => post.id !== id);
      } catch (error) {
        console.error("Error deleting post:", error);
      }
    };

    const cancelEdit = () => {
      isEditing.value = false;
      currentPost.value = { id: null, title: '', body: '' };
    };

    onMounted(fetch);

    return {
      posts,
      newPost,
      isEditing,
      currentPost,
      fetchPosts,
      createPost,
      editPost,
      updatePost,
      deletePost,
      cancelEdit,
    };
  },
};
</script>

<style>
ud-container {
  max-width: 600px;
  margin: 0 auto;
}
</style>
程式碼分析
. 模板部分： 我們定義了一個簡單的表單，使用者可以輸入新的博文標題和內容。透過 v-for 指令渲染部落格列表，並新增編輯和刪除按鈕。

響應式資料：

posts：儲存從 API 獲取的所有部落格文章。
newPost：用於建立新文章的資料模型。
isEditing：標誌，表明當前是否在編輯狀態。
currentPost：儲存當前編輯的文章資訊。
API 請求：

fetchPosts：在元件掛載時執行，從 API 獲取所有文章。
createPost：向 API 傳送新文章建立請求。
editPost：將選中的文章資料填入編輯表單。
updatePost：更新選中的文章。
deletePost：刪除選中的文章。
樣式：我們為元件新增了一些基本樣式，使其更可讀。

執行專案
完成後，我們只需在命令列中執行以下命令，啟動開發伺服器：

npm run serve
開啟瀏覽器訪問 http://localhost:8080，你將能夠看到之前寫的 CRUD 示例。您現在可以建立新的帖子，檢視帖子，更新或刪除您不想要的帖子。

總結
在當前的前端開發中，Vue3 和 Axios 無疑是構建高效應用的理想選擇。透過本教程所示的簡單步驟，您可以快速掌握如何利用這兩個工具實現 CRUD 操作