谷粒商城 (十三) --------- 商品服务 API 三级分类 ④ 删除、新增分类

青旅半醒 2024-04-07 13:23 72阅读 0赞

#### 目录 ####

*  一、删除分类前端编写
 *  二、编写删除后台
 *  三、删除测试
 *  四、新增分类

--------------------

需求：要求对三级菜单有增加和删除的功能，但只有一级和二级的菜单有增加的功能，空的没有子菜单的菜单才能进行删除。

--------------------

## 一、删除分类前端编写 ##

**A、页面部分**

注意圈红圈的为新增的内容

![在这里插入图片描述][40e772a441b94b65a52b1bbf26dd1d4d.png]

**B、方法部分**

![在这里插入图片描述][a45f567045a0486a936eff03fac4e154.png]

**C、代码**

<template>
      <el-tree
        :data="menus"
        :props="defaultProps"
        :expand-on-click-node="false"
        show-checkbox="true"
        node-key="catId"
        :default-expanded-keys="expandedKey"
        ><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>
    export default {
          
      data() {
          
        return {
          
          menus: [],
          expandedKey: [],
          defaultProps: {
          
            children: "children",
            label: "name",
          },
        };
      },
      created() {
          
        this.getMenus();
      },
      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) {
          
          const newChild = {
           id: id++, label: "testtest", children: [] };
          if (!data.children) {
          
            this.$set(data, "children", []);
          }
          data.children.push(newChild);
        },
    
        remove(node, data) {
          
          this.$confirm(`是否删除【${ data.name}】菜单?`, "提示", {
          
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
          
              var ids = [data.catId];
              this.$http({
          
                url: this.$http.adornUrl("/product/category/delete"),
                method: "post",
                data: this.$http.adornData(ids, false),
              }).then(({
            data }) => {
          
                this.$message({
          
                  message: "菜单删除成功",
                  type: "success",
                });
                // 刷新出新的菜单
                this.getMenus();
                // 设置需要默认展开的菜单
                this.expandedKey = [node.parent.data.catId]
              });
            })
            .catch(() => {
          });
        },
      },
    };
    </script>

## 二、编写删除后台 ##

逻辑删除：表中某一字段可以标志该条数据是否被删除，不是真正的从数据库表中直接删除，就比如 category 表中的 show\_status 字段，0表示删除，1表示显示

![在这里插入图片描述][d9b0fad11b0f4828867ae88b6b131a8b.png]

物理删除：直接把该条数据从数据库中 delete 掉

这里我们编写的删除则是使用逻辑删除。。。。。

CategoryController 中：

![在这里插入图片描述][8d9bba6d37d24118bbb17cba890874d8.png]

/**
    * 删除
    * @RequestBody : 获取请求体, 必须发送 post 请求
    * SpringMVC 自动将请求体的数据(json), 转为对应的对象
    */
    @RequestMapping("/delete")
    public R delete(@RequestBody Long[] catIds){
        
       //1、检查当前删除的菜单, 是否被别的地方引用
       //categoryService.removeByIds(Arrays.asList(catIds));
    
       categoryService.removeByMenuIds(Arrays.asList(catIds));
       return R.ok();
    }

CategoryService 及 CategoryServiceImpl 中：

![在这里插入图片描述][99d04ddc384e43448783f9fd33501db3.png]

@Override
    public void removeByMenuIds(List<Long> asList) {
        
        // TODO 1、检查当前删除的菜单, 是否在别的地方被引用
        // 逻辑删除
        baseMapper.deleteBatchIds(asList);
    }

逻辑删除步骤：

A、配置全局的逻辑删除规则  
B、配置逻辑删除的组件(省略)  
C、加上逻辑删除注解 `@TopicLogic`

MyBatis-Plus 中配置逻辑删除：

![在这里插入图片描述][fb76737608ab4c75badb8e15ed63f707.png]  
实体类属性加上 @TableLogic 注解

![在这里插入图片描述][91d0f31f05e44dd38ae223527dfa87b1.png]

## 三、删除测试 ##

