一、商品分类
1.1 需求及表结构分析
1.1.1 需求分析
实现三级商品分类列表查询功能
- 进入页面首先显示所有一级分类，效果如下：
- 点击列表行的查询下级按钮，进入下级分类列表，同时更新面包屑导航
- 再次点击表行的查询下级按钮，进入三级分类列表，因为三级分类属于最后一级，所以在列表中不显示查询下级按钮，同时更新面包屑导航
点击面包屑导航，可以进行返回操作。
1.1.2 表结构分析
tb_item_cat 商品分类表
| 字段 | 类型 | 长度 | 含义 |
|---|---|---|---|
| id | Bigint | 主键 | |
| parent_id | Bigint | 上级ID | |
| name | varchar | 分类名称 | |
| type_id | Bigint | 类型模板ID |
1.2 列表实现
1.2.1 后端代码
修改youlexuan_sellergoods_interface工程ItemCatService接口，新增方法定义
/**
* 根据上级ID返回列表
* @return
*/
public List<TbItemCat> findByParentId(Long parentId);
修改youlexuan_sellergoods_service工程 ItemCatServiceImpl ，实现方法
/**
* 根据上级ID返回列表
* @return
*/
@Override
public List<TbItemCat> findByParentId(Long parentId) {
TbItemCatExample tbItemCatExample = new TbItemCatExample();
Criteria criteria = tbItemCatExample.createCriteria();
criteria.andParentIdEqualTo(parentId);
return itemCatMapper.selectByExample(tbItemCatExample);
}
修改youlexuan_manager_web的 ItemCatController.java
/**
* 根据上级ID返回列表
* @return
*/
@RequestMapping("/findByParentId")
public List<TbItemCat> findByParentId(Long parentId) {
return itemCatService.findByParentId(parentId);
}
测试： http://localhost:9101/itemCat/findByParentId.do?parentId=0 （ 注：先登录哦）
1.2.2 前端代码
（1）修改 itemCatService.js
//查询并显示一级分类
this.findByParentId = function (parentId) {
return $http.get('../itemCat/findByParentId.do?parentId='+parentId);
}
（2）修改 itemCatController.js
//查询并显示一级分类
$scope.findByParentId = function (parentId) {
itemCatService.findByParentId(parentId).success(function (response) {
return $scope.list = response;
})
}
（3）修改 item_cat.html
- 将自动生成的 itemCat.html 类的相关copy 到 item_cat.html中 👇🏾👇🏾
更改后的 item_cat.html 完整代码 ：
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商品分类管理</title>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../js/base.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/itemCatController.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini"
ng-app="youlexuan" ng-controller="itemCatController"
ng-init="findByParentId(0)">
<!-- .box-body -->
<div class="box-header with-border">
<h3 class="box-title">商品分类管理
</h3>
</div>
<div class="box-body">
<ol class="breadcrumb">
<li>
<a href="#">顶级分类列表</a>
</li>
<li>
<a href="#">珠宝</a>
</li>
<li>
<a href="#">银饰</a>
</li>
</ol>
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" data-toggle="modal"
data-target="#editModal"><i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title="删除"><i class="fa fa-trash-o"></i> 删除</button>
<button type="button" class="btn btn-default" title="刷新"><i class="fa fa-check"></i> 刷新</button>
</div>
</div>
</div>
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px">
<input type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">分类ID</th>
<th class="sorting">分类名称</th>
<th class="sorting">类型模板ID</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list" >
<td><input type="checkbox"
ng-click="updateSelection($event,entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.typeId}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs"
ng-click="findByParentId(entity.id)">查询下级</button>
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"
ng-click="findOne(entity.id)">修改
</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>983</td>
<td>手镯/手链/脚链</td>
<td>
11
</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs">查询下级</button>
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改
</button>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>984</td>
<td>戒指/耳饰</td>
<td>
11
</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs">查询下级</button>
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改
</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">商品类目编辑</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>父类目ID=0时，代表的是一级的类目</td>
<td><input class="form-control" ng-model="entity.parentId" placeholder="父类目ID=0时，代表的是一级的类目">
</td>
</tr>
<tr>
<td>类目名称</td>
<td><input class="form-control" ng-model="entity.name" placeholder="类目名称"></td>
</tr>
<tr>
<td>类型id</td>
<td><input class="form-control" ng-model="entity.typeId" placeholder="类型id"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
启动服务： 安装改变的工程或直接安装父工程，启动 youlexuan_sellergoods_service 和youlexuan_manager_web
测试结果 http://localhost:9101/admin/index.html 先要登录哦！！！ 然后点击 “查询下级”则有下级出现
1.3 面包屑导航
我们需要返回上级列表，需要通过点击面包屑来实现
步骤一：
(1) 修改 itemCatController.js
$scope.grade = 1; //默认为1级
//设置级别
$scope.setGrade = function (value) {
$scope.grade = value;
}
(2) 修改列表的查询下级按钮，设定级别值后 显示列表
<tbody>
<tr ng-repeat="entity in list">
<td><input type="checkbox" ng-click="updateSelection($event,entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>
{{entity.typeId}}
</td>
<td class="text-center">
<span ng-if="grade != 3">
<button type="button" class="btn bg-olive btn-xs"
ng-click="setGrade(grade+1);findByParentId(entity.id)">查询下级</button>
</span>
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>
</td>
</tr>
</tbody>
（3） 添加默认1级级别 setGrade(1);
显示如下：
默认显示1级菜单
按“查询下级”将显示2 级菜单
再次按“查询下级”将显示3 级菜单
步骤二：
添加面包片
(1) 修改 itemCatController.js 建议理解直接拷贝
//读取分类列表
$scope.selectList = function (p_entity) {
if($scope.grade == 1){ //如果为1级
$scope.entity_1 = null;
$scope.entity_2 = null;
}
if($scope.grade == 2){ //如果为2级
$scope.entity_1 = p_entity;
$scope.entity_2 = null;
}
if($scope.grade == 3){ //如果为3级
$scope.entity_2 = p_entity;
}
$scope.findByParentId(p_entity.id); //查询此级下级列表
}
这里我们使用了
ng-if指令，用于条件判断，当级别不等于3的时候才显示“查询下级”按钮
（2） 绑定面包屑：
修改 item_cat.html 建议理解直接拷贝
<ol class="breadcrumb">
<li>
<a href="#" ng-click="setGrade(1);selectList({id:0})">顶级分类列表</a>
</li>
<li ng-if="entity_1!=null">
<a href="#" ng-click="setGrade(2);selectList(entity_1)">{{entity_1.name}}</a>
</li>
<li ng-if="entity_2!=null">
<a href="#" ng-click="setGrade(3);selectList(entity_2)">{{entity_2.name}}</a>
</li>
</ol>
ng-init="setGrade(1);selectList({id:0})"
ng-click="setGrade(grade+1);selectList(entity)"
item_cat.html 完整代码：
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商品分类管理</title>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../js/base.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/itemCatController.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan"
ng-controller="itemCatController" ng-init="setGrade(1);selectList({id:0})">
<!-- .box-body -->
<div class="box-header with-border">
<h3 class="box-title">商品分类管理
</h3>
</div>
<div class="box-body">
<ol class="breadcrumb">
<li>
<a href="#" ng-click="setGrade(1);selectList({id:0})">顶级分类列表</a>
</li>
<li ng-if="entity_1!=null">
<a href="#" ng-click="setGrade(2);selectList(entity_1)">{{entity_1.name}}</a>
</li>
<li ng-if="entity_2!=null">
<a href="#" ng-click="setGrade(3);selectList(entity_2)">{{entity_2.name}}</a>
</li>
</ol>
{{grade}}
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ><i class="fa fa-file-o"></i> 新建</button>
<button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button>
<button type="button" class="btn btn-default" title="刷新" ><i class="fa fa-check"></i> 刷新</button>
</div>
</div>
</div>
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px">
<input type="checkbox" class="icheckbox_square-blue">
</th>
<th class="sorting_asc">分类ID</th>
<th class="sorting">分类名称</th>
<th class="sorting">类型模板ID</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list">
<td><input type="checkbox" ng-click="updateSelection($event,entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>
{{entity.typeId}}
</td>
<td class="text-center">
<span ng-if="grade != 3">
<button type="button" class="btn bg-olive btn-xs"
ng-click="setGrade(grade+1);selectList(entity)">查询下级</button>
</span>
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)">修改</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
<!-- 分页 -->
<tm-pagination conf="paginationConf"></tm-pagination>
</div>
<!-- /.box-body -->
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">商品分类编辑</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>上级商品分类</td>
<td>
珠宝 >> 银饰
</td>
</tr>
<tr>
<td>商品分类名称</td>
<td><input class="form-control" placeholder="商品分类名称"> </td>
</tr>
<tr>
<td>类型模板</td>
<td>
<input select2 config="options['type_template']" placeholder="商品类型模板" class="form-control" type="text"/>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
1.4 商品编辑分类面包屑
<tr>
<td>上级商品分类</td>
<td>
顶级分类
<span ng-if="entity_1 != null">>>{{entity_1.name}}</span>
<span ng-if="entity_2 != null">>>{{entity_2.name}}</span>
</td>
</tr>
1.5 新增商品分类
实现商品分类，如下图:
当前显示的是哪一分类的列表，我们就将这个商品分类新增到这个分类下。
实现思路：我们需要一个变量去记住上级ID，在保存的时候再根据这个ID来新增分类
修改itemCatController.js, 定义变量
$scope.parentId=0;//上级ID
查询时记录上级ID
$scope.parentId=parentId;//记住上级ID
保存的时候，用到此变量
$scope.entity.parentId=$scope.parentId;//赋予上级ID
$scope.findByParentId($scope.parentId);//重新加载
修改页面 item_cat.html
1.6 新增商品分类–实现模板下拉列表
1.6.1 后端代码
（1）、修改 youlexuan_dao工程 TbTypeTemplateMapper 接口，新增获取模板列表数据方法
//获取模板列表
List<Map> selectOptionList();
（2）、修改 youlexuan_dao 工程 TbTypeTemplateMapper.xml ，新增获取模板列表配置
<select id="selectOptionList" resultType="java.util.Map">
SELECT id,name AS text FROM tb_type_template
</select>
（3）、修改youlexuan_sellergoods-interface工程TypeTemplateService接口，新增方法定义
/**
* 模板下拉框数据
*/
List<Map> selectOptionList();
（4）、修改 youlexuan_sellergoods-service工程TypeTemplateServiceImpl ，实现方法
/**
* 模板下拉框数据
*/
@Override
public List<Map> selectOptionList() {
return typeTemplateMapper.selectOptionList();
}
（5）、修改youlexuan_manager_web工程TypeTemplateController，实现方法
/**
* 模板下拉框数据
*/
@RequestMapping("/selectOptionList")
public List<Map> selectOptionList(){
return typeTemplateService.selectOptionList();
}
后端返回json测试 ：http://localhost:9101/typeTemplate/selectOptionList.do
1.6.2 前端代码
（1）、修改youlexuan_manager_web工程 typeTemplateService.js 新增获取下拉菜单数据方法
//获取模板列表
this.selectOptionList=function () {
return $http.get('../typeTemplate/selectOptionList.do');
}
（2）、修改youlexuan_manager_web工程itemCatController.js 新增获取下拉菜单数据方法
//读取模板列表
$scope.typeTemplateList={data:[]};//模板列表
$scope.findtypeTemplateList = function () {
typeTemplateService.selectOptionList().success(function (response) {
$scope.typeTemplateList={data:response};
});
}
注意：需要在itemCatController引入typeTemplateService
（3）、修改youlexuan_manager_web工程中的 item_cat.html，引入相关js
（3）、修改youlexuan-manager-web工程中的item_cat.html，引入相关js
<script type="text/javascript" src="../js/service/typeTemplateService.js"> </script>
<link rel="stylesheet" href="../plugins/select2/select2.css" />
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/angular-select2.js"> </script>
（4）、修改youlexuan_manager_web工程中的item_cat.html，修改模板id为下拉选择
<tr>
<td>类型模板</td>
<td>
<input select2 config="typeTemplateList"
ng-model="entity.typeId" select2-model="aa" placeholder="商品类型模板" class="form-control" type="text" />
</td>
</tr>
（5）、在body增加页面初始化调用商品类型菜单数据
<body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan"
ng-controller="itemCatController"
ng-init="setGrade(1);selectList({id:0});findtypeTemplateList()">
1.7 修改商品分类
修改item_cat.html的修改按钮 (应该已经开发了)
1.8 删除商品分类
（1）修改item_cat.html 的删除按钮、类别单选框
ng-click="dele()"
ng-click="updateSelection($event,entity.id)"
（2）修改itemCatController.js的删除方法，删除后返回指定父id的类别
$scope.findByParentId($scope.parentId);//刷新列表
完整 item_cat.html 代码 ：
<!DOCTYPE html>
<html xmlns:setgrade>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商品分类管理</title>
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/service/typeTemplateService.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/itemCatController.js"></script>
<link rel="stylesheet" href="../plugins/select2/select2.css" />
<link rel="stylesheet" href="../plugins/select2/select2-bootstrap.css" />
<script src="../plugins/select2/select2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/angular-select2.js"> </script>
</head>
<body class="hold-transition skin-red sidebar-mini"
ng-app="youlexuan" ng-controller="itemCatController" ng-init="findByParentId(0);findtypeTemplateList();"> <!--setGrade(1);selectList({id:0});-->
<!-- .box-body -->
<div class="box-header with-border">
<h3 class="box-title">商品分类管理
</h3>
</div>
<div class="box-body">
<ol class="breadcrumb">
<li>
<a href="#" ng-click="setGrade(1);selectList({id:0})">顶级分类列表</a>
</li>
<li ng-if="entity_1!=null">
<a href="#" ng-click="setGrade(2);selectList(entity_1)">{{entity_1.name}}</a>
</li>
<li ng-if="entity_2!=null">
<a href="#" ng-click="setGrade(3);selectList(entity_2)">{{entity_2.name}}</a>
</li>
</ol>
{{grade}}
<!-- 数据表格 -->
<div class="table-box">
<!--工具栏-->
<div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" data-toggle="modal"
data-target="#editModal"><i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title="删除" ng-click="dele()"><i class="fa fa-trash-o"></i> 删除</button>
<button type="button" class="btn btn-default" title="刷新"><i class="fa fa-check"></i> 刷新</button>
</div>
</div>
</div>
<!--数据列表-->
<table id="dataList" class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="" style="padding-right:0px"> <input type="checkbox" class="icheckbox_square-blue"></th>
<th class="sorting_asc">分类ID</th>
<th class="sorting">分类名称</th>
<th class="sorting">类型模板ID</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list" >
<td><input type="checkbox" ng-click="updateSelection($event,entity.id)"></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.typeId}}</td>
<td class="text-center">
<span ng-if="grade != 3">
<button type="button" class="btn bg-olive btn-xs"
ng-click="setGrade(grade+1);selectList(entity)">查询下级</button>
</span>
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal"
ng-click="findOne(entity.id)">修改
</button>
</td>
</tr>
</tbody>
</table>
<!--数据列表/-->
</div>
<!-- 数据表格 /-->
</div>
<!-- /.box-body -->
<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">商品分类编辑</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped" width="800px">
<tr>
<td>上级商品分类</td>
<td>
<span ng-if="entity_1 != null">>>{{entity_1.name}}</span>
<span ng-if="entity_2 != null">>>{{entity_2.name}}</span>
</td>
</tr>
<tr>
<td>商品分类名称</td>
<td><input class="form-control"
ng-model="entity.name" placeholder="商品分类名称"> </td>
</tr>
<tr>
<td>类型模板</td>
<td>
<input select2 config="typeTemplateList"
ng-model="entity.typeId" select2-model="aa" placeholder="商品类型模板" class="form-control" type="text" />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true"
ng-click="save()">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
二、电商概念及表结构分析
2.1 电商概念SPU与SKU
SPU = Standard Product Unit （标准产品单位）
SPU是商品信息聚合的最小单位，是一组可复用、易检索的标准化信息的集合，该集合描述了一个产品的特性。
通俗点讲，属性值、特性相同的商品就可以称为一个SPU。
例如：
iphone7 就是一个SPU，与商家，与颜色、款式、套餐都无关。
SKU = stock keeping unit (库存量单位)
SKU即库存进出计量的单位， 可以是以件、盒、托盘等为单位。
SKU是物理上不可分割的最小存货单元。在使用时要根据不同业态，不同管理模式来处理。在服装、鞋类商品中使用最多最普遍。
例如：
纺织品中一个SKU通常表示：规格、颜色、款式。
2.2 表结构分析
Tb_goods 商品表
Tb_goods_desc 商品扩展信息表
Tb_item SKU表
三、商家后台-商品录入【基本功能】
3.1 需求分析
在商家后台实现商品录入功能。包括商品名称、副标题、价格、包装列表、售后服务
3.2 后端代码
3.2.1 实体类
找到工程youlexuan_pojo在com.zql.group包下，创建组合实体类 Goods
package com.zql.group;
import com.zql.pojo.TbGoods;
import com.zql.pojo.TbGoodsDesc;
import com.zql.pojo.TbItem;
import java.io.Serializable;
import java.util.List;
/**
* @Author:Daniel
* @Version 1.0
*/
public class Goods implements Serializable {
private TbGoods goods;//商品SPU
private TbGoodsDesc goodsDesc;//商品扩展
private List<TbItem> itemList;//商品SKU列表
public TbGoods getGoods() {
return goods;
}
public void setGoods(TbGoods goods) {
this.goods = goods;
}
public TbGoodsDesc getGoodsDesc() {
return goodsDesc;
}
public void setGoodsDesc(TbGoodsDesc goodsDesc) {
this.goodsDesc = goodsDesc;
}
public List<TbItem> getItemList() {
return itemList;
}
public void setItemList(List<TbItem> itemList) {
this.itemList = itemList;
}
}
3.2.2 数据访问层
由于我们需要在商品表添加数据后可以得到自增的ID,所以我们需要在TbGoodsMapper.xml中的insert配置中添加如下配置
/*添加自增的id*/
<selectKey keyProperty="id" keyColumn="id" resultType="java.lang.Long" order="AFTER">
select LAST_INSERT_id() as id
</selectKey>
3.2.3 服务接口层
修改youlexuan_sellergoods_interface 的 GoodsService接口 add方法 (已生成做修改)
3.2.4 服务实现层
修改youlexuan_sellergoods_service的 GoodsServiceImpl.java
@Autowired
private TbGoodsDescMapper goodsDescMapper;
/**
* 增加
*/
@Override
public void add(Goods goods) {
goods.getGoods().setAuditStatus("0");//设置未申请状态
goodsMapper.insert(goods.getGoods());
goods.getGoodsDesc().setGoodsId(goods.getGoods().getId());//设置goodsDesc的goodsId
goodsDescMapper.insert(goods.getGoodsDesc());//插入商品扩展数据
}
3.2.5 控制层
修改youlexuan_shop_web工程的 GoodsController 的add方法
String sellerId = SecurityContextHolder.getContext().getAuthentication().getName();//是否审核通过，通过才能添加
goods.getGoods().setSellerId(sellerId);
3.3 前端代码
3.3.1 控制层
修改goodsController.js ，在增加成功后弹出提示，并清空实体（因为编辑页面无列表）
//添加商品
$scope.entity = {goods:{},goodsDesc:{},itemList:[]};
$scope.add = function(){
goodsService.add($scope.entity).success(function (response) {
if (response.success){
alert("添加成功");
$scope.entity ={};
} else{
alert(response.message);
}
})
};
3.3.2 页面
修改goods_edit.html ，引入JS、定义控制器：
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"> </script>
<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/controller/baseController.js"> </script>
<script type="text/javascript" src="../js/controller/goodsController.js"> </script>
ng-app="youlexuan" ng-controller="goodsController"
表单部分代码：
保存按钮
四、商家后台-商品录入【商品介绍】
4.1 需求分析
实现商品介绍的录入，要求使用富文本编辑器
4.2 富文本编辑器介绍
富文本编辑器，Rich Text Editor, 简称 RTE, 它提供类似于 Microsoft Word 的编辑功能。常用的富文本
编辑器：
- KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
4.3 使用 kindeditor 完成商品介绍的录入
4.3.1 导入 kindeditor 编辑器所需js类库
<!-- 富文本编辑器 -->
<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>
注意:富文本编辑器引入要在angular类库之前引入。
4.3.2 初始化 kindeditor 编辑器
在页面中添加JS代码，用于初始化kindeditor
<script type="text/javascript">
var editor;
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowFileManager : true
});
});
</script>
allowFileManager 【是否允许浏览服务器已上传文件】 默认值是：false
注意：编辑器对象名称是editor，要不然会取不到值
4.3.3 提取 kindeditor 编辑器的内容
在goodsController.js中的add()方法中添加
$scope.entity.goodsDesc.introduction=editor.html();/*提取 kindeditor 编辑器的内容*/
4.3.4 清空 kindeditor 编辑器的内容
修改goodsController.js的add方法
editor.html('');//清空富文本编辑器
测试：http://127.0.0.1:9102/shoplogin.html 用户名：Daniel 密码：123
goods_edit.html 添加页面当前完整代码
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商品编辑</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- 富文本编辑器 -->
<link rel="stylesheet" href="../plugins/kindeditor/themes/default/default.css"/>
<script charset="utf-8" src="../plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="../plugins/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript">
var editor; //编辑器对象名称是editor，要不然会取不到值
KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
allowFileManager: true
});
});
</script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<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/controller/baseController.js"></script>
<script type="text/javascript" src="../js/controller/goodsController.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan" ng-controller="goodsController">
<!-- 正文区域 -->
<section class="content">
<div class="box-body">
<!--tab页-->
<div class="nav-tabs-custom">
<!--tab头-->
<ul class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">商品基本信息</a>
</li>
<li>
<a href="#pic_upload" data-toggle="tab">商品图片</a>
</li>
<li>
<a href="#customAttribute" data-toggle="tab">扩展属性</a>
</li>
<li>
<a href="#spec" data-toggle="tab">规格</a>
</li>
</ul>
<!--tab头/-->
<!--tab内容-->
<div class="tab-content">
<!--表单内容-->
<div class="tab-pane active" id="home">
<div class="row data-type">
<div class="col-md-2 title">商品分类</div>
<div class="col-md-10 data">
<table>
<tr>
<td>
<select class="form-control">
</select>
</td>
<td>
<select class="form-control select-sm"></select>
</td>
<td>
<select class="form-control select-sm"></select>
</td>
<td>
模板ID:19
</td>
</tr>
</table>
</div>
<div class="col-md-2 title">商品名称</div>
<div class="col-md-10 data">
<input type="text" class="form-control" ng-model="entity.goods.goodsName" placeholder="商品名称"
value="">
</div>
<div class="col-md-2 title">品牌</div>
<div class="col-md-10 data">
<select class="form-control"></select>
</div>
<div class="col-md-2 title">副标题</div>
<div class="col-md-10 data">
<input type="text" class="form-control" ng-model="entity.goods.caption" placeholder="副标题"
value="">
</div>
<div class="col-md-2 title">价格</div>
<div class="col-md-10 data">
<div class="input-group">
<span class="input-group-addon">¥</span>
<input type="text" class="form-control" ng-model="entity.goods.price" placeholder="价格"
value="">
</div>
</div>
<div class="col-md-2 title editer">商品介绍</div>
<div class="col-md-10 data editer">
<textarea name="content" ng-model="entity.goods.introduction"
style="width:800px;height:400px;visibility:hidden;"></textarea>
</div>
<div class="col-md-2 title rowHeight2x">包装列表</div>
<div class="col-md-10 data rowHeight2x">
<textarea rows="4" class="form-control" ng-model="entity.goodsDesc.packageList"
placeholder="包装列表"></textarea>
</div>
<div class="col-md-2 title rowHeight2x">售后服务</div>
<div class="col-md-10 data rowHeight2x">
<textarea rows="4" class="form-control" ng-model="entity.goodsDesc.saleService"
placeholder="售后服务"></textarea>
</div>
</div>
</div>
<!--图片上传-->
<div class="tab-pane" id="pic_upload">
<div class="row data-type">
<!-- 颜色图片 -->
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"
data-toggle="modal"><i class="fa fa-file-o"></i> 新建
</button>
</div>
<table class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="sorting">颜色</th>
<th class="sorting">图片</th>
<th class="sorting">操作</th>
</thead>
<tbody>
<tr>
<td>
</td>
<td>
<img alt="" src="" width="100px" height="100px">
</td>
<td>
<button type="button" class="btn btn-default" title="删除"><i
class="fa fa-trash-o"></i> 删除
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--扩展属性-->
<div class="tab-pane" id="customAttribute">
<div class="row data-type">
<div>
<div class="col-md-2 title">扩展属性1</div>
<div class="col-md-10 data">
<input class="form-control" placeholder="扩展属性1">
</div>
</div>
<div>
<div class="col-md-2 title">扩展属性2</div>
<div class="col-md-10 data">
<input class="form-control" placeholder="扩展属性2">
</div>
</div>
</div>
</div>
<!--规格-->
<div class="tab-pane" id="spec">
<div class="row data-type">
<div class="col-md-2 title">是否启用规格</div>
<div class="col-md-10 data">
<input type="checkbox">
</div>
</div>
<p>
<div>
<div class="row data-type">
<div>
<div class="col-md-2 title">屏幕尺寸</div>
<div class="col-md-10 data">
<span>
<input type="checkbox">4.0
</span>
<span>
<input type="checkbox">4.5
</span>
<span>
<input type="checkbox">5.0
</span>
</div>
</div>
<div>
<div class="col-md-2 title">网络制式</div>
<div class="col-md-10 data">
<span>
<input type="checkbox">2G
</span>
<span>
<input type="checkbox">3G
</span>
<span>
<input type="checkbox">4G
</span>
</div>
</div>
</div>
<div class="row data-type">
<table class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="sorting">屏幕尺寸</th>
<th class="sorting">网络制式</th>
<th class="sorting">价格</th>
<th class="sorting">库存</th>
<th class="sorting">是否启用</th>
<th class="sorting">是否默认</th>
</tr>
</thead>
<tbody>
<tr>
<td>
4.0
</td>
<td>
3G
</td>
<td>
<input class="form-control" placeholder="价格">
</td>
<td>
<input class="form-control" placeholder="库存数量">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>
4.0
</td>
<td>
4G
</td>
<td>
<input class="form-control" placeholder="价格">
</td>
<td>
<input class="form-control" placeholder="库存数量">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>
5.0
</td>
<td>
3G
</td>
<td>
<input class="form-control" placeholder="价格">
</td>
<td>
<input class="form-control" placeholder="库存数量">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</tr>
<tr>
<td>
5.0
</td>
<td>
4G
</td>
<td>
<input class="form-control" placeholder="价格">
</td>
<td>
<input class="form-control" placeholder="库存数量">
</td>
<td>
<input type="checkbox">
</td>
<td>
<input type="checkbox">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--tab内容/-->
<!--表单内容/-->
</div>
</div>
<div class="btn-toolbar list-toolbar">
<button class="btn btn-primary" ng-click="add()"><i class="fa fa-save"></i>保存</button>
<button class="btn btn-default">返回列表</button>
</div>
</section>
<!-- 上传窗口 -->
<div class="modal fade" id="uploadModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">上传商品图片</h3>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped">
<tr>
<td>颜色</td>
<td><input class="form-control" placeholder="颜色"></td>
</tr>
<tr>
<td>商品图片</td>
<td>
<table>
<tr>
<td>
<input type="file" id="file"/>
<button class="btn btn-primary" type="button">
上传
</button>
</td>
<td>
<img src="" width="200px" height="200px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
扫一扫
3128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
