黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 3 章规格及模板管理 四 [打印本页]
作者: 我是楠楠    时间: 2020-5-13 10:14
标题: 【郑州校区】品优购电商系统开发第 3 章规格及模板管理 四
【郑州校区】品优购电商系统开发第 3 章规格及模板管理 四

4.规格管理
4.1 需求及表结构分析
4.1.1 需求
实现规格管理功能


4.2 规格列表
4.2.1 引入 JS
修改 pinyougou-manager-web 工程的 specification.html
[AppleScript] 纯文本查看 复制代码
 <script type="text/javascript" src="../plugins/angularjs/angular.min.js"> </script>

<script src="../plugins/angularjs/pagination.js"></script>

<link rel="stylesheet" href="../plugins/angularjs/pagination.css">

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

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

</script>

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

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

</script>


4.2.2 放置分页组件

[AppleScript] 纯文本查看 复制代码
<!-- 分页 -->

<tm-pagination conf="paginationConf"></tm-pagination>

4.2.3 指令与表达式
在 body 元素指定模块名和控制器名
[AppleScript] 纯文本查看 复制代码
 <body class="hold-transition skin-red sidebar-mini"

ng-app="pinyougou" ng-controller="specificationController" >


循环表格行
[AppleScript] 纯文本查看 复制代码
 <tr ng-repeat="entity in list">

 <td><input type="checkbox" ></td>

<td>{{entity.id}}</td>

<td>{{entity.specName}}</td>

<td class="text-center">

<button type="button" class="btn bg-olive btn-xs" data-toggle="modal"

data-target="#editModal">修改</button>

</td>

</tr>


4.3 新增规格
4.3.1 新增行的实现
修改 specificationController.js 新增以下代码

[AppleScript] 纯文本查看 复制代码
//新增选项行

$scope.addTableRow=function(){

$scope.entity.specificationOptionList.push({});

}

specification.html “新建选项”按钮

[AppleScript] 纯文本查看 复制代码
<button type="button" class="btn btn-default" title="新建"

ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新建</button>

循环列表行，绑定表格内的编辑框

[AppleScript] 纯文本查看 复制代码
<tr ng-repeat="pojo in entity.specificationOptionList">

<td><input type="checkbox"></td>

<td>

<input ng-model="pojo.optionName" class="form-control" placeholder="规格选项">

</td>

<td>

<input ng-model="pojo.orders" class="form-control" placeholder="排序">

</td>

</tr>

注意：要修改 specification.html “新建”按钮，弹出窗口时对 entity 进行初始化，否则向集合添加数据时会报错！

[AppleScript] 纯文本查看 复制代码
<button type="button" class="btn btn-default" title=" 新 建 " data-toggle="modal"

data-target="#editModal"

ng-click="entity={'specificationOptionList':[]}"><i

class="fa fa-file-o"></i> 新建</button>

4.3.2 删除行的实现
实现思路：在每一行将索引值传递给集合，在集合中删除。
修改 specificationController.js 新增以下代码

[AppleScript] 纯文本查看 复制代码
//批量选项删除

$scope.deleTableRow=function(index){

$scope.entity.specificationOptionList.splice(index,1);//删除

}

修改每行的删除按钮
[AppleScript] 纯文本查看 复制代码
 <button type="button" class="btn btn-default" title="删除"

ng-click="deleTablenRow($index)"><i class="fa fa-file-o"></i> 删除</button>

$index 用于获取 ng-repeat 指令循环中的索引。
4.3.3 提交保存
实现思路：我们将规格和规格选项数据合并成一个对象来传递，这时我们需要用一个对象将这两个对象组合起来。在业务逻辑中，得到组合对象中的规格和规格选项列表，插入规格返回规格 ID，然后循环插入规格选项。
（1）我们要增加规格选项，必须要知道新增规格的 ID, 所以我们在修改 pinyougou-dao 的TbSpecificationMapper.xml ，在 insert 节点后添加如下配置

[AppleScript] 纯文本查看 复制代码
 <insert id="insert" parameterType="com.pinyougou.pojo.TbSpecification" >

<selectKey resultType="java.lang.Long" order="AFTER" keyProperty="id">

SELECT LAST_INSERT_ID() AS id

</selectKey>

insert into tb_specification (id, spec_name)

values (#{id,jdbcType=BIGINT}, #{specName,jdbcType=VARCHAR})

</insert>

（2）在 pinyougou-pojo 建立 com.pinyougou.pojogroup 包，包下建立 Specification 类

[AppleScript] 纯文本查看 复制代码
package com.pinyougou.pojogroup;

import java.io.Serializable;

import java.util.List;

import com.pinyougou.pojo.TbSpecification;

import com.pinyougou.pojo.TbSpecificationOption;

/**

* 规格组合实体类

* @author Administrator

*

*/

public class Specification implements Serializable {

private TbSpecification specification;

private List<TbSpecificationOption> specificationOptionList;

public TbSpecification getSpecification() {

return specification;

}

public void setSpecification(TbSpecification specification) {

this.specification = specification;

}

public List<TbSpecificationOption> getSpecificationOptionList() {

return specificationOptionList;

}

public void setSpecificationOptionList(List<TbSpecificationOption>

specificationOptionList) {

this.specificationOptionList = specificationOptionList;

}

}

（3）修改 pinyougou-sellergoods-interface 的 SpecificationService.java
[AppleScript] 纯文本查看 复制代码
 /**

* 增加

*/

public void add(Specification specification);


（4）修改 pinyougou-sellergoods-service 的 SpecificationServiceImpl.java

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

* 增加

*/

@Override

public void add(Specification specification) {

specificationMapper.insert(specification.getSpecification());//插入规格

//循环插入规格选项

for(TbSpecificationOption

specificationOption:specification.getSpecificationOptionList()){

specificationOption.setSpecId(specification.getSpecification().getId());//设置规

格 ID

specificationOptionMapper.insert(specificationOption);

}

}

（5）修改 pinyougou-manager-web 的 SpecificationController.java
[AppleScript] 纯文本查看 复制代码
 /**

* 增加

* @param specification

* @return

*/

@RequestMapping("/add")

public Result add(@RequestBody Specification specification){

try {

specificationService.add(specification);

return new Result(true, "增加成功");

} catch (Exception e) {

e.printStackTrace();

return new Result(false, "增加失败");

}

}


（6）修改页面 specification.html绑定规格名称

[AppleScript] 纯文本查看 复制代码
<table class="table table-bordered table-striped" width="800px">

<tr>

<td>规格名称</td>

<td>

<input ng-model="entity.specification.specName"

class="form-control" placeholder="规格名称" >

</td>

</tr>

</table>

绑定保存按钮事件

[AppleScript] 纯文本查看 复制代码
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true"

ng-click="save()">保存</button>








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