Vue3 文章管理后台系统:删除用户实现指南
在 Vue3 文章管理后台系统中,删除用户可以通过以下步骤实现:
-
在 Vue 组件中创建一个删除用户的方法,该方法接收一个用户 ID 作为参数。
-
使用 Axios 库发送一个 DELETE 请求到后端 API,该请求包含要删除用户的 ID。
-
在后端 API 中,从数据库中删除相应的用户记录。
-
在 Vue 组件中更新用户列表,以反映已删除的用户。
以下是一个示例代码:
<template>
<div>
<h1>用户列表</h1>
<ul>
<li v-for='user in users' :key='user.id'>
{{ user.name }}
<button @click='deleteUser(user.id)'>删除</button>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
users: []
};
},
mounted() {
// 获取用户列表
axios.get('/api/users')
.then(response => {
this.users = response.data;
})
.catch(error => {
console.log(error);
});
},
methods: {
deleteUser(id) {
// 发送删除用户请求
axios.delete(`/api/users/${id}`)
.then(response => {
// 更新用户列表
this.users = this.users.filter(user => user.id !== id);
})
.catch(error => {
console.log(error);
});
}
}
};
</script>
原文地址: http://www.cveoy.top/t/topic/n4DA 著作权归作者所有。请勿转载和采集!