商品服務 API 三級分類 刪除 頁面效果

元件 | Element

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>
 

刪除 邏輯刪除

下載postman

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

快捷鍵 ctrl + n 可以在IDEA裡面進行搜尋

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這個方法

在介面上建立了這個方法：

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);
}
​
​
 

在實現類裡面新增實現：

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;
​
   }
​
}
​

B站學習網址：全網最強電商教程《穀粒商城》對標阿里P6/P7，40-60萬年薪嗶哩嗶哩bilibili