![在这里插入图片描述][d2c14ed5b3374792990a51d674220be1.png]  
![在这里插入图片描述][5478f669778e48259c56ad90731d796d.png]  
![在这里插入图片描述][198b7d91a1f1425fa0e8c898c1117dbb.png]

## 四、新增分类 ##

主要是编写前端的代码，后端我们调用框架生成的 save 方法去保存

![在这里插入图片描述][d153b548408b4130a814cce0e3cfdc6e.png]  
![在这里插入图片描述][5e7f778a03cc4b709aea6a6300fc0176.png]

<template>
      <div>
        <el-tree
          :data="menus"
          :props="defaultProps"
          :expand-on-click-node="false"
          show-checkbox="true"
          node-key="catId"
          :default-expanded-keys="expandedKey"
          ><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
        >
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <el-form :model="form">
            <el-form-item label="分类名称">
              <el-input v-model="category.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCategory">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </template>
    
    <script>
    export default {
        
      data() {
        
        return {
        
          category: {
         name: "", parentCid: 0, catLevel: 0, showStatus: 1, sort: 0 },
          dialogVisible: false,
          menus: [],
          expandedKey: [],
          defaultProps: {
        
            children: "children",
            label: "name",
          },
        };
      },
      created() {
        
        this.getMenus();
      },
      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) {
        
          this.dialogVisible = true;
          this.category.parentCid = data.catId;
          this.category.catLevel = data.catLevel * 1 + 1;
        },
    
        addCategory() {
        
          this.$http({
        
            url: this.$http.adornUrl("/product/category/save"),
            method: "post",
            data: this.$http.adornData(this.category, false),
          }).then(({
         data }) => {
        
            this.$message({
        
              message: "菜单保存成功",
              type: "success",
            });
            //  关闭对话框
            this.dialogVisible = false;
            // 刷新出新的菜单
            this.getMenus();
            // 设置需要默认展开的菜单
            this.expandedKey = [this.category.parentCid];
          });
        },
    
        remove(node, data) {
        
          this.$confirm(`是否删除【${
        data.name}】菜单?`, "提示", {
        
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
        
              var ids = [data.catId];
              this.$http({
        
                url: this.$http.adornUrl("/product/category/delete"),
                method: "post",
                data: this.$http.adornData(ids, false),
              }).then(({
         data }) => {
        
                this.$message({
        
                  message: "菜单删除成功",
                  type: "success",
                });
                // 刷新出新的菜单
                this.getMenus();
                // 设置需要默认展开的菜单
                this.expandedKey = [node.parent.data.catId];
              });
            })
            .catch(() => {
        });
        },
      },
    };
    </script>

后台代码如图：

![在这里插入图片描述][24618758d17248c484ec248fc190a04e.png]

[40e772a441b94b65a52b1bbf26dd1d4d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/254bebec699c4b17bb0b77c7e9b3ef6f.png
[a45f567045a0486a936eff03fac4e154.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/5ccc44b33c03480fbc74514e3519cdf5.png
[d9b0fad11b0f4828867ae88b6b131a8b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ceba4cce0463482390c40da031a94847.png
[8d9bba6d37d24118bbb17cba890874d8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e735fbb8808b445d97bb43973e9e47a3.png
[99d04ddc384e43448783f9fd33501db3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/e8893797f02d49d3909447d601845b14.png
[fb76737608ab4c75badb8e15ed63f707.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/1fe9636bc1194bdcbb47e0ecd273c8b3.png
[91d0f31f05e44dd38ae223527dfa87b1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/636a107ec0bb4040999a25550e6b7e12.png
[d2c14ed5b3374792990a51d674220be1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/35cb3bc0deb749d099beedf0e86faa8f.png
[5478f669778e48259c56ad90731d796d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/6a4fea5c27df4b1189e9153f0e082a27.png
[198b7d91a1f1425fa0e8c898c1117dbb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/400c1b83cf6a45d8b27ef5598e1d7f64.png
[d153b548408b4130a814cce0e3cfdc6e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/3381118d63c1487391d8eb262656c79e.png
[5e7f778a03cc4b709aea6a6300fc0176.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/06250bf827254471b657fcecd52a5bcc.png
[24618758d17248c484ec248fc190a04e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/de4937ae440f486285ffa7fe3f058020.png