vue.js 完成部门管理: 查询数据 ,删除数据 功能 不同请求后端
时间: 2024-02-09 20:11:43 浏览: 28
好的,针对你的问题,以下是利用 Vue.js 实现部门管理的查询数据和删除数据功能的代码示例,其中使用了不同的请求后端的方式:
查询数据:
```html
<template>
<div>
<h2>部门列表</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>经理</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="department in departments" :key="department.id">
<td>{{ department.id }}</td>
<td>{{ department.name }}</td>
<td>{{ department.manager }}</td>
<td>
<button @click="deleteDepartment(department.id)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
departments: [],
};
},
mounted() {
// 发送 GET 请求查询数据
axios.get('/api/departments')
.then(response => {
this.departments = response.data;
})
.catch(error => {
console.log(error);
});
},
methods: {
deleteDepartment(id) {
// 发送 DELETE 请求删除数据
axios.delete(`/api/departments/${id}`)
.then(response => {
// 从部门列表中删除该部门
this.departments = this.departments.filter(department => department.id !== id);
})
.catch(error => {
console.log(error);
});
},
},
};
</script>
```
删除数据:
```html
<template>
<div>
<h2>删除部门</h2>
<p>确定要删除部门 {{ department.name }} 吗?</p>
<button @click="confirmDelete">确定</button>
<button @click="$router.go(-1)">取消</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
department: null,
};
},
mounted() {
// 发送 GET 请求查询数据
axios.get(`/api/departments/${this.$route.params.id}`)
.then(response => {
this.department = response.data;
})
.catch(error => {
console.log(error);
});
},
methods: {
confirmDelete() {
// 发送 DELETE 请求删除数据
axios.delete(`/api/departments/${this.$route.params.id}`)
.then(response => {
this.$router.push('/departments');
})
.catch(error => {
console.log(error);
});
},
},
};
</script>
```
以上代码仅供参考,具体实现需要根据你的具体需求进行修改。其中,`axios` 是一个流行的 HTTP 客户端,用于向后端发送 HTTP 请求。在 Vue.js 中使用 `axios` 的方法可以根据具体情况进行调整。另外,这里假设后端提供了以下 RESTful API:
- GET /api/departments:查询所有部门。
- GET /api/departments/:id:查询指定 ID 的部门。
- DELETE /api/departments/:id:删除指定 ID 的部门。