Vue前端怎么根据后端api删除数据

ahehaoyu

各位大佬好，本人非程序员也不是计算机专业的，就是业余爱好学学前端。
目前遇到个问题就是我使用node+vue做一个记账的页面，然后想通过图1这个删除按钮来删除这一条数据。增加修改查询我知道，但是不知道怎么删除，我后端删除语句是图2。
请问下各位大佬怎么通过这个id来删除数据

坏人。丶

这种简单的你问copilot 或者gpt都可以呀，

[Asm] 纯文本查看 复制代码

const sql = 'DELETE FROM xf_mx WHERE id = ?';

一傻逼撸

你修改的时候是用哪个值来判定的删除就用哪个值删除啊

侃遍天下无二人

给delete绑一个id上去就行了，在语句里拼接

深巷丶

前端的表格数据应该用的是数组绑定的吧，直接array.splice(index, 1)就行。或者也可以做成删除之后直接重新查询

ahehaoyu

坏人。丶 发表于 2024-1-16 00:03
这种简单的你问copilot 或者gpt都可以呀，[mw_shl_code=asm,true]const sql = 'DELETE FROM xf_mx WHERE id ...

这个后端我知道啊  前端调用后端接口通过ID删除我就不知道了

ahehaoyu

深巷丶 发表于 2024-1-16 07:57
前端的表格数据应该用的是数组绑定的吧，直接array.splice(index, 1)就行。或者也可以做成删除之后直接重新 ...

array.splice(index, 1)这个没怎么看懂 我前端的表格用的是el-table。
它给的实例是这样，我不是很能理解如何把后端获取到的id绑定的table的id

[HTML] 纯文本查看 复制代码

 <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="Date" prop="date" />
    <el-table-column label="Name" prop="name" />
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>
  </el-table>

ahehaoyu

侃遍天下无二人 发表于 2024-1-16 01:16
给delete绑一个id上去就行了，在语句里拼接

主要是前端我不知道怎么删除,我是这么写，但是这么好像有不对

[HTML] 纯文本查看 复制代码

<el-button size="small" type="danger" @click="delxfmx(scope.$index, scope.row.id)">Delete</el-button>

[JavaScript] 纯文本查看 复制代码

    //删除数据



    delxfmx() {
      axios
        .get("http://127.0.0.1:8000/jz/delxfmx?id={id}")
        .then((res) => {
          console.log(res.data);

        })
        .catch((err) => {
          console.log("获取数据失败" + err);
        });
    },

深巷丶

ahehaoyu 发表于 2024-1-16 08:07
array.splice(index, 1)这个没怎么看懂 我前端的表格用的是el-table。
它给的实例是这样，我不是很能理 ...

首先，el-table通过:data双向绑定的变量是filterTableData对吧，这个变量肯定是一个数组（Array）类型，内容类似于[{'id': 22, 'type': '测试', 'money': 12.0}]，这样子对吧。
其次，通过插槽default的scope，可以把当前行、列、index数据传递给你，看下官网示例：https://element.eleme.cn/#/zh-CN ... -ding-yi-lie-mo-ban
最后，根据scope.row获取到的对象里的id，调用接口删除，删除成功后两个选择：
①对filterTableData使用splice(index, 1)，意思是删除数组里下标为index的一个元素，具体splice的用法你自己查一下
②直接重新查询一次数据，注意排序不要改变