谷粒商城第十天-分组新增级联显示商品分类分组修改级联回显商品分类

目录

一、总述

二、前端实现

三、后端实现

四、总结


一、总述

本次就是一个小的优化。

就是分组新增或者是修改的时候,直接显示商品分类的id可读性不高,新增的时候需要填写对商品分类的id,修改的时候,就只是给你一个商品分类的数字,并不能直接显示到底是什么分类。

那有什么办法可以解决这个问题呢?

elementUI中的级联选择器可以解决这个问题。

二、前端实现

前端这里就是一个级联选择器这个组件的使用,翻阅文档,知道哪些参数,如何配置就行了

下图是elementUI中的级联选择器:

 复制这个直接到我们的分组组件中,在新增/删除对话框那里,将所属分类id下面的内容进行替换

 在数据域中声明好相关的属性:

需要正确将分类数据显示出来的话,就需要在页面打开的时候就获取到分类数据,放到categorys中:

 通过上述步骤,基本上就能显示了 ,但是会出现最后一级的分类是空的情况,这是由于这个级联组件可不管你的children集合里面没有元素,只要存在这个就渲染,空的也渲染,只是显示空白,没有数据罢了。

那么需要怎么办呢?

其实很简单,就是将后端返回的对应的那个实体类,在children字段上面加上注解,加上:

@JsonInclude(JsonInclude.Include.NON_EMPTY)

 

代表一但为空的话,这里的为空空集合也包括了,就不将这个字段以json返回给前端。

 到现在的话,在新增的时候就能级联显示分类信息了:

当然这里选择的话,最终给我们的数据是,从父到孙的分类id数组,而我们最终提交的时候,只需要提交最后一级的分类id就行了,因此需要在提交之前做一下处理,修改表单中的绑定的分类值:

那修改的时候,怎样还以这种级联的方式进行回显呢?

其实很简单,我们知道刚刚选择了最终我们得到的数据是"父-子-孙"的分类id数组,反正有这个数据,级联组件就能正确的进行显示。

那么现在思路其实就已经出来了,就是点击修改按钮的时候,前端肯定要向后端请求分组数据,只需要分组数据中携带好分类id的完整路径即可,然后将这个完整路径设置给数据域中的categoryIds,又因为这个categoryIds和级联组件进行了绑定,因此此时级联组件就能按照这个路径进行级联显示了。

所以现在只需要在后端携带好这个路径,然后在前端绑定好就行了。

后端携带这个路径是后端的事情,在后端实现中进行说明,现在直接说一下绑定:

三、后端实现

在新增分组信息的后端没什么好说的,都不需要修改什么。

只是这个修改分组时因为需要将分类信息以级联的方式进行回显,而级联回显依赖的是分类路径。

所以这里后端主要是对分类信息获取接口改进一下,就是新增一个分类路径进行返回

1. controller

2. service

service接口:

public interface IAttrGroupService extends IService<AttrGroup> {AttrGroupVo getDetailGroup(Long attrGroupId);
}

service实现:

@Service
public class AttrGroupServiceImpl extends ServiceImpl<AttrGroupMapper, AttrGroup> implements IAttrGroupService {@Autowiredprivate ICategoryService categoryService;@Overridepublic AttrGroupVo getDetailGroup(Long attrGroupId) {AttrGroup group = getById(attrGroupId);AttrGroupVo attrGroupVo = new AttrGroupVo();BeanUtils.copyProperties(group,attrGroupVo);Long[] path = categoryService.categoryPath(group.getCatelogId());attrGroupVo.setCategoryPath(path);return attrGroupVo;}
}

这是分组这里,主要还是分类那里通过分类id获取其完整路径的核心方法:

service:

接口:

 实现:

@Overridepublic Long[] categoryPath(Long categoryId) {List<Long> path = new ArrayList<>();List<Long> categoryPath = path(categoryId, path);Collections.reverse(categoryPath);return categoryPath.toArray(new Long[categoryPath.size()]);}private List<Long> path(Long categoryId,List<Long> path){path.add(categoryId);Category category = getById(categoryId);Long parentCid = category.getParentCid();if(parentCid!=0){path(parentCid,path);}return path;}

四、总结

