app安装,apper

  

  课程目标   

  

  1:完成选择商品分类的功能。   

  

  目的:完成品牌选择功能。   

  

  3:完成扩展属性功能。   

  

  4:完成规格选择功能。   

  

  目标5:完成SKU商品信息功能。   

  

  目标6:完成是否启用规范功能。   

  

  

1.商品录入【选择商品分类】

  

  

  1.1需求分析   

  

  在商品录入界面中,选择商品分类(三级分类)有以下作用:   

  

     

  

  当用户选择一级分类时,二级分类列表要相应更新,当用户选择二级分类时,三级列表要相应更新。   

  

  1.2准备工作   

  

  (1)在品友购-shop-web项目中创建ItemCatController。(可以在运营商后台复制代码)   

  

  (2)创建item_catService.js(操作员后台的代码可以复制)   

  

  (3)修改goodsController.js,引入itemCatService   

  

  (4)修改goods_edit.html,添加引用。   

  

  脚本类型='text/javascript' src='./js/base . js '/script script type=' text/JavaScript ' src='./js/service/goods service . js '/script script type=' text/JavaScript ' src='./js/service/itemcatservice . js '/script script type=' text/JavaScript ' src='./js/controller/base controller . js '/script script type=' text/JavaScript ' src='./js/controller/goods controller . js '/脚本1.3代码实现   

  

  1.3.1一级分类下拉选择框   

  

  在goodsController中添加代码   

  

  //读取一级分类$ scope . selectitemcat 1 list=function(){ item service . findbybarentid(0)。success(function(response){ $ scope . item cat 1 list=response;} );}页面加载调用这个方法。   

  

  class=' hold-transition skin-red sidebar-mini ' ng-app=' pinyougou ' ng-controller=' goods controller ' ng-init=' selectitemcat 1 list()' modify goods _ edit . html一级分类下拉选择框   

  

  class=' form-control ' ng-model=' entity . goods . category 1 id ' ng-options=' item . id as item . name for item cat 1 list '/select ng-options属性可以在表达式中使用数组或对象来自动生成select中的选项列表。Ng-options与ng-repeat非常相似。在许多情况下,ng选项可以被ng重复替换。但是,ng-options提供了一些好处,比如减少内存和提高速度,并提供了选择框选项供用户选择。   

  

  操作效果如下:   

  

     

  

  1.3.2二级分类下拉选择框   

  

  在goodsController中添加代码:   

  

  //读取二级分类$ scope。$ watch(' entity . goods . category 1 id ',function (new value,old value){//根据选择的值,查询二级分类itemcat服务。FindbyBarentid(新值)。success(function(response){ $ scope . item cat 2 list=response });});$watch方法用于监视变量的值。当监控值改变时,相应的功能将自动执行。   

  

  修改goods_edit.html中的二级分类下拉框   

  

  select class='form-c   

ontrol select-sm" ng-model="entity.goods.category2Id" ng-options="item.id as item.name for item in itemCat2List"></select>1.3.3三级分类下拉选择框

  

在goodsController增加代码:

  

//读取三级分类$scope.$watch('entity.goods.category2Id', function(newValue, oldValue) { //根据选择的值,查询二级分类 itemCatService.findByParentId(newValue).success( function(response){ $scope.itemCat3List=response; } ); });修改goods_edit.html中三级分类下拉框

  

<select class="form-control select-sm" ng-model="entity.goods.category3Id" ng-options="item.id as item.name for item in itemCat3List"></select>1.3.4读取模板ID

  

在goodsController增加代码:

  

//三级分类选择后 读取模板ID $scope.$watch('entity.goods.category3Id', function(newValue, oldValue) { itemCatService.findOne(newValue).success( function(response){ $scope.entity.goods.typeTemplateId=response.typeId; //更新模板ID } ); }); 在goods_edit.html显示模板ID

  

模板ID:{{entity.goods.typeTemplateId}}

2.商品录入【品牌选择】

2.1需求分析

  

在用户选择商品分类后,品牌列表要根据用户所选择的分类进行更新。具体的逻辑是根据用户选择的三级分类找到对应的商品类型模板,商品类型模板中存储了品牌的列表json数据。

  

  

2.2代码实现

  

(1)在pinyougou-shop-web工程创建TypeTemplateController (可从运营商后台拷贝)

  

(2)在pinyougou-shop-web工程创建typeTemplateService.js (可从运营商后台拷贝)

  

(3)在goodsController引入typeTemplateService 并新增代码

  

//模板ID选择后 更新品牌列表$scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) { typeTemplateService.findOne(newValue).success( function(response){ $scope.typeTemplate=response;//获取类型模板 $scope.typeTemplate.brandIds= JSON.parse( $scope.typeTemplate.brandIds);//品牌列表 } ); }); 在页面goods_edit.html 引入js

  

