Vue 中实现增删改查功能
增删改查（CRUD）是 Web 应用程序中的基本操作，它可以让我们在数据库中创建、读取、更新和删除数据。在 Vue.js 中实现 CRUD 功能相对简单。
创建
创建新记录时，我们将使用 v-model 双向绑定数据并向服务器发出 POST 请求。例如：
<code class="html"><template><form>
<input v-model="newItem.name"><button type="submit">Create</button>
</form>
</template><script>
export default {
data() {
return {
newItem: { name: '' }
}
},
methods: {
createItem() {
// 向服务器发送 POST 请求
axios.post('/items', this.newItem).then(() => {
// 重新获取数据或执行其他操作
})
}
}
}
</script></code>读取
读取数据时，我们将向服务器发出 GET 请求。例如：
<code class="html"><template><ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul></template><script>
export default {
data() {
return {
items: []
}
},
mounted() {
// 在组件挂载时向服务器发送 GET 请求
axios.get('/items').then((response) => {
this.items = response.data
})
}
}
</script></code>更新
更新记录时，我们将使用 v-model 编辑数据并向服务器发出 PUT 请求。例如：
<code class="html"><template><form>
<input v-model="item.name"><button type="submit">Update</button>
</form>
</template><script>
export default {
props: ['item'],
methods: {
updateItem() {
// 向服务器发送 PUT 请求
axios.put(`/items/${this.item.id}`, this.item).then(() => {
// 重新获取数据或执行其他操作
})
}
}
}
</script></code>删除
删除记录时，我们将向服务器发出 DELETE 请求。例如：
<code class="html"><template><button>Delete</button>
</template><script>
export default {
props: ['item'],
methods: {
deleteItem() {
// 向服务器发送 DELETE 请求
axios.delete(`/items/${this.item.id}`).then(() => {
// 重新获取数据或执行其他操作
})
}
}
}
</script></code>
