黑马程序员技术交流社区

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

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

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

品优购电商系统开发
第 6 章
商品录入【2】

课程目标
目标 1：完成选择商品分类功能
目标 2：完成品牌选择功能
目标 3：完成扩展属性功能
目标 4：完成规格选择功能
目标 5：完成 SKU 商品信息功能
目标 6：完成是否启用规格功能
1.商品录入【选择商品分类】
1.1 需求分析
在商品录入界面实现商品分类的选择（三级分类）效果如下：

当用户选择一级分类后，二级分类列表要相应更新，当用户选择二级分类后，三级列表要相应更新。
1.2 准备工作
（1）在 pinyougou-shop-web 工程中创建 ItemCatController.（可拷贝运营商后台的代码）
（2）创建 item_catService.js （可拷贝运营商后台的代码）
（3）修改 goodsController.js，引入 itemCatService
（4）修改 goods_edit.html，添加引用

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

<script type="text/javascript" src="../js/base.js"></script>

<script type="text/javascript" src="../js/service/goodsService.js"></script>

<script type="text/javascript" src="../js/service/itemCatService.js"></script>

 <script type="text/javascript" src="../js/controller/baseController.js"></script>

<script type="text/javascript" src="../js/controller/goodsController.js"></script>

1.3 代码实现
1.3.1 一级分类下拉选择框
在 goodsController 增加代码

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

//读取一级分类

$scope.selectItemCat1List=function(){

itemCatService.findByParentId(0).success(

function(response){

$scope.itemCat1List=response;

}

);

}

页面加载调用该方法

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

<body

class="hold-transition skin-red sidebar-mini"

ng-app="pinyougou"

ng-controller="goodsController" ng-init="selectItemCat1List()">

修改 goods_edit.html 一级分类下拉选择框

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

<select class="form-control" ng-model="entity.goods.category1Id" ng-options="item.id

as item.name for item in itemCat1List"></select>

ng-options 属性可以在表达式中使用数组或对象来自动生成一个 select 中的 option 列表。
ng-options 与 ng-repeat 很相似，很多时候可以用 ng-repeat 来代替 ng-options。但是 ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。
运行效果如下：

1.3.2 二级分类下拉选择框
在 goodsController 增加代码：

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

 //读取二级分类

$scope.$watch('entity.goods.category1Id', function(newValue, oldValue) {

//根据选择的值，查询二级分类

itemCatService.findByParentId(newValue).success(

function(response){

$scope.itemCat2List=response;

}

);

});

$watch 方法用于监控某个变量的值，当被监控的值发生变化，就自动执行相应的函数。
修改 goods_edit.html 中二级分类下拉框

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

 <select

class="form-control select-sm"

ng-model="entity.goods.category2Id"

ng-options="item.id as item.name for item in itemCat2List"></select>

1.3.3 三级分类下拉选择框
在 goodsController 增加代码：

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

 //读取三级分类

$scope.$watch('entity.goods.category2Id', function(newValue, oldValue) {

 //根据选择的值，查询二级分类

itemCatService.findByParentId(newValue).success(

function(response){

$scope.itemCat3List=response;

}

);

});

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

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

<select

class="form-control select-sm"

ng-model="entity.goods.category3Id"

ng-options="item.id as item.name for item in itemCat3List"></select>

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

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