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

Posted 2021-07-03 豆豆tj

商品服务 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