第175天学习打卡（项目 谷粒商城17 API三级分类 删除页面效果 逻辑删除）

Posted doudoutj

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第175天学习打卡（项目 谷粒商城17 API三级分类 删除页面效果 逻辑删除）相关的知识，希望对你有一定的参考价值。

商品服务 API 三级分类 删除 页面效果

组件 | Element

image-20210702222241528

image-20210702222214730

image-20210702222157188

category.vue

<template>
  <el-tree
    :data="menus"
    :props="defaultProps"
    :expand-on-click-node="false"
    show-checkbox
    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: {},
  props: {},
  data() {
    return {
      menus: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    append(data) {
      console.log("append", data);
    },

    remove(node, data) {
      console.log("remove", node, data);
    },
    getMenus() {
      this.$http({
        url: this.$http.adornUrl("/product/category/list/tree"),
        method: "get",
      }).then(({ data }) => {
        console.log("成功获取到菜单数据...", data.data);
        this.menus = data.data;
      });
    },
  },

  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getMenus();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style  scoped>
</style>

image-20210702222137499

删除 逻辑删除

下载postman

官网网址：Postman | The Collaboration Platform for API Development

image-20210702222111251

快捷键 ctrl + n 可以在IDEA里面进行搜索

image-20210702222045701

image-20210702222023999

image-20210702221953240

image-20210702221925360

package com.doudou.gulimall.product.controller;

import com.doudou.common.utils.R;
import com.doudou.gulimall.product.entity.CategoryEntity;
import com.doudou.gulimall.product.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.Arrays;
import java.util.List;
import java.util.Map;

//import org.apache.shiro.authz.annotation.RequiresPermissions;


/**
 * 商品三级分类
 *
 * @author doudoutj111
 * 
 * @date 2021-06-19 19:40:52
 */
@RestController
@RequestMapping("product/category")
public class CategoryController {
    @Autowired
    private CategoryService categoryService;

    /**
     * 查出所有分类及子分类，以树形结构组装起来
     */
    @RequestMapping("/list/tree")
    //@RequiresPermissions("product:category:list")
    public R list(@RequestParam Map<String, Object> params){

        List<CategoryEntity> entities = categoryService.listWithTree();




        return R.ok().put("data", entities);
    }


    /**
     * 信息
     */
    @RequestMapping("/info/{catId}")
   // @RequiresPermissions("product:category:info")
    public R info(@PathVariable("catId") Long catId){
		CategoryEntity category = categoryService.getById(catId);

        return R.ok().put("category", category);
    }

    /**
     * 保存
     */
    @RequestMapping("/save")
  //  @RequiresPermissions("product:category:save")
    public R save(@RequestBody CategoryEntity category){
		categoryService.save(category);

        return R.ok();
    }

    /**
     * 修改
     */
    @RequestMapping("/update")
  //  @RequiresPermissions("product:category:update")
    public R update(@RequestBody CategoryEntity category){
		categoryService.updateById(category);

        return R.ok();
    }

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

        //1.检查当前删除的菜单，是否被别的地方引用
		//categoryService.removeByIds(Arrays.asList(catIds));
		categoryService.removeMenuByIds(Arrays.asList(catIds));

        return R.ok();
    }

}

通过alt + enter创建removeMenuByIds这个方法

在接口上创建了这个方法：

image-20210702221852836

package com.doudou.gulimall.product.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.doudou.common.utils.PageUtils;
import com.doudou.gulimall.product.entity.CategoryEntity;

import java.util.List;
import java.util.Map;

/**
 * 商品三级分类
 *
 * @author doudoutj111
 * 
 * @date 2021-06-19 17:24:02
 */
public interface CategoryService extends IService<CategoryEntity> {

    PageUtils queryPage(Map<String, Object> params);

    List<CategoryEntity> listWithTree();

    void removeMenuByIds(List<Long> asList);
}

在实现类里面添加实现：

image-20210702221815527

package com.doudou.gulimall.product.service.impl;


