猿实战是一个原创系列文章,通过实战的方式,采用前后端分离的技术结合SpringMVC Spring Mybatis,手把手教你撸一个完整的电商系统,变身猿人找到工作不是问题。还等什么呢?关注公号,取基础代码,一起实战吧。
上一个章节,猿人君教会了你实现商品发布的类目选择,学习了一个新的组件,联级选择器,今天我们来继续学习商品发布的详情页面。
功能概览
根据之前的设计文章,在商品发布详情页面中。商品的核心信息主要分为以上几大模块。
商品类目信息,商品基本信息,商品属性信息,商品品牌信息,商品描述信息,商品包装信息以及物流相关信息(运费模板选择)。
数据库设计
本章节主要涉及的是外部界面的信息整合,暂时还不涉及新的持久化数据。
后端功能实现
为了配合页面的功能,本章节涉及的后端功能,主要是为页面提供数据支撑,涉及的数据接口主要是以下几个方面。类目属性、品牌
以及运费模板。
类目属性:
/**
* 返回商品发布所需要的类目属性列表
* @param queryMallCategoryProperty
* @return
*/
@RequestMapping("/findForReleaseProduct")
public Result<List<MallCategoryPropertyVo>> findForReleaseProduct(@RequestBody QueryMallCategoryProperty queryMallCategoryProperty){
return mallCategoryPropertyService.findForReleaseProduct(queryMallCategoryProperty);
}
@Override
public Result<List<MallCategoryPropertyVo>> findForReleaseProduct(QueryMallCategoryProperty query) {
Result<List<MallCategoryPropertyVo>> result = new Result<List<MallCategoryPropertyVo>>();
List<MallCategoryProperty> propertyList=mallCategoryPropertyDao.selectMallCategoryPropertyByQuery(query);
QueryMallCategoryPropertyValue queryValue= new QueryMallCategoryPropertyValue();
queryValue.setCategoryIdList(query.getCategoryIdList());
List<MallCategoryPropertyValue> valueList=mallCategoryPropertyValueDao.selectMallCategoryPropertyValueByQuery(queryValue);
result.addDefaultModel(buildMallCategoryPropertyVoList(propertyList,valueList));
return result;
}
private List<MallCategoryPropertyVo> buildMallCategoryPropertyVoList(List<MallCategoryProperty> propertyList,List<MallCategoryPropertyValue> valueList){
List<MallCategoryPropertyVo> dataList = new ArrayList<MallCategoryPropertyVo>();
for(MallCategoryProperty property:propertyList){
MallCategoryPropertyVo propertyVo = new MallCategoryPropertyVo();
propertyVo.setId(property.getCategoryPropertyId());
propertyVo.setName(property.getPropertyName());
propertyVo.setPropertyType(property.getPropertyType());
for(MallCategoryPropertyValue value:valueList){
if(property.getCategoryPropertyId().longValue()==value.getCategoryPropertyId().longValue()){
MallCategoryPropertyValueVo valueVo= new MallCategoryPropertyValueVo();
valueVo.setId(value.getCategoryPropertyValueId());
valueVo.setName(value.getPropertyValueData());
propertyVo.getValueList().add(valueVo);
dataList.add(propertyVo);
}
}
}
return dataList;
}
注意噢,为了更好的支持页面的数据筛选功能,我们定义了一个专门用于展示的vo.
品牌数据接口:
运费模板数据接口:
前端功能实现
具体的前端代码,会在后续的章节中完全放出来,本章节主要讲解初始化页面的核心内容。
作为发布商品的功能初始化页面,自然需要一些数据准备的工作。之前猿人君一直有提及一个概念,作为一个系统而言,业务的搭建其实往往是有一条数据链路组成的。从最小的基础元素开始经过组织和调整,最终去驱动系统的核心流程。
那么作为商品而言,之前所做的一切工作,只是为了灵活的去描述商品本身的特性。商品会去聚合类目、品牌、属性、运费的数据,来完成自身特性的描述。
类目特征的数据获取,是通过用户选择的方式来获取的,在进入到商品发布详情页面之前,用户选择的类目信息,会通过参数的方式传递,而详情页面,需要接受这些参数。
商品的属性特征,会聚合在类目属性上,需要在页面初始化的时候,进行数据准备。品牌、运费模板的信息,也需要提前加载出来供用户发布商品时使用。
需要注意的是,商品的属性可以大致分为两个类别——普通属性和销售属性,在获取数据之后,需要根据属性类型做区分,这一点,对后续的业务有较大影响。普通属性更多会体现在后续的数据检索上,而销售属性,会体现在sku层面上。
品牌和运费模板数据获取。
还记得怎么使用封装好的API吗?是时候提醒你一下了。