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博客

posted @ 2022-02-14 15:49  星星c#  阅读(76)  评论(0编辑  收藏  举报