import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Map;
import java.util.stream.Collectors;

import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.doudou.common.utils.PageUtils;
import com.doudou.common.utils.Query;

import com.doudou.gulimall.product.dao.CategoryDao;
import com.doudou.gulimall.product.entity.CategoryEntity;
import com.doudou.gulimall.product.service.CategoryService;


@Service("categoryService")
public class CategoryServiceImpl extends ServiceImpl<CategoryDao, CategoryEntity> implements CategoryService {
//    @Autowired
//    CategoryDao categoryDao;

    @Override
    public PageUtils queryPage(Map<String, Object> params) {
        IPage<CategoryEntity> page = this.page(
                new Query<CategoryEntity>().getPage(params),
                new QueryWrapper<CategoryEntity>()
        );

        return new PageUtils(page);
    }

    @Override
    public List<CategoryEntity> listWithTree() {
        // 1.查出所有分类
        List<CategoryEntity> entities = baseMapper.selectList(null);//这里写null(没有查询条件，就是查询所有)就是查询所有的数据


        //2.组装成父子的树形结构

        //2.1 找到所有的一级分类
        List<CategoryEntity> level1Menus = entities.stream().filter(categoryEntity ->
        categoryEntity.getParentCid() == 0

        ).map((menu)->{
            menu.setChildren(getChildrens(menu, entities));
            return menu;
        }).sorted((menu1, menu2)->{
            return (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
        }).collect(Collectors.toList());


        return level1Menus;

    }

    @Override
    public void removeMenuByIds(List<Long> asList) {
        //TODO 这里以后将要编写  检查当前删除的菜单，是否被别的地方引用
        //逻辑删除
        baseMapper.deleteBatchIds(asList);//进行批量删除
    }
    //递归查找所有菜单的子菜单

    private List<CategoryEntity> getChildrens(CategoryEntity root, List<CategoryEntity> all){
        List<CategoryEntity> childrean =all.stream().filter(categoryEntity -> {
            return categoryEntity.getParentCid() == root.getCatId();
        }).map(categoryEntity -> {
            //找到子菜单
            categoryEntity.setChildren(getChildrens(categoryEntity, all));
            return categoryEntity;
        }).sorted((menu1, menu2)->{
            //2.菜单排序
            return (menu1.getSort() == null ? 0 : menu1.getSort()) - (menu2.getSort() == null ? 0 : menu2.getSort());
        }).collect(Collectors.toList());
        return childrean;

    }

}

image-20210702222728894

image-20210703091213582

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc:mysql://数据库连接地址:3306/gulimall_pms?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    driver-class-name: com.mysql.cj.jdbc.Driver
  cloud:
    nacos:
      discovery:
        server-addr: 127.0.0.1:8848
mybatis-plus:
  mapper-locations: classpath:/mapper/**/*.xml
  global-config:
    db-config:
      id-type: auto
      logic-delete-value: 1
      logic-not-delete-value: 0
server:
  port: 10000

image-20210703091129445

测试删除

image-20210703093423183

image-20210703093342305

image-20210703094119713

image-20210703094148616

B站学习网址：全网最强电商教程《谷粒商城》对标阿里P6/P7，40-60万年薪_哔哩哔哩_bilibili

以上是关于第175天学习打卡（项目 谷粒商城17 API三级分类 删除页面效果 逻辑删除）的主要内容，如果未能解决你的问题，请参考以下文章

第176天学习打卡（项目 谷粒商城 18 API三级分类 删除效果细化 新增效果）

第173天学习打卡（项目 谷粒商城 15 配置网关路由与路径重写 查询树形展示三级分类）

第172天学习打卡（项目 谷粒商城 14 三级分类 配置网关路由和路径重写）

第177天学习打卡（项目 谷粒商城19 基本效果修改 拖拽效果 ）

第164天学习打卡（项目 谷粒商城6 加载多配置集 API网关）

第193天学习打卡（项目 谷粒商城35 调试会员等级相关接口）