企业网站推广最有效的方法,pop布局的网站,王烨请叫我鬼差大人,天津网站开发工资水平目录 一、总述
二、前端实现
三、后端实现
四、总结 一、总述
本次就是一个小的优化。
就是分组新增或者是修改的时候#xff0c;直接显示商品分类的id可读性不高#xff0c;新增的时候需要填写对商品分类的id#xff0c;修改的时候#xff0c;就只是给你一个商品分类…目录 一、总述
二、前端实现
三、后端实现
四、总结 一、总述
本次就是一个小的优化。
就是分组新增或者是修改的时候直接显示商品分类的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 IServiceAttrGroup {AttrGroupVo getDetailGroup(Long attrGroupId);
}
service实现
Service
public class AttrGroupServiceImpl extends ServiceImplAttrGroupMapper, 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) {ListLong path new ArrayList();ListLong categoryPath path(categoryId, path);Collections.reverse(categoryPath);return categoryPath.toArray(new Long[categoryPath.size()]);}private ListLong path(Long categoryId,ListLong path){path.add(categoryId);Category category getById(categoryId);Long parentCid category.getParentCid();if(parentCid!0){path(parentCid,path);}return path;}
四、总结
前端的话就是一个级联组件的使用后端的话主要是分类路径的获取
