谷粒商城44 - 前端-商品服务-API-三级分类-删除效果细化

- 日理万妓 2022-11-25 10:24 143阅读 0赞

### 文章目录 ###

*   *   *  设置vue 发送http模板
         *  测试删除某一个菜单
         *  删除的前端优化
         *   *  点击删除时给出确认删除的按钮
             *  删除完成后,刷新菜单,并且固定树结构到当前父节点
         *  页面测试

### 设置vue 发送http模板 ###

"http-get请求": { 
    	"prefix": "httpget",
    	"body": [
    		"this.\\$http({",
    		"url: this.\\$http.adornUrl(''),",
    		"method: 'get',",
    		"params: this.\\$http.adornParams({})",
    		"}).then(({ data }) => {",
    		"})"
    	],
    	"description": "httpGET请求"
        },
        "http-post请求": { 
    	"prefix": "httppost",
    	"body": [
    		"this.\\$http({",
    		"url: this.\\$http.adornUrl(''),",
    		"method: 'post',",
    		"data: this.\\$http.adornData(data, false)",
    		"}).then(({ data }) => { });" 
    	],
    	"description": "httpPOST请求"
        }

“prefix”: “httpget”、“prefix”: “httppost” 就是你的快捷输入名称，可自行修改

### 测试删除某一个菜单 ###

使用上面的http请求的目标, 直接敲httppost即可 快速的生成post请求模板. 填入请求地址和请求参数即可.  
例如如下, 请求参数为要删除的菜单的id . 用数组传入`var idArr= [data.catId];`  
请求地址为上一节中测试的接口`/product/category/delete`  
并且在index.js中, 有配置接口的网关地址 .  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]  
完整的如下.

remove(node, data) { 
           var idArr= [data.catId];
    
          this.$http({ 
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(idArr, false),
          }).then(({  data }) => { });
        },

在页面中点击某一个菜单 , 进行删除. 可以看到响应200  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]  
数据库中, 也进行了删除.  
![20200808103036128.png][]

### 删除的前端优化 ###

#### 点击删除时给出确认删除的按钮 ####

使用messagebox 弹框组件  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
复制demo的这一段代码  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
改造remove方法如下. 弹出提示框, 点击确认才会删除 . 并且使用`[ ${data.name} ]` 动态显示菜单名称 .

remove(node, data) { 
          this.$confirm(`是否删除 [ ${ data.name} ] 菜单?`, "提示", { 
            confirmButtonText: "确定",   // 点击确定, 触发then
            cancelButtonText: "取消",    // 点击取消 触发 catch ,由于取消不需要任何的操作, 但删除catch会报错, 因此保留空方法
            type: "warning",
          })
            .then(() => { 
              var idArr = [data.catId];
    
              this.$http({ 
                url: this.$http.adornUrl("/product/category/delete"),
                method: "post",
                data: this.$http.adornData(idArr, false),
              }).then(({  data }) => { 
                this.$message({ 
                  type: "success",
                  message: "删除成功!",
                });
              });
            })
            .catch(() => { });
        },

实现效果如下  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5][]

#### 删除完成后,刷新菜单,并且固定树结构到当前父节点 ####

上一步删除完成后, 树菜单还在页面上, 因此需求重新发送获取树的接口.  
此处会重新发送获取菜单的请求. 但是会导致没有固定到当前的父节点的树.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6][]  
使用树形组件的`default-expanded-keys` , 传入要默认展开的父级的id  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7][]  
通过debugger可以查看到, node对象中, 可以获取父级节点的id. 获取的路径为`node.parent.data.catId`  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8][]  
并且官方文档指定了, 使用`default-expanded-keys` , 必须使用`node-key`  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9][]  
在前面的章节中, 已经指定了 `node-key` 为catId.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10][]  
在el-tree中, 进行声明`:default-expanded-keys="expandedkey"` , 并且把值用`expandedkey`变量传递  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 11][]  
在data中 ,初始化为一个空数组.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 12][]  
删除成功后, 在重新获取菜单后, 进行树的默认展开.  
`this.expandedkey = [node.parent.data.catId];`  
注释掉的方法为我一开始的错误用法, 首先是调用的顺序不对, 应该是先通过获取菜单的接口, 重新获取菜单, 才能设置默认展开的树, 其次是 没有使用this, 来代表使用当前的变量, 再者是 对于赋值, 没有用数组, 而是直接赋值, 这样也是无效的.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 13][]  
此节完整的代码

