vue实现增删改查
Vue 实现增删改查
在 Vue 中实现增删改查（CRUD）功能是常见的需求，通常涉及前端与后端 API 的交互。以下是一个基于 Vue 3 和 Composition API 的实现示例，假设后端 API 已提供相应的接口。
初始化项目与依赖
确保项目已安装 Vue 3 和 axios（用于 HTTP 请求）。若未安装，可以通过以下命令安装：
npm install axios数据列表展示
定义一个响应式数据列表，并通过 axios 从后端获取数据：
<template>
<div>
<table>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.description }}</td>
<td>
<button @click="editItem(item)">编辑</button>
<button @click="deleteItem(item.id)">删除</button>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const items = ref([]);
const fetchItems = async () => {
const response = await axios.get('/api/items');
items.value = response.data;
};
onMounted(() => {
fetchItems();
});
</script>新增数据
通过表单提交新增数据，并调用后端 API：
<template>
<form @submit.prevent="addItem">
<input v-model="newItem.name" placeholder="名称" />
<input v-model="newItem.description" placeholder="描述" />
<button type="submit">添加</button>
</form>
</template>
<script setup>
const newItem = ref({
name: '',
description: ''
});
const addItem = async () => {
await axios.post('/api/items', newItem.value);
newItem.value = { name: '', description: '' };
fetchItems(); // 重新加载列表
};
</script>编辑数据
通过表单编辑现有数据，并调用后端 API 更新：
<template>
<form v-if="editingItem" @submit.prevent="updateItem">
<input v-model="editingItem.name" placeholder="名称" />
<input v-model="editingItem.description" placeholder="描述" />
<button type="submit">保存</button>
<button @click="cancelEdit">取消</button>
</form>
</template>
<script setup>
const editingItem = ref(null);
const editItem = (item) => {
editingItem.value = { ...item };
};
const updateItem = async () => {
await axios.put(`/api/items/${editingItem.value.id}`, editingItem.value);
editingItem.value = null;
fetchItems();
};
const cancelEdit = () => {
editingItem.value = null;
};
</script>删除数据
通过调用后端 API 删除数据：
<script setup>
const deleteItem = async (id) => {
await axios.delete(`/api/items/${id}`);
fetchItems();
};
</script>完整示例
将以上部分整合为一个完整的 Vue 组件：
<template>
<div>
<form @submit.prevent="addItem">
<input v-model="newItem.name" placeholder="名称" />
<input v-model="newItem.description" placeholder="描述" />
<button type="submit">添加</button>
</form>
<form v-if="editingItem" @submit.prevent="updateItem">
<input v-model="editingItem.name" placeholder="名称" />
<input v-model="editingItem.description" placeholder="描述" />
<button type="submit">保存</button>
<button @click="cancelEdit">取消</button>
</form>
<table>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.description }}</td>
<td>
<button @click="editItem(item)">编辑</button>
<button @click="deleteItem(item.id)">删除</button>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';
const items = ref([]);
const newItem = ref({ name: '', description: '' });
const editingItem = ref(null);
const fetchItems = async () => {
const response = await axios.get('/api/items');
items.value = response.data;
};
const addItem = async () => {
await axios.post('/api/items', newItem.value);
newItem.value = { name: '', description: '' };
fetchItems();
};
const editItem = (item) => {
editingItem.value = { ...item };
};
const updateItem = async () => {
await axios.put(`/api/items/${editingItem.value.id}`, editingItem.value);
editingItem.value = null;
fetchItems();
};
const cancelEdit = () => {
editingItem.value = null;
};
const deleteItem = async (id) => {
await axios.delete(`/api/items/${id}`);
fetchItems();
};
onMounted(() => {
fetchItems();
});
</script>注意事项
- 后端 API 需支持对应的 RESTful 接口（GET、POST、PUT、DELETE）。
- 表单验证未在示例中体现，实际项目中建议添加。
- 错误处理（如网络请求失败）可根据需求补充。
