16分布式电商项目 - 模板管理功能（一）

1.需求及表结构分析

1.需求分析 首选我们需要理解模板的作用。模板主要有两个：

1.是用于关联品牌与规格 2.定义扩充属性

2.表结构分析 tb_type_template 模板表

字段类型长度含义idBigInt主键nameVarchar80模板名称Spec_idsVarchar1000关联规格（json 格式）brand_idsVarchar1000关联品牌（json 格式custom_attribute_itemsVarchar2000扩展属性 2.模板列表

1.引入JS

修改 type_template.html ，引入 JS

2.放置分页组件

3.指令与表达式

 
	 
	{{entity.id}}
	{{entity.name}}
	{{entity.brandIds}}
	{{entity.specIds}}
	{{entity.customAttributeItems}} 
	 
		修改 
	

4.优化模板列表的显示 我们现在完成的列表中都是以 JSON 格式显示的，不利于用户的查询。 我们需要将信息以更友好的方式展现出来,如下图形式 我们需要将一个 json 字符串中某个属性的值提取出来，用逗号拼接成一个新的字符串。这样的功能比较常用，所以我们将方法写到 baseController.js

//提取 json 字符串数据中某个属性，返回拼接字符串 逗号分隔
$scope.jsonToString=function(jsonString,key){
	var json=JSON.parse(jsonString);//将 json 字符串转换为 json 对象
	var value="";
	for(var i=0;i0){
		value+=","
	}
		value+=json[i][key];
	}
	return value;
}

页面上使用该函数进行转换

	
	{{entity.id}}
	{{entity.name}}
	{{jsonToString(entity.brandIds,'text')}}
	{{jsonToString(entity.specIds,'text')}}
	{{jsonToString(entity.customAttributeItems,'text')}} 
	 
		修改 
	

3.品牌下拉列表

在弹出窗口中有个品牌下拉列表，要求品牌是可以选择多个，这与我们之前的单选的下拉列表是不同的。我们要想实现这个功能，需要使用 select2 组件来完成。 1.认识select2 我们来看例子：我们需要的就是这样可以多选的下拉框 2.显示品牌下拉列表（静态）

（1）修改 type_template.html 引入 JS

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

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

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

multiple 表示可多选 Config 用于配置数据来源 select2-model 用于指定用户选择后提交的变量

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

 select id,name as text from tb_brand
 

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

 List selectOptionList();

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

/**
* 品牌下拉框数据
*/
List selectOptionList();

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

/**
* 列表数据
*/
public List selectOptionList() {
return brandMapper.selectOptionList();
}

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

@RequestMapping("/selectOptionList")
public List selectOptionList(){
	return brandService.selectOptionList();
}

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

//下拉列表数据
this.selectOptionList=function(){
return $http.get('../brand/selectOptionList.do');
}

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

//控制层
app.controller('typeTemplateController' ,function($scope,$controller ,typeTemplate
Service ,brandService){

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

$scope.brandList={data:[]};//品牌列表
//读取品牌列表
$scope.findBrandList=function(){
	brandService.selectOptionList().success(
	function(response){
		$scope.brandList={data:response};
	}
);
}

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

特别注意一下，JS 引入的位置，要在typeTemplateController.js 之前，因为该控制器要使用到它

4.规格下拉列表

（代码略，参照品牌下拉列表的实现步骤 ）