<template>
      <el-tree
        :data="menus"
        :props="defaultProps"
        :expand-on-click-node="false"
        show-checkbox
        :default-expanded-keys="expandedkey"
        node-key="catId"
      >
        
    
        <span class="custom-tree-node" slot-scope="{ node, data }">
          
          <span>{ {  node.label }}</span>
          <span>
            
            <el-button v-if="node.level <=2" type="text" size="mini" @click="() => append(data)">Append</el-button>
            <el-button
              v-if="node.childNodes.length ==0"
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            >Delete</el-button>
          </span>
        </span>
      </el-tree>
    </template>
    
    <script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';
    
    export default { 
      //import引入的组件需要注入到对象中才能使用
      components: { },
    
      data() { 
        return { 
          menus: [],
          expandedkey: [],
          defaultProps: { 
            children: "children",
            label: "name",
          },
        };
      },
      methods: { 
        getMenus() { 
          this.$http({ 
            url: this.$http.adornUrl("/product/category/list/tree"),
            method: "get",
          }).then(({  data }) => { 
            console.log("成功获取到菜单数据 .... ", data.data);
            this.menus = data.data;
          });
        },
        append(data) { 
          console.log("append ", data);
        },
        remove(node, data) { 
          
          console.log("remove ", node, data);
    
          this.$confirm(`是否删除 [ ${ data.name} ] 菜单?`, "提示", { 
            confirmButtonText: "确定", // 点击确定, 触发then
            cancelButtonText: "取消", // 点击取消 触发 catch ,由于取消不需要任何的操作, 但删除catch会报错, 因此保留空方法
            type: "warning",
          })
            .then(() => { 
              var idArr = [data.catId];
              
    
              this.$http({ 
                url: this.$http.adornUrl("/product/category/delete"),
                method: "post",
                data: this.$http.adornData(idArr, false),
              }).then(({  data }) => { 
                this.$message({ 
                  type: "success",
                  message: "删除成功!",
                });
                //expandedkey = node.parent.data.catId;
                this.getMenus();
                this.expandedkey = [node.parent.data.catId];
              });
            })
            .catch(() => { });
        },
      },
      //监听属性 类似于data概念
      computed: { },
      //监控data中的数据变化
      watch: { },
      //方法集合
      //生命周期 - 创建完成（可以访问当前this实例） 组件创建完成就发送请求
      created() { 
        this.getMenus();
      },
      //生命周期 - 挂载完成（可以访问DOM元素）
      mounted() { },
      beforeCreate() { }, //生命周期 - 创建之前
      beforeMount() { }, //生命周期 - 挂载之前
      beforeUpdate() { }, //生命周期 - 更新之前
      updated() { }, //生命周期 - 更新之后
      beforeDestroy() { }, //生命周期 - 销毁之前
      destroyed() { }, //生命周期 - 销毁完成
      activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发. 页面被激活就会发送请求
    };
    </script>
    <style scoped>
    </style>

### 页面测试 ###

页面上点击确定删除CPU后  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 14][]  
提示删除成功, 并且重新获取了菜单, 树也默认展开了当前的父级菜单.  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 15][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20221124/dd3b33b64ed045cba61792766d972c15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20221124/be0405bb3f6f411ba806c86954c91442.png
[20200808103036128.png]: /images/20221124/7ad8d168a3e74630ab0f6677a6b39982.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20221124/72d5b81fd6f645c7a0759b54e0943004.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20221124/82a0383865a74bbfb35bb534c1f9257f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 4]: /images/20221124/0f12064ad17e47529b1b479df2f0b20c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 5]: /images/20221124/80fca2bd83e94ef380778bc869154831.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 6]: /images/20221124/cf69e455d95a4270a1a70d09b3fb7b45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 7]: /images/20221124/7315ee0cd7414204951a6c39a38f9066.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 8]: /images/20221124/9d70369abc534859a000f7642f610423.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 9]: /images/20221124/fd3f79c41ced4d44bed1e617a9139370.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 10]: /images/20221124/17ad5bbb08ef4b1d885a3647e312655f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 11]: /images/20221124/00b9f9f5d411439da142868359b4243c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 12]: /images/20221124/b15044ef4d6841b7a88d0d9adc7c978a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 13]: /images/20221124/17c16af7484b4e9aa292cc45d1f9366c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 14]: /images/20221124/741aa0f9f7f74fa89b018a481685a0be.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 15]: /images/20221124/7b94722a999747799e200f32a7a64d00.png