删除接口,vue前端

接口

//    审核后台删除接口
    public function del_video()
    {
        $input = $this->getinput->json(array('id'));
        $this->db->where('id', $input['id']);
        $this->db->delete('video');
        $nu = $this->db->affected_rows();
        if ($nu) {
            $data['status'] = 0;
            $data['msg'] = '删除成功';
            echo json_encode($data);
        } else {
            $data['status'] = -1;
            $data['msg'] = '删除失败';
            echo json_encode($data);
        }
    }

vue前端

handleDelete: async function (item) {
                let self = this;
                this.$confirm('此操作将删除该视频, 是否删除?', '提示', {
                    confirmButtonText: '确认',
                    cancelButtonText: '取消',
                    type: 'info'
                }).then(async () => {
                    let {data} = await this.$http.post('/del_video', {id: item.id})
                    if (data.status == 0) {
                        this.$message({
                            showClose: true,
                            message: '删除成功',
                            type: 'success'
                        });
                        self.get_VideoList();
                    } else {
                        this.$message({
                            showClose: true,
                            message: data.msg,
                            type: data.code
                        });
                    }
                }).catch(() => {

                });

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以在Vue前端使用Axios发送HTTP请求来与后端的Spring Boot应用进行通信,实现批量删除的功能。以下是一个简单的示例: 在Vue组件中,可以使用Axios发送DELETE请求来批量删除数据。首先,确保你已经在项目中安装了Axios依赖: ``` npm install axios ``` 然后,在Vue组件中,你可以通过以下方式使用Axios发送DELETE请求: ```vue <template> <div> <button @click="deleteData">批量删除</button> </div> </template> <script> import axios from 'axios'; export default { methods: { deleteData() { // 获取要删除的数据的ID列表 const ids = [1, 2, 3]; // 假设这里是要删除的数据的ID列表 // 发送DELETE请求 axios.delete('/api/data', { data: { ids: ids }, // 将ID列表作为请求体发送给后端 }) .then(response => { // 处理删除成功的逻辑 }) .catch(error => { // 处理删除失败的逻辑 }); }, }, }; </script> ``` 在后端的Spring Boot应用中,你可以编写一个接口来处理这个DELETE请求,并实现批量删除的逻辑。以下是一个简单的示例: ```java @RestController @RequestMapping("/api") public class DataController { @DeleteMapping("/data") public ResponseEntity<String> deleteData(@RequestBody Map<String, List<Integer>> request) { List<Integer> ids = request.get("ids"); // 根据ID列表执行批量删除操作 // ... return ResponseEntity.ok("删除成功"); } } ``` 这个示例中,我们使用了`@DeleteMapping`注解来处理DELETE请求,并通过`@RequestBody`注解来接收前端发送的请求体数据。在方法中,我们可以根据ID列表执行批量删除的逻辑。 当删除操作完成后,可以返回一个合适的响应给前端,表示删除成功。在这个示例中,我们返回了一个包含"删除成功"消息的HTTP响应。 这就是使用Spring Boot和Vue前端结合Axios实现批量删除的基本步骤。当然,具体的实现可能因项目的需求而有所不同,你可以根据自己的情况进行相应的调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值