黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 3 章规格及模板管理六 [打印本页]

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

【郑州校区】品优购电商系统开发第 3 章规格及模板管理六

5.模板管理
5.1 需求及表结构分析
5.1.1 需求分析
首选我们需要理解模板的作用。模板主要有两个：
1 是用于关联品牌与规格
2 定义扩充属性
5.1.2 表结构分析
tb_type_template 模板表

5.2 模板列表
5.2.1 引入 JS
修改 type_template.html ，引入 JS

[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/typeTemplateService.js"> </script>

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

<script

type="text/javascript"

src="../js/controller/typeTemplateController.js">

</script>

5.2.2 放置分页组件

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

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

5.2.3 指令与表达式

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

 <body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou"

ng-controller="typeTemplateControlle

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

<tr ng-repeat="entity in list">

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

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

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

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

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

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

<td class="text-center">

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

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

</td>

</tr>

5.3 品牌下拉列表
在弹出窗口中有个品牌下拉列表，要求品牌是可以选择多个，这与我们之前的单选的下拉列表是不同的。我们要想实现这个功能，需要使用 select2 组件来完成。

5.2.1 认识 select2
我们来看例子：我们需要的就是这样可以多选的下拉框

5.2.2 显示品牌下拉列表（静态）
（1）修改 type_template.html 引入 JS

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

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

（2）修改 typeTemplateController.js ，定义品牌列表数据

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

$scope.brandList={data:[{id:1,text:'联想'},{id:2,text:'华为'},{id:3,text:'小米'}]};//

品牌列表

（3）在 type_template.html 用 select2 组件实现多选下拉框

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

 <input select2 select2-model="entity.brandIds"

config="brandList" multiple

placeholder="选择品牌（可多选）" class="form-control" type="text"/>

multiple 表示可多选
Config 用于配置数据来源
select2-model 用于指定用户选择后提交的变量
最终实现效果如下：

5.2.3 后端数据支撑
我们现在让这个下拉列表的数据从数据库中提取，修改后端代码
（1）pinyougou-dao 工程，在 TbBrandMapper.xml 中添加 SQL 语句配置

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

 <select id="selectOptionList" resultType="java.util.Map" >

select id,name as text from tb_brand

</select>

（2）在 pinyougou-dao 的 TbBrandMapper 中添加方法定义

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

 List<Map> selectOptionList();

（3）修改 pinyougou-sellergoods-interface 的 BrandService.java，增加方法定义

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

/**

* 品牌下拉框数据

*/

List<Map> selectOptionList();

（4）修改 pinyougou-sellergoods-service 的 BrandServiceImpl.java，增加方法

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

 /**

* 列表数据

*/

public List<Map> selectOptionList() {

return brandMapper.selectOptionList();

}

（5）修改 pinyougou-manager-web 的 BrandController.java

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

 @RequestMapping("/selectOptionList")

public List<Map> selectOptionList(){

return brandService.selectOptionList();

}

（6）修改 pinyougou-manager-web 的 brandService.js

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

 //下拉列表数据

this.selectOptionList=function(){

return $http.get('../brand/selectOptionList.do');

}

（7）修改 pinyougou-manager-web 的 typeTemplateController.js
因为我们在模板控制层中需要使用品牌服务层的方法，所以需要添加依赖注入

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

 //控制层

app.controller('typeTemplateController' ,function($scope,$controller ,typeTemplate

Service ,brandService){

使用品牌服务方法实现查询，结果赋给变量

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

$scope.brandList={data:[]};//品牌列表

//读取品牌列表

$scope.findBrandList=function(){

brandService.selectOptionList().success(

function(response){

$scope.brandList={data:response};

}

);

}

（8）修改 type_template.html ，添加 JS 引入

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

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

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

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

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

<script type="text/javascript"

src="../js/controller/typeTemplateController.js">

 </script>

特别注意一下，JS 引入的位置，要在 typeTemplateController.js 之前，因为该控制器要使用到它
（9）修改 type_template.html ，添加初始化

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

<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou"

ng-controller="typeTemplateController" ng-init="findBrandList()">

5.4 规格下拉列表

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

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