谷粒商城之商品服务-三级分类(展示与删除)

三级类目查询后台代码实现

后台管理系统的菜单创建

配置网关和路径重写

网关统一配置跨域

三级类目后台管理系统的页面显示

三级分类删除页面效果的编写

三级分类逻辑删除后台实现

三级类目删除功能的前后联调

三级类目查询后台代码实现

catagory表的表结构，首先一级类目的parent_cid为0，二级类目以及三级类目的parent_cid为cid，sort字段用于排序

baseMapper等价于catagoryDao

代码实现：

 /*** 三级分类查询，以树状结构呈现* @return*/@Overridepublic List<CategoryEntity> listWithTree() {// 1.查询所有商品类目List<CategoryEntity> all=categoryDao.selectList(null);// 2.1、查询一级类目List<CategoryEntity> categoryEntities= all.stream().filter(menu1->{return menu1.getParentCid().equals(0L);}// 刷选出一级分类).map((menu1)->{menu1.setChildren(getChilren(menu1,all));return menu1;}).sorted((item1,item2)->{// 排序return (item1.getSort()==null?0:item1.getSort())-(item2.getSort()==null?0:item2.getSort());}).collect(Collectors.toList());return categoryEntities;}/***  查询子节点* @param menu1* @param all* @return*/private List<CategoryEntity> getChilren(CategoryEntity menu1, List<CategoryEntity> all) {List<CategoryEntity> chilrenList= all.stream().filter(chilrenMenu->chilrenMenu.getParentCid().equals(menu1.getCatId())// 查询子节点).map((chilrenMenu)->{chilrenMenu.setChildren(getChilren(chilrenMenu,all));return chilrenMenu;}).sorted((item1,item2)->{return (item1.getSort()==null?0:item1.getSort())-(item2.getSort()==null?0:item2.getSort());}).collect(Collectors.toList());return  chilrenList;}

后台管理系统的菜单创建

①创建一个商品系统(一级菜单)目录

②在商品菜单目录下创建一个分类维护菜单

菜单路由讲解

当我们点击角色管理时，就会发送一个sys-role的请求，角色管理的菜单路由是sys/role，说明会将sys/role转化成sys-role

实际上访问sys-role就是请求sys文件夹下的role.vue

③分类维护的菜单路由为product/category，所以在views中的modules下面创建一个product文件，在product文件夹中创建category.vue

④编写category.vue请求后台数据

参考role.vue的请求数据方法，对category.vue进行编写

访问的是 http://localhost:8080/renren-fast/product/category/list/tree

而我们想要访问的路径是 http://localhost:10000/product/category/list/tree

我们应该将请求统一发送给网关，由网关根据我们的请求路径进行相应路由

配置网关和路径重写

①renren-fast服务注册到网关中

出现问题：

java: You aren't using a compiler supported by lombok, so lombok will not work and has been disabled

解决方案：You aren‘t using a compiler supported by lombok, so lombok will not work and has been disabled._小魔王博客-CSDN博客

出现问题：

The following method did not exist:com.google.common.collect.Sets$SetView.iterator()Lcom/google/common/collect/UnmodifiableIterator;The method's class, com.google.common.collect.Sets$SetView, is available from the following locations:jar:file:/D:/MavenRepository/com/google/guava/guava/18.0/guava-18.0.jar!/com/google/common/collect/Sets$SetView.classIt was loaded from the following location:file:/D:/MavenRepository/com/google/guava/guava/18.0/guava-18.0.jar

出现原因是：guava-18跟别的jar有冲突，要么将guava的版本升级要么降级

renren-fast成功注册到nacos中

index.js中配置访问的路径

将其改成访问网关的路径，并且都带上api

路由重写

网关路由配置：

spring:cloud:nacos:discovery:server-addr: 127.0.0.1:8848gateway:routes:- id: admin_routeuri: lb://renren-fast  # lb：负载均衡predicates:- Path=/api/**      # 路径中带有api的所有请求的都路由filters:- RewritePath=/api/?(?<segment>.*),/renren-fast/$\{segment}application:name: gulimall-gateway
server:port: 88

出现CROS错误：

Access to XMLHttpRequest at 'http://localhost:88/api/sys/menu/nav?t=1639023916234'
from origin 'http://localhost:8001' has been blocked by CORS policy: Response to
preflight request doesn't pass access control
check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

出现原因：当我们想从'http://localhost:8001'访问'http://localhost:88'，这个两个ip地址不是在同一个域下的，所以出现了跨域访问问题。'Access-Control-Allow-Origin' header这个请求头不在访问的资源中，解决方案需：要设置允许跨域的请求头

网关统一配置跨域

解决方案：

gateway中编写配置类：所有请求从网关返回的时候都会带上运行跨域访问的请求头

@Configuration
public class GulimallCROSConfig {@Beanpublic CorsWebFilter corsWebFilter(){UrlBasedCorsConfigurationSource corsConfigurationSource=new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration=new CorsConfiguration();// 跨域设置corsConfiguration.addAllowedHeader("*");  //配置那些请求头可以跨域访问corsConfiguration.addAllowedMethod("*"); //配置那些方法可以跨域访问corsConfiguration.addAllowedOrigin("*"); //配置那些来源可以跨域访问corsConfiguration.setAllowCredentials(true); //配置跨域请求可以携带cookiecorsConfigurationSource.registerCorsConfiguration("/**",corsConfiguration);return new CorsWebFilter(corsConfigurationSource);}
}

出现问题：

Access to XMLHttpRequest at 'http://localhost:88/api/sys/login' from origin 'http://localhost:8001' has been blocked by CORS policy: The 'Access-Control
-Allow-Origin' header contains multiplevalues'http://localhost:8001,http://localhost:8001', but only one is allowed.

允许跨域的请求头被设置了两个，只允许一个

出现问题的原因：renren-fast中的也设置了允许跨域的配置

解决方案：将renren-fast中的允许跨域配置类注释

三级类目后台管理系统的页面显示

经过网关后，请求路径变成了：http://localhost:88/renrenfast/product/category/list/tree

我们想要让请求路径变成：http://localhost:10000/product/category/list/tree

因此，需要编写路由：

出现问题：访问不到

出现问题的原因是：admin_router中的断言会优先将路径进行重写

解决方案：断言中小范围的路径访问要写在大范围的路径访问之前

spring:cloud:nacos:discovery:server-addr: 127.0.0.1:8848gateway:routes:- id: product_routeuri: lb://gulimall-productpredicates:- Path=/api/product/**filters:- RewritePath=/api/?(?<segment>.*),/$\{segment}- id: admin_routeuri: lb://renren-fast  # lb：负载均衡predicates:- Path=/api/**      # 路径中带有api的所有请求的都路由filters:- RewritePath=/api/?(?<segment>.*),/renren-fast/$\{segment}application:name: gulimall-gateway
server:port: 88

将获取到data在控制台中打印，发现data中的data才是真正的存放数据的对象

<template><el-tree :data="menu" :props="defaultProps" ></el-tree>
</template><script>
export default {data() {//这里存放数据return {menu: [],defaultProps: {children: 'children',  //封装子节点,prop会自动进行一个遍历label: 'name'  //显示数据,prop会自动进行一个遍历}};},methods: {//获取数据getDataList() {this.dataListLoading = true;this.$http({url: this.$http.adornUrl("/product/category/list/tree"),method: "get",}).then(({data}) => {  // 1.使用解构即{}，将data对象解构出来// 2.将data中的data赋值给menuthis.menu=data.data;// 3.将data中的data对象的属性children和name赋值给defaultProps中的children和label});},},created() {//模板一旦被创建就被加载this.getDataList();},
};

三级分类删除页面效果的编写

我们使用scoped slot编写添加和删除按键

补上复选框

补全append和remove方法，并打印看看data和node

出现的问题：当我们点击append或者delete时，会自动进行一个扩展，我们想要的效果是只有当我们点击箭头才进行扩展

解决方案：

出现问题：只有节点没有子节点是才能进行delete，只有一级和二级目录才能append

解决方案：使用v-if进行一个判断，首先使用scoped slot会传进来node和data两个数据，其中node有个level属性，就是节点的层级，node还有个childNodes表示子节点的个数即childNodes数组的长度为0可以删除

出现问题：我们需要为Tree设置node-key，方便标识每个节点

解决方案：catId是每个节点唯一的标识属性

三级分类逻辑删除后台实现

①TODO的使用，相当于备用录，用于提醒还未实现的步骤或功能

②alt+enter：快速创建方法

使用postman进行测试：

这是一个真正的物理删除，在实际开发中并不常用，一般使用逻辑删除

mybatis-plus逻辑删除指南地址：逻辑删除 | MyBatis-Plus

mybatis-plus:global-config:db-config:logic-delete-field: flag  # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)logic-delete-value: 1 # 逻辑已删除值(默认为 1)logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)

@TableLogic
private Integer deleted;

说明一下：我使用的是mybatis-plus 3.2版本的没有这个logic-delete-field配置项并不影响使用

出现问题：showStatus属性1代表显示，0代表不显示与我们的逻辑删除配置刚好相反

解决方案：@TableLogic中有两个属性值，可以重新设置逻辑删除的值

日志打印：gulimall包下的都会打印日志

三级类目删除功能的前后联调

在httpRequest.js中url的拼接规则

当我们点击Delete按键就会去调用remove方法，因此需要去重写remove方法

重写remove方法：

出现问题：页面没有即时更新

解决方案：删除成功之后再次调用获取数据方法，进行一个数据的更新

出现问题：1.没有删除确认提示 2.删除成功或失败应该有消息提示 3.删除成功或失败应该父节点应该扩展而不是整个层级合并

<template><!-- 使用v-bind/':'才能为属性赋值成功 --><div><el-treeshow-checkbox:data="menu":props="defaultProps":expand-on-click-node="false"node-key="catId":default-expanded-keys="expandKey"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span><span><!--箭头函数调用append方法--><!-- 一级目录和二级目录才允许append --><el-buttonv-if="node.level <= 2"type="text"size="mini"@click="() => append(data)">Append</el-button><!-- 没有子节点才允许delete --><el-buttonv-if="node.childNodes.length == 0"type="text"size="mini"@click="() => remove(node, data)">Delete</el-button></span></span></el-tree></div>
</template>
<script>
export default {data() {//这里存放数据return {menu: [],expandKey: [],defaultProps: {children: "children", //封装子节点,prop会自动进行一个遍历label: "name", //显示数据,prop会自动进行一个遍历},};},methods: {//获取数据getDataList() {this.dataListLoading = true;this.$http({url: this.$http.adornUrl("/product/category/list/tree"),method: "get",}).then(({ data }) => {// 1.使用解构即{}，将data对象解构出来// 2.将data中的data赋值给menuthis.menu = data.data;// 3.将data中的data对象的属性children和name赋值给defaultProps中的children和label});},append(data) {console.log("append", data);},remove(node, data) {let catId = [data.catId];this.$confirm(`此操作将删除${data.name}, 是否继续?`, "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.$http({url: this.$http.adornUrl("/product/category/delete"),method: "post",data: this.$http.adornData(catId, false),}).then(({ data }) => {this.$message({type: "success",message: "删除成功!",});// 刷新菜单this.getDataList();// 默认菜单展示this.expandKey = [node.parent.data.catId];});}).catch(() => {this.$message({type: "info",message: "已取消删除",});});console.log("remove", node, data);},},//生命周期 - 创建完成（可以访问当前this实例）created() {//模板一旦被创建就被加载this.getDataList();},
};