vue实现curd

Vue 实现 CRUD 功能

安装 Vue 及相关依赖

确保已安装 Vue.js，推荐使用 Vue CLI 或 Vite 创建项目。对于数据请求，可安装 axios 或使用原生 fetch。

npm install vue axios

创建数据模型

定义数据模型，通常是一个数组或对象，用于存储 CRUD 操作的数据。

data() {
  return {
    items: [],
    formData: {
      id: '',
      name: '',
      description: ''
    },
    editing: false
  };
}

实现 Create 功能

通过表单收集数据，发送 POST 请求到后端或直接添加到前端数据列表。

methods: {
  createItem() {
    if (this.editing) {
      // 更新逻辑
    } else {
      this.items.push({ ...this.formData, id: Date.now() });
      this.resetForm();
    }
  },
  resetForm() {
    this.formData = { id: '', name: '', description: '' };
    this.editing = false;
  }
}

实现 Read 功能

展示数据列表，通常通过 v-for 指令渲染。

<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }} - {{ item.description }}
      <button @click="editItem(item)">Edit</button>
      <button @click="deleteItem(item.id)">Delete</button>
    </li>
  </ul>
</template>

实现 Update 功能

编辑现有数据项，将表单数据填充为选中项的数据。

methods: {
  editItem(item) {
    this.formData = { ...item };
    this.editing = true;
  }
}

实现 Delete 功能

通过 ID 删除数据项。

methods: {
  deleteItem(id) {
    this.items = this.items.filter(item => item.id !== id);
  }
}

表单绑定

使用 v-model 实现表单数据的双向绑定。

<template>
  <form @submit.prevent="createItem">
    <input v-model="formData.name" placeholder="Name" required>
    <input v-model="formData.description" placeholder="Description">
    <button type="submit">{{ editing ? 'Update' : 'Create' }}</button>
    <button type="button" @click="resetForm" v-if="editing">Cancel</button>
  </form>
</template>

与后端交互

使用 axios 发送 HTTP 请求，实现前后端数据同步。

methods: {
  async fetchItems() {
    const response = await axios.get('/api/items');
    this.items = response.data;
  },
  async createItem() {
    if (this.editing) {
      await axios.put(`/api/items/${this.formData.id}`, this.formData);
    } else {
      const response = await axios.post('/api/items', this.formData);
      this.items.push(response.data);
    }
    this.resetForm();
    this.fetchItems();
  },
  async deleteItem(id) {
    await axios.delete(`/api/items/${id}`);
    this.fetchItems();
  }
},
created() {
  this.fetchItems();
}

完整示例

以下是一个完整的 Vue CRUD 组件示例：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input v-model="formData.name" placeholder="Name" required>
      <input v-model="formData.description" placeholder="Description">
      <button type="submit">{{ editing ? 'Update' : 'Create' }}</button>
      <button type="button" @click="resetForm" v-if="editing">Cancel</button>
    </form>
    <ul>
      <li v-for="item in items" :key="item.id">
        {{ item.name }} - {{ item.description }}
        <button @click="editItem(item)">Edit</button>
        <button @click="deleteItem(item.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
      formData: {
        id: '',
        name: '',
        description: ''
      },
      editing: false
    };
  },
  methods: {
    async fetchItems() {
      const response = await axios.get('/api/items');
      this.items = response.data;
    },
    async handleSubmit() {
      if (this.editing) {
        await axios.put(`/api/items/${this.formData.id}`, this.formData);
      } else {
        const response = await axios.post('/api/items', this.formData);
        this.items.push(response.data);
      }
      this.resetForm();
      this.fetchItems();
    },
    editItem(item) {
      this.formData = { ...item };
      this.editing = true;
    },
    async deleteItem(id) {
      await axios.delete(`/api/items/${id}`);
      this.fetchItems();
    },
    resetForm() {
      this.formData = { id: '', name: '', description: '' };
      this.editing = false;
    }
  },
  created() {
    this.fetchItems();
  }
};
</script>

注意事项

• 表单验证：添加必要的验证逻辑，确保数据的完整性。
• 错误处理：对 API 请求进行错误处理，显示友好的错误信息。
• 状态管理：对于大型应用，考虑使用 Vuex 或 Pinia 管理状态。
• 响应式更新：确保数据变化后视图及时更新。