商品服务-API-三级分类在管理页面下增删操作

1.0 删除功能

1.1 先在管理页面vue中增加append和delete按钮

到elementUI中 找到Tree 增加和删除组件

<template>
  <el-tree :data="menus" :props="defaultProps" node-key="catId" show-checkbox :expand-on-click-node="false">
    <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 {
  components: {},
  props: {},
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "name", //对象的那个属性要展示出来
      },
    };
  },
  methods: {
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        //解构出来想要的数据data
        console.log("成功获取到菜单的数据...", data.data);
        this.menus = data.data;
      });
    },
    append(data) {
      console.log("append", data);
    },
    remove(node, data) {
      console.log("remove", node, data);
    },
  },
};

1.2 重写后台删除业务流程,添加逻辑删除功能

接口功能测试,可以下载一个postman 软件来请求

  /**  Controller层
     * 删除
     * @RequestBody :获取请求体,必须发送post请求
     * SpringMVC 自动将请求体的数据,转为对应的对象
     */
    @RequestMapping("/delete")
    //  @RequiresPermissions("product:category:delete")
    public R delete(@RequestBody Long[] catIds) {

        //categoryService.removeByIds(Arrays.asList(catIds));

        categoryService.removeMenuByIds(Arrays.asList(catIds));
        return R.ok();
    }
=====ServiceImpl层=====
  @Override
    public void removeMenuByIds(List<Long> asList) {
       /**配置全局逻辑删除规则,配置逻辑删除的组件bean(3.1上自动配置了),加上逻辑删除注解 @TableLogin(在bean 属性上)
       
    @TableLogic
	private Integer showStatus;
	
mybatis-plus:
  mapper-locations: classpath*:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto
      logic-delete-value: 1
      logic-not-delete-value: 0
    */
        //逻辑删除,状态0 1来表示删除否
        //TODO  1. 检查当前删除的菜单,是否被别的地方引用
        baseMapper.deleteBatchIds(asList);
    }

逻辑删除就是数据要有一个属性字段,以0 1 来显示是否已删除(对于整个服务来说),当然你到数据库还是能看到的

1.3 在页面中实现删除功能

添加一个vue 全局模板,包括get post 请求的快捷键

{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<!-- $1 -->",
            "<template>",
            "<div class='$2'>$5</div>",
            "</template>",
            "",
            "<script>",
            "//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
            "//例如：import 《组件名称》 from '《组件路径》';",
            "",
            "export default {",
            "//import引入的组件需要注入到对象中才能使用",
            "components: {},",
            "data() {",
            "//这里存放数据",
            "return {",
            "",
            "};",
            "},",
            "//监听属性 类似于data概念",
            "computed: {},",
            "//监控data中的数据变化",
            "watch: {},",
            "//方法集合",
            "methods: {",
            "",
            "},",
            "//生命周期 - 创建完成（可以访问当前this实例）",
            "created() {",
            "",
            "},",
            "//生命周期 - 挂载完成（可以访问DOM元素）",
            "mounted() {",
            "",
            "},",
            "beforeCreate() {}, //生命周期 - 创建之前",
            "beforeMount() {}, //生命周期 - 挂载之前",
            "beforeUpdate() {}, //生命周期 - 更新之前",
            "updated() {}, //生命周期 - 更新之后",
            "beforeDestroy() {}, //生命周期 - 销毁之前",
            "destroyed() {}, //生命周期 - 销毁完成",
            "activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
            "}",
            "</script>",
            "<style scoped>",
            "/* @import url(); 引入公共css类 */",
            "$4",
            "</style>"
        ],
        "description": "生成vue模板"
    },
    "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请求"
	}
}

remove(node, data) {
      var ids = [data.catId];
      this.$confirm(`是否删除[${data.name}]菜单?`, "提示", { //这个可根据elementUI 来写
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http({
            url: this.$http.adornUrl("/product/category/delete"),
            method: "post",
            data: this.$http.adornData(ids, false),
          }).then(({ data }) => {
            console.log("删除成功...");
             this.$message({
            type: "success",
            message: "菜单删除成功",
          });
          this.getMenus(); //刷新操作后的菜单信息
          this.expandkey =[node.parent.data.catId]; //页面还展示删除后的父菜单
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

2.0 新增效果功能

先用elementUI中的dialog插入到中,

<el-dialog title="新增菜单" :visible.sync="dialogVisible" width="36%">
      <el-form :model="category">  //与下面data中category对象绑定
        <el-form-item label="分类名称:" :label-width="formLabelWidth">
          <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>

category: {
        name: "",
        parentCid: 0,
        catLevel: 0,
        showStatus: 1,
        sort: 0,
      },
      
     //初始化 category中的属性值
 append(data) {
      console.log("append", data);
      this.dialogVisible = true;
      this.category.parentCid = data.catId;
      this.category.catLevel = data.catLevel * 1 + 1;
    },
    
 // 添加三级分类方法
    addCategory() {
      console.log("提交的三级分类数据..", this.category);
      this.$http({
        url: this.$http.adornUrl("/product/category/save"),
        method: "post",
        data: this.$http.adornData(this.category, false),
      }).then(({ data }) => {
        this.$message({
          type: "success",
          message: "菜单保存成功",
        });
        //关闭对话框
        this.dialogVisible =false;
        //刷新菜单数据
        this.getMenus();
        //设置默认展开的菜单
        this.expandkey = [node.parent.data.catId];
      });
    },