DELETE http://localhost:8080/user/undefined 400

最新推荐文章于 2024-05-29 00:05:47 发布

北易航

最新推荐文章于 2024-05-29 00:05:47 发布

阅读量1.1k

点赞数 1

文章标签： http vue.js 前端网络协议 spring boot

本文链接：https://blog.csdn.net/qq_52889347/article/details/127906735

版权

这前端使用vue实现增删改查的时候，在进行根据id进行删除的时候出现了一个问题

报错

在这里插入图片描述

DELETE http://localhost:8080/user/undefined 400

原因

undefined他是不明确的意思，说明我们这个post请求这个链接他不知道你是什么意思。

后端

 //根据id 删除用户信息
    @DeleteMapping("/{id}")
    public Boolean delete(@PathVariable Integer id) {
        return userService.removeById(id);
    }

解决

我是根据id来删除用户信息的，我的用户id是userid，没有进行@TableName(value =“ID”)操作，在前端的时候使用了id这个参数，所以他就没有找到我们数据中的这个字段名，进而出现了这个错误。更正就解决了。

下面分享几种vue 删除的常用方法

一、根据id删除数据

<!-- 点击传入当前点击的数据 -->
<el-button type="dangerous" @click="handleClickDelProduct(scope.row)">删除</el-button>

 handleClickDelProduct(row) {
        let index = this.newList.findIndex((product) => {
          return row.id == product.id
        })
        if (index !== -1) {
          this.newList.splice(index, 1)
        }
    },

二、根据下标删除对应数据

//index是点击事件传过来的参数下标
<div v-for="(item,index) in list" :key="index">
		<div @click="deletes(index)">
			{{item.name}}
		</div>
	</div>

//拿到当前下标 通过splice方法删除当前下标所在数据
   deletes(index){
		this.list.splice(index, 1)
	 }

三、通过接口方式删除数据

<el-popconfirm                 
   confirm-button-text='确定'
   cancel-button-text='我再想想吧'
   icon="el-icon-info"
   icon-color="red"
   title="确定删除这一段内容吗？"
   @confirm="handleDelete(scope.row.userid)"
   >
<el-button style="margin-left: 5px" type="danger" slot ="reference" >删除<i class="el-icon-remove"></i></el-button></el-popconfirm>

//删除
    handleDelete(userid){
      request.delete("http://localhost:8080/user/"+userid).then(res => {
        if (res){
          this.$message.success("删除成功")
          this.load()  //load是我封装的
        }else{
          this.$message.error("删除失败")
        }
      })
    },