OpenAuth.net入门【5】——解决添加完数据，在未刷新列表时执行删除，数据未被真正删除的问题

接前4篇

OpenAuth.net入门【1】——代码生成过程记录 - 星星c# - 博客园 (cnblogs.com)

OpenAuth.net入门【2】——代码生成后补全编辑功能 - 星星c# - 博客园 (cnblogs.com)

OpenAuth.net入门【3】——代码生成后补全查询功能 - 星星c# - 博客园 (cnblogs.com)

OpenAuth.net入门【4】——自定义数据列表和编辑界面 - 星星c# - 博客园 (cnblogs.com)

 

完成了前4篇的内容后，在测试的时候发现一个问题

描述：

在新添加完数据，马上删掉【不执行重新查询操作】，然后再刷新，刚才删掉的数据就显示到列表上了，数据库这条记录也存在。

 

分析：

我在后台的API的删除方法里加断点，发现新增的那条记录删除时传过来的ID是空的。

根据按钮上的事件，找到方法，如下图：

发现这个数据拿来后，直接在前台变量里做了个插入操作，并没有真正的重新查询，而且新增后返回的数据里没有包含ID，所以后台没办法真正删除，如下图：

 

思路有两种：

第一种解决方法：

　　思路是重新加载列表，简单粗暴些。

　　把 this.list.unshift(this.temp);换成this.getList();

　　改完后如下图：

 

 第二种解决方法：

　　思路是：把数据的ID从后台返回回来，然后给实体赋上值，然后删除的时候就可以正常删除了

　　(1)改造后台：

 

 

 　　(2)改造前台：

 

 代码如下：

    createData() {
      // 保存提交
      this.$refs["dataForm"].validate(() => {
        farmInternetDeviceTypeMsts.add(this.temp).then((response) => {
          this.temp.id = response.result;
          this.list.unshift(this.temp);
          this.dialogFormVisible = false;
          this.$notify({
            title: "成功",
            message: "创建成功",
            type: "success",
            duration: 2000,
          });
        });
      });
    },

 

 

 

附：vue项目里没有办法添加deubgger的解决方法：

 

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-debugger":"off",
      "no-console":"off"
    }
  },

记得要重启项目，我用的是vscode，我是关掉后再打开的

原文地址：新建vue项目出现error Unexpected ‘debugger‘ statement no-debugger_mochen_mj的博客-CSDN博客