前端的话就是一个级联组件的使用,后端的话主要是分类路径的获取

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/85096.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CelebA-HQ数据集下载【详细明了版】分辨率包括【64,128,256,512,1024】

CelebA-HQ数据集下载&#xff0c;分辨率包括【64&#xff0c;128&#xff0c;256&#xff0c;512&#xff0c;1024】 前言下载&处理1.下载合并解压img_celeba.7z2.下载list_landmarks_celeba.txt3.获取h5tool.py4.mkdir5. 下载.dat数据 配置环境生成数据集 前言 CelebA-HQ …

vue插槽slots

一、默认插槽&#xff1a; vue组件能够接收任意类型的 JavaScript 值作为 props&#xff0c;也可以为子组件传递一些模板片段&#xff0c;让子组件在它们的组件中渲染这些片段。 例如&#xff1a;有一个<FancyButton>组件 在父组件中引用 最终渲染出来的dom 插槽内容可…

配置中心替换测试设计分享

一、背景 项目后端服务开始一直使用Apollo配置中心(携程开发)进行配置管理&#xff0c;由于公司自研了配置中心B&#xff0c;为了后续方便管理和降本增效&#xff0c;后端服务使用的配置需要由Apollo配置中心切换到自研配置中心B。后续不再使用Apollo配置。 替换前架构&#x…

刷新缓冲区(标准IO)

标准IO是带缓冲的&#xff0c;输入和输出函数属于行缓冲&#xff0c;stdin、stdin、printf、scanf 1.换行符刷新 2.缓冲区满刷新 3.fflush函数强制刷新 4.程序正常结束

【云原生】K8S集群

目录 一、调度约束1.1 POT的创建过程1.1调度过程 二、指定节点调度2.1 通过标签选择节点 三、亲和性3.1requiredDuringSchedulingIgnoredDuringExecution&#xff1a;硬策略3.1 preferredDuringSchedulingIgnoredDuringExecution&#xff1a;软策略3.3Pod亲和性与反亲和性3.4使…

【CSS】文本效果

文本溢出、整字换行、换行规则以及书写模式 代码&#xff1a; <style> p.test1 {white-space: nowrap; width: 200px; border: 1px solid #000000;overflow: hidden;text-overflow: clip; }p.test2 {white-space: nowrap; width: 200px; border: 1px solid #000000;ove…

Android侧滑栏(一)可缩放可一起移动的侧滑栏

在实际的各类App开发中&#xff0c;经常会需要做一个左侧的侧滑栏&#xff0c;类似于QQ这种。 今天这篇文章总结下自己在开发中遇到的这类可以跟随移动且可以缩放的侧滑栏。 一、实现原理 使用 HorizontalScrollView 实现一个水平方向的可滑动的View&#xff0c;左布局为侧滑…

arcgis pro 3.0.2 安装及 geemap

arcgis pro 3.0.2 安装及 geemap arcgis pro 3.0.2 安装 arcgis pro 3 版本已经很多了&#xff0c;在网上找到资源就可以进行安装 需要注意的是&#xff1a;有的文件破解文件缺少&#xff0c;导致破解不成功。 能够新建地图就是成功了&#xff01; geemap安装 1.需要进行环…

VsCode美化 - VsCode自定义 - VsCode自定义背景图

VsCode美化 - VsCode自定义 - VsCode自定义背景图&#xff1a;添加二次元老婆图到VsCode 前言 作为一个二刺螈&#xff0c;VsCode用久了&#xff0c;总觉得少了些什么。是啊&#xff0c;高效的代码生产工具中怎么能没有老婆呢&#xff1f; 那就安装一个VsCode插件把老婆添加…

Byzer-LLM环境安装

1.Byzer-LLM简介 Byzer-LLM 是基于 Byzer 的一个扩展&#xff0c;让用户可以端到端的完成业务数据获取&#xff0c;处理&#xff0c;finetune大模型&#xff0c;多场景部署大模型等全流程。 该扩展的目标也是为了让企业更好的将业务数据注入到私有大模型&#xff08;开源或者商…

学生公寓一进四出智能电表的功能介绍