<script type="text/javascript" src="../js/service/typeTemplateService.js"> </script>添加品牌选择框

  

<select class="form-control" ng-model="entity.goods.brandId" ng-options="item.id as item.text for item in typeTemplate.brandIds"></select>

3.商品录入【扩展属性】

3.1需求分析

  

在商品录入实现扩展属性的录入。

  

  

3.2代码实现

  

修改goodsController.js ,在用户更新模板ID时,读取模板中的扩展属性赋给商品的扩展属性。

  

//模板ID选择后 更新模板对象 $scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) { typeTemplateService.findOne(newValue).success( function(response){ $scope.typeTemplate=response;//获取类型模板 $scope.typeTemplate.brandIds= JSON.parse( $scope.typeTemplate.brandIds);//品牌列表$scope.entity.goodsDesc.customAttributeItems=JSON.parse( $scope.typeTemplate.customAttributeItems);//扩展属性 } ); });修改goods_edit.html

  

<!--扩展属性--><div class="tab-pane" id="customAttribute"> <div class="row data-type"> <div ng-repeat="pojo in entity.goodsDesc.customAttributeItems"> <div class="col-md-2 title">{{pojo.text}}</div> <div class="col-md-10 data"><input class="form-control" ng-model="pojo.value" placeholder="{{pojo.text}}"> </div> </div> </div></div>

4.商品录入【规格选择】

4.1需求分析

  

显示规格及选项列表(复选框)如下图,并保存用户选择的结果

  

  

4.2代码实现

  

4.2.1 显示规格选项列表

  

由于我们的模板中只记录了规格名称,而我们除了显示规格名称还是显示规格下的规格选项,所以我们需要在后端扩充方法。

  

(1)在pinyougou-sellergoods-interface的TypeTemplateService.java新增方法定义

  

/** * 返回规格列表 * @return */public List<Map> findSpecList(Long id);(2)在pinyougou-sellergoods-service的TypeTemplateServiceImpl.java新增方法

  

