黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发 第 6 章 三 [打印本页]

---

作者: 我是楠楠    时间: 2020-5-21 11:25
标题: 【郑州校区】品优购电商系统开发 第 6 章 三

【郑州校区】品优购电商系统开发 第 6 章 三

4.商品录入【规格选择】
4.1 需求分析
显示规格及选项列表（复选框）如下图，并保存用户选择的结果

4.2 代码实现
4.2.1 显示规格选项列表
由于我们的模板中只记录了规格名称，而我们除了显示规格名称还是显示规格下的规格选项，所以我们需要在后端扩充方法。
（1）在 pinyougou-sellergoods-interface 的 TypeTemplateService.java 新增方法定义

[AppleScript] 纯文本查看 复制代码

/**

* 返回规格列表

* @return

*/

public List<Map> findSpecList(Long id); 

（2）在 pinyougou-sellergoods-service 的 TypeTemplateServiceImpl.java 新增方法

[AppleScript] 纯文本查看 复制代码

 @Autowired

private TbSpecificationOptionMapper specificationOptionMapper;

@Override

public 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 新增方法

[AppleScript] 纯文本查看 复制代码

 @RequestMapping("/findSpecList")

public List<Map> findSpecList(Long id){

return typeTemplateService.findSpecList(id);

}

[AppleScript] 纯文本查看 复制代码

this.findSpecList=function(id){

return $http.get('../typeTemplate/findSpecList.do?id='+id);

} 

（5）修改 pinyougou-shop-web 的 goodsController.js

[AppleScript] 纯文本查看 复制代码

 //模板 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.custom

AttributeItems);//扩展属性

}

);

//查询规格列表

typeTemplateService.findSpecList(newValue).success(

function(response){

$scope.specList=response;

}

);

}); 

（6）修改 goods_edit.html 页面

[AppleScript] 纯文本查看 复制代码

<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>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2