学生公寓一进四出智能电表石家庄光大远通电气有限公司模块时间控制功能&#xff1a;可设定每个宿舍自动断电和供电的时间&#xff1b;也可以设定某时间段内为小功率输出,设定时间后自动恢复正常供电。权限管理&#xff1a;管理者可对操作人员设定不同操作权限&#xff1b; 软件…

Android T 窗口层级其一 —— 容器类

窗口在App端是以PhoneWindow的形式存在&#xff0c;承载了一个Activity的View层级结构。这里我们探讨一下WMS端窗口的形式。 可以通过adb shell dumpsys activity containers 来看窗口显示的层级 窗口容器类 —— WindowContainer类 /*** Defines common functionality for c…

Linux下 时间戳的转化

Linux下一般用date 记录当前时间&#xff0c;尤其是我们需要保存测试log的时候&#xff0c;或者设计一个跑多长时间的脚本都需要时间戳。下面看一下平时最常用的几种写法 1 date “%Y-%m-%d %H:%M” 显示具体时间 2 修改时间 date -s 3 date %s :当前时间的时间戳 显示具体时…

去了字节跳动,才知道年薪40W的测试有这么多?

今年大环境不好&#xff0c;内卷的厉害&#xff0c;薪资待遇好的工作机会更是难得。最近脉脉职言区有一条讨论火了 哪家互联网公司薪资最‘厉害’&#xff1f; 下面的评论多为字节跳动&#xff0c;还炸出了很多年薪40W的测试工程师 我只想问一句&#xff0c;现在的测试都这么有…

Opencv-C++笔记 (16) : 几何变换 (图像的翻转(镜像),平移,旋转,仿射,透视变换)

文章目录 一、图像平移二、图像旋转2.1 求旋转矩阵2.2 求旋转后图像的尺寸2.3手工实现图像旋转2.4 opencv函数实现图像旋转 三、图像翻转3.1左右翻转3.2、上下翻转3.3 上下颠倒&#xff0c;左右相反 4、错切变换4.1 实现错切变换 5、仿射变换5.1 求解仿射变换5.2 OpenCV实现仿射…

Floyd算法

正如我们所知道的&#xff0c;Floyd算法用于求最短路径。Floyd算法可以说是Warshall算法的扩展&#xff0c;三个for循环就可以解决问题&#xff0c;所以它的时间复杂度为O(n^3)。 Floyd算法的基本思想如下&#xff1a;从任意节点A到任意节点B的最短路径不外乎2种可能&#xff…

SpringCloud实用篇2——Nacos配置管理 Feign远程调用 Gateway服务网关

目录 1 Nacos配置管理1.1 统一配置管理1.1.1 在nacos中添加配置文件1.1.2 从微服务拉取配置 1.2 配置热更新1.2.1 方式一1.2.2 方式二&#xff08;推荐&#xff09; 1.3.配置共享 2 搭建Nacos集群2.1 集群结构图2.2 搭建集群2.2.1 初始化数据库2.2.2 下载nacos2.2.3 配置Nacos2…

JavaSE 【类和对象】(3)(重点:内部类)

一、内部类 将一个类定义在另一个类或者一个方法的内部&#xff0c; 前者称为内部类&#xff0c;后者称为外部类 。内部类也是封装的一种体现 在外部类中&#xff0c;内部类定义位置与外部类成员所处的位置相同&#xff0c;因此称为成员内部类。 public class OutClass { c…

分布式异步任务处理组件(八)

分布式异步任务组件网络通信线程模型设计-- 大概说一下功能场景&#xff1a; 从节点和主节点建立连接&#xff0c;负责和主节点的网络IO通信&#xff0c;通信动作包括投票&#xff0c;心跳&#xff0c;举证等&#xff0c;步骤为读取主节点的信息&#xff0c;写入IO队列中&…

15.3.2 【Linux】系统的配置文件:/etc/crontab,/etc/cron.d/*

这个“ crontab -e ”是针对使用者的 cron 来设计的&#xff0c;如果是“系统的例行性任务”时&#xff0c; 该怎么办呢&#xff1f;是否还是需要以 crontab -e 来管理你的例行性工作调度呢&#xff1f;当然不需要&#xff0c;你只要编辑/etc/crontab 这个文件就可以。有一点需…