当前位置：首页 > VUE

vue实现CRUD

2026-01-13 04:51:36VUE

Vue 实现 CRUD 操作

基本结构搭建

使用 Vue CLI 或 Vite 创建一个新项目，安装必要的依赖如 axios 用于 HTTP 请求。项目结构通常包含组件目录（如 components/）、页面目录（如 views/）和状态管理目录（如 store/）。

数据列表展示

通过 v-for 指令渲染数据列表，绑定到从后端 API 获取的数据。示例代码：

<template>
  <div>
    <table>
      <tr v-for="item in items" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.description }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  async created() {
    const response = await axios.get('/api/items');
    this.items = response.data;
  }
};
</script>

创建数据（Create）

添加表单并使用 v-model 绑定输入字段，提交时调用 API 创建数据。示例代码：

<template>
  <form @submit.prevent="addItem">
    <input v-model="newItem.name" placeholder="Name">
    <input v-model="newItem.description" placeholder="Description">
    <button type="submit">Add</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newItem: { name: '', description: '' }
    };
  },
  methods: {
    async addItem() {
      await axios.post('/api/items', this.newItem);
      this.newItem = { name: '', description: '' };
      // 刷新列表或更新本地数据
    }
  }
};
</script>

更新数据（Update）

通过编辑表单修改数据，调用 API 更新后端数据。示例代码：

<template>
  <div v-if="editingItem">
    <input v-model="editingItem.name">
    <input v-model="editingItem.description">
    <button @click="updateItem">Save</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editingItem: null
    };
  },
  methods: {
    async updateItem() {
      await axios.put(`/api/items/${this.editingItem.id}`, this.editingItem);
      this.editingItem = null;
      // 刷新列表或更新本地数据
    }
  }
};
</script>

删除数据（Delete）

通过按钮触发删除操作，调用 API 删除数据。示例代码：

<template>
  <button @click="deleteItem(item.id)">Delete</button>
</template>

<script>
export default {
  methods: {
    async deleteItem(id) {
      await axios.delete(`/api/items/${id}`);
      // 刷新列表或更新本地数据
    }
  }
};
</script>

状态管理（可选）

对于复杂应用，可以使用 Vuex 或 Pinia 集中管理 CRUD 操作的状态。示例（Pinia）：

// store/items.js
import { defineStore } from 'pinia';

export const useItemsStore = defineStore('items', {
  state: () => ({
    items: []
  }),
  actions: {
    async fetchItems() {
      const response = await axios.get('/api/items');
      this.items = response.data;
    },
    async addItem(item) {
      await axios.post('/api/items', item);
      await this.fetchItems();
    }
  }
});

实时更新（可选）

结合 WebSocket 或 Server-Sent Events (SSE) 实现数据实时同步，确保 UI 自动反映后端变化。

错误处理

添加 try-catch 块或全局拦截器处理 API 错误，增强用户体验：

vue实现CRUD

axios.interceptors.response.use(
  response => response,
  error => {
    console.error('API Error:', error);
    return Promise.reject(error);
  }
);