@Autowiredprivate TbSpecificationOptionMapper specificationOptionMapper;@Overridepublic List<Map> findSpecList(Long id) {//查询模板TbTypeTemplate typeTemplate = typeTemplateMapper.selectByPrimaryKey(id);List<Map> list = JSON.parseArray(typeTemplate.getSpecIds(), Map.class) ;for(Map map:list){//查询规格选项列表TbSpecificationOptionExample example=new TbSpecificationOptionExample();com.pinyougou.pojo.TbSpecificationOptionExample.Criteria criteria = example.createCriteria();criteria.andSpecIdEqualTo( new Long( (Integer)map.get("id") ) );List<TbSpecificationOption> options = specificationOptionMapper.selectByExample(example);map.put("options", options);}return list;}(3)在pinyougou-shop-web的TypeTemplateController.java新增方法

  

@RequestMapping("/findSpecList")public List<Map> findSpecList(Long id){return typeTemplateService.findSpecList(id);}测试后端代码:

  

  

(4)前端代码:修改pinyougou-shop-web的typeTemplateService.js

  

//查询规格列表this.findSpecList=function(id){return $http.get('../typeTemplate/findSpecList.do?id='+id);}(5)修改pinyougou-shop-web的goodsController.js

  

//模板ID选择后 更新模板对象 $scope.$watch('entity.goods.typeTemplateId', function(newValue, oldValue) { typeTemplateService.findOne(newValue).success( function(response){ $scope.typeTemplate=response;//获取类型模板 $scope.typeTemplate.brandIds= JSON.parse( $scope.typeTemplate.brandIds);//品牌列表$scope.entity.goodsDesc.customAttributeItems=JSON.parse( $scope.typeTemplate.customAttributeItems);//扩展属性 } ); //查询规格列表 typeTemplateService.findSpecList(newValue).success( function(response){ $scope.specList=response; } ); }); (6)修改goods_edit.html页面

  

<div ng-repeat="pojo in specList"> <div class="col-md-2 title">{{pojo.text}}</div> <div class="col-md-10 data"> <span ng-repeat="option in pojo.options"> <input type="checkbox" >{{option.optionName}} </span> </div></div> 4.2.2 保存选中规格选项

  

我们需要将用户选中的选项保存在tb_goods_desc表的specification_items字段中,定义json格式如下:

  

<{“attributeName”:”规格名称”,”attributeValue”:<“规格选项1”,“规格选项2”.... > } , .... >(1)在baseController.js增加代码

  

//从集合中按照key查询对象$scope.searchObjectByKey=function(list,key,keyValue){for(var i=0;i<list.length;i++){if(list==keyValue){return list;}}return null;}(2)在goodsController.js增加代码

  

$scope.entity={ goodsDesc:{itemImages:<>,specificationItems:<>} };$scope.updateSpecAttribute=function($event,name,value){var object= $scope.searchObjectByKey($scope.entity.goodsDesc.specificationItems ,'attributeName', name);if(object!=null){if($event.target.checked ){object.attributeValue.push(value);}else{//取消勾选object.attributeValue.splice( object.attributeValue.indexOf(value ) ,1);//移除选项//如果选项都取消了,将此条记录移除if(object.attributeValue.length==0){$scope.entity.goodsDesc.specificationItems.splice($scope.entity.goodsDesc.specificationItems.indexOf(object),1);}}}else{$scope.entity.goodsDesc.specificationItems.push({"attributeName":name,"attributeValue":});}}(3)在goods_edit.html调用方法

  

<div ng-repeat="pojo in specList"><div class="col-md-2 title">{{pojo.text}}</div><div class="col-md-10 data"><span ng-repeat="option in pojo.options"><input type="checkbox" ng-click="updateSpecAttribute($event,pojo.text,option.optionName)">{{option.optionName}} </span> </div></div> 为了方便测试,我们可以在页面上某个区域临时添加表达式,以便观测测试结果

  

{{entity.goodsDesc.specificationItems}}

5.商品录入【SKU商品信息】

5.1需求分析

  

基于上一步我们完成的规格选择,根据选择的规格录入商品的SKU信息,当用户选择相应的规格,下面的SKU列表就会自动生成,如下图:

  

  

实现思路:实现思路:

  

(1)我们先定义一个初始的不带规格名称的集合,只有一条记录。

  

(2)循环用户选择的规格,根据规格名称和已选择的规格选项对原集合进行扩充,添加规格名称和值,新增的记录数与选择的规格选项个数相同

  

生成的顺序如下图:

  

  

5.2前端代码

  

5.2.1 生成SKU列表(深克隆)

  

(1)在goodsController.js实现创建sku列表的方法

  

//创建SKU列表$scope.createItemList=function(){$scope.entity.itemList=<{spec:{},price:0,num:99999,status:'0',isDefault:'0' } >;//初始var items= $scope.entity.goodsDesc.specificationItems;for(var i=0;i< items.length;i++){$scope.entity.itemList = addColumn( $scope.entity.itemList,items.attributeName,items.attributeValue ); }}//添加列值 addColumn=function(list,columnName,conlumnValues){var newList=<>;//新的集合for(var i=0;i<list.length;i++){var oldRow= list;for(var j=0;j<conlumnValues.length;j++){var newRow= JSON.parse( JSON.stringify( oldRow ) );//深克隆newRow.spec=conlumnValues;newList.push(newRow);} } return newList;}(2)在更新规格属性后调用生成SKU列表的方法

  

<input type="checkbox" ng-click="updateSpecAttribute($event,pojo.text,option.optionName);createItemList()">{{option.optionName}}(3)在页面上添加表达式,进行测试

  

{{entity.itemList}}显示效果如下:

  

  

5.2.2 显示SKU列表

  

goods_edit.html页面上绑定SKU列表

  

<table class="table table-bordered table-striped table-hover dataTable"> <thead> <tr> <th class="sorting" ng-repeat="item in entity.goodsDesc.specificationItems">{{item.attributeName}}</th> <th class="sorting">价格</th> <th class="sorting">库存</th> <th class="sorting">是否启用</th> <th class="sorting">是否默认</th> </tr> </thead> <tbody> <tr ng-repeat="pojo in entity.itemList"> <td ng-repeat="item in entity.goodsDesc.specificationItems"> {{pojo.spec}} </td> <td> <input class="form-control" ng-model="pojo.price" placeholder="价格"> </td> <td> <input class="form-control" ng-model="pojo.num" placeholder="库存数量"> </td> <td> <input type="checkbox" ng-model="pojo.status" ng-true-value="1" ng-false-value="0" > </td> <td> <input type="checkbox" ng-model="pojo.isDefault" ng-true-value="1" ng-false-value="0"> </td> </tr> </tbody></table>删除掉原来的测试用的表达式

  

5.3后端代码

  

(1)在GoodsServiceImpl添加属性

  

@Autowiredprivate TbItemMapper itemMapper;@Autowiredprivate TbBrandMapper brandMapper;@Autowiredprivate TbItemCatMapper itemCatMapper;@Autowiredprivate TbSellerMapper sellerMapper;(2)修改GoodsServiceImpl的add方法,增加代码,实现对SKU商品信息的保存

  

/** * 增加 */@Overridepublic void add(Goods goods) {goods.getGoods().setAuditStatus("0");goodsMapper.insert(goods.getGoods());//插入商品表goods.getGoodsDesc().setGoodsId(goods.getGoods().getId());goodsDescMapper.insert(goods.getGoodsDesc());//插入商品扩展数据for(TbItem item :goods.getItemList()){//标题String title= goods.getGoods().getGoodsName();Map<String,Object> specMap = JSON.parseObject(item.getSpec());for(String key:specMap.keySet()){title+=" "+ specMap.get(key);}item.setTitle(title);item.setGoodsId(goods.getGoods().getId());//商品SPU编号item.setSellerId(goods.getGoods().getSellerId());//商家编号item.setCategoryid(goods.getGoods().getCategory3Id());//商品分类编号(3级)item.setCreateTime(new Date());//创建日期item.setUpdateTime(new Date());//修改日期 //品牌名称TbBrand brand = brandMapper.selectByPrimaryKey(goods.getGoods().getBrandId());item.setBrand(brand.getName());//分类名称TbItemCat itemCat = itemCatMapper.selectByPrimaryKey(goods.getGoods().getCategory3Id());item.setCategory(itemCat.getName());//商家名称TbSeller seller = sellerMapper.selectByPrimaryKey(goods.getGoods().getSellerId());item.setSeller(seller.getNickName());//图片地址(取spu的第一个图片)List<Map> imageList = JSON.parseArray(goods.getGoodsDesc().getItemImages(), Map.class) ;if(imageList.size()>0){item.setImage ( (String)imageList.get(0).get("url"));}itemMapper.insert(item);}}

6.商品录入【是否启用规格】

6.1需求分析

  

在规格面板添加是否启用规格,当用户没有选择该项,将原来的规格面板和SKU列表隐藏,用户保存商品后只生成一个SKU.

  

  

6.2前端代码

  

goods_add.html添加复选框

  

<div class="row data-type"> <div class="col-md-2 title">是否启用规格</div><div class="col-md-10 data"><input type="checkbox" ng-model="entity.goods.isEnableSpec" ng-true-value="1" ng-false-value="0"></div> </div>用if指令控制规格面板与SKU列表的显示与隐藏

  

<div ng-if="entity.goods.isEnableSpec==1">......SKU表格部分</div>6.3后端代码

  

修改GoodsServiceImpl的add方法

  

/** * 增加 */@Overridepublic void add(Goods goods) {goods.getGoods().setAuditStatus("0");goodsMapper.insert(goods.getGoods());//插入商品表goods.getGoodsDesc().setGoodsId(goods.getGoods().getId());goodsDescMapper.insert(goods.getGoodsDesc());//插入商品扩展数据if("1".equals(goods.getGoods().getIsEnableSpec())){for(TbItem item :goods.getItemList()){//标题String title= goods.getGoods().getGoodsName();Map<String,Object> specMap = JSON.parseObject(item.getSpec());for(String key:specMap.keySet()){title+=" "+ specMap.get(key);}item.setTitle(title);setItemValus(goods,item);itemMapper.insert(item);}}else{TbItem item=new TbItem();item.setTitle(goods.getGoods().getGoodsName());//商品KPU+规格描述串作为SKU名称item.setPrice( goods.getGoods().getPrice() );//价格item.setStatus("1");//状态item.setIsDefault("1");//是否默认item.setNum(99999);//库存数量item.setSpec("{}");setItemValus(goods,item);itemMapper.insert(item);}}private void setItemValus(Goods goods,TbItem item) {item.setGoodsId(goods.getGoods().getId());//商品SPU编号item.setSellerId(goods.getGoods().getSellerId());//商家编号item.setCategoryid(goods.getGoods().getCategory3Id());//商品分类编号(3级)item.setCreateTime(new Date());//创建日期item.setUpdateTime(new Date());//修改日期 //品牌名称TbBrand brand = brandMapper.selectByPrimaryKey(goods.getGoods().getBrandId());item.setBrand(brand.getName());//分类名称TbItemCat itemCat = itemCatMapper.selectByPrimaryKey(goods.getGoods().getCategory3Id());item.setCategory(itemCat.getName());//商家名称TbSeller seller = sellerMapper.selectByPrimaryKey(goods.getGoods().getSellerId());item.setSeller(seller.getNickName());//图片地址(取spu的第一个图片)List<Map> imageList = JSON.parseArray(goods.getGoodsDesc().getItemImages(), Map.class) ;if(imageList.size()>0){item.setImage ( (String)imageList.get(0).get("url"));}}

相关文章