不同的商品类型其属性也是不一样的。

1. 在admin-view-type-index.html修改链接地址

1. 在admin-typeController-getAttr方法中，取出当前分类所有的属性展示在模板中

1. 模板中遍历数据

二、去除编辑属性时属性值的多个空格

修改admin/view/attribute/upd.html模板

效果：

三、完成商品的添加

商品的认识

商品=产品+商品属性，即同一个产品，但是商品属性不同，就不是同一个商品，且价格也不同。

如：iphone6s黑色 和iphone6s银色

商品添加所需的数据表

当在后台添加一个商品的时候，商品相关数据需要入库到以下两个表：

商品表sh_goods和商品属性表sh_goods_attr

商品的基本信息数据存储在sh_goods表中，商品属性数据存储在sh_goods_attr中

商品表sh_goods表结构：

注：给我们的商品表添加一个goods_middle字段，存储图片的生成的中图的路径

商品属性表sh_goods_attr表结构：

完成商品基本信息的入库

基本信息：商品名称、商品价格、库存、详情、是否热卖…..

展示添加商品模板

1. 在admin-GoodsController-add方法中，输出添加商品的模板

1. 把后台的添加商品的模板复制到admin/view/goods/目录下面，并且修改静态资源路径

模板是四个选项卡构成：

先修改第一个和第四选项卡的name名称：

第一个选项卡：

效果：

第四个选项卡内容：

基本信息入库操作

1. 定义添加商品的验证器Goods

1. 在admin-GoodsController-add 方法中完成商品的入库操作

1. 使用ueditor 完成商品的详情

引入三个核心js文件：

设置textarea的id,初始化编辑器：

添加商品的多图片上传

建议原图上传800*800 ，生成两种缩略图

中图缩略图：350*350 比例为2

小图：50*50 生成缩略图的类型为2位等比例补白

1. 上传文件的form两个要求：post提交 和enctype = multipart/form-data

1. 设置文件上传的name属性，因为是多图上传，所以呢name后需要加[]。

（1）思路分析

实现思路：可以参考ecshop开源商城：

①构建布局：

每个文件上传域名其实可以看做是一个li标签，其中包含a标签和input上传文件域

如下结构：

<li> <a href=’javascript:;’ >[+]</a><input type=’file’/> </li>

<li> <a href=’javascript:;’ >[-]</a><input type=’file’/> </li>

②怎么实现图片前的[+][-]加减功能？

思路：

1. 给li中的a标签绑定单击事件，获取当前单击元素的内容
2. 判断内容，含两种情况[+]、[-]

若是[+]: 则获取当前元素的父元素（即li），克隆一份，在把内部的a标签的[+]变成[-]。

若是[-]: 则获取当前元素的父元素（即li），并移除。

多图片上传加减特效

1、修改第三个选项卡的内容，设置标签。以及绑定单击事件

1. 实现上面的单击事件克隆图片

通过看思路实现代码：

思路：

a、给li中的a标签绑定单击事件，获取当前单击元素的内容

b、判断内容，含两种情况[+]、[-]

若是[+]: 则获取当前元素的父元素（即li），克隆一份，在把内部的a标签的[+]变成[-]。

若是[-]: 则获取当前元素的父元素（即li），并移除。

效果：

实现多图片的上传

1. 在Goods模型中定义一个方法，判断进行图片的原图上传，并返回上传成功的文件路径

1. add方法中进行调用上面的方法，把图片的路径转化为json格式存储到表对应字段中

（4）生成多图片的缩略图

生成缩略图的步骤：

• Image打开源图片 $image = \Think\Image::open(源图片);
• 进行缩放处理 $image -> thumb(宽度，高度，类型)
• 把缩放好的图片保存到服务器上 $image -> save(小图路径名);

1. 在goods模型中定义处理原图缩放的方法

1. add方法中若原图上传成功，则调用上面的方法进行缩略图处理

最终生成的各图片名：

三、[难点-重点]完成商品的属性添加

1、分析商品动态属性的生成

添加一个商品，其商品属性可能有多个。

即商品表sh_goods的一条记录对应商品属性表sh_goods_attr的多条记录，属于一对多关系。

问题：怎么给商品设置商品属性？

这里可以参考ecshop的方案，当添加商品的,必须先选择一个商品类型，在通过ajax动态获取商品类型的属性，再给商品设置这些属性值。

如在ecshop后台添加商品的时候，选择手机类型，动态生成的属性框如下：

从上面添加商品属性可以看出，动态生成商品属性的时候，共有4种组合情况。

其实就是属性类型和属性值录入方式的互相组合：

①唯一属性+手工输入

②唯一属性+列表选择

③单选属性+手工输入

④单选属性+列表选择

其实可以把上面每个动态生成的属性信息看作是被包含在一个li标签中。

分析四种组合情况生成动态属性的特点如下：元素从左到右分析：

• 单选属性属性名称前有个[+]或[-]号，可以进行加减，而唯一属性则没有
• 属性名称
• 属性值录入方式为手工输入，则对应属性值的输入方式的是一个输入框(<input type=’text’/>)，而属性值录入方式为列表选择的时候则对应属性值的输入方式的是一个select下拉框。
• 单选属性可以输入价格，而唯一属性则没有

完成商品的动态属性生成

1. 在商品添加的add方法中取出所有的商品类型

1. 模板中遍历数据在第二个选项卡

3、设置一个存储动态生成属性的容器

1. 绑定onchange事件给select框

1. 在admin-GoodsController-ajaxGetTypeAttr方法，获取对应类型的属性，并以json格式输出

1. 根据ajax返回的属性数据，动态构建属性框

注：上面代码173行有错误：把判断attr_input_type改为attr_type

效果：

1. 完成单选属性的[+]功能

说明，逻辑和之前相册的是完全一致

效果：

完成商品动态属性的入库

分析：

在表单中把单选属性值和单选属性价格通过属性attr_id归为同一组，方便后续获取对应属性的值和价格。

单选属性值： name=goodsAttrValue[attr_id][]

单选属性值价格： name=goodsAttrValue[attr_id][]

因为单选属性用户可以点击[+]号会生成多个，所以多个单选属性值和价格name的值后面都必须加上中括号[]。

由于唯一属性只能选择一个值，所以name后不需要加[]

我们最终需要构造类似于下面的数组，存储商品属性值和商品属性价格：

在动态生成的属性框元素中设置name属性：

在admin-GoodsController-add方法中打印提交过来的$postData数据如下：

由于商品属性表（sh_goods_attr）数据需要得到入库成功的商品主键goods_id,所以我们可以在商品模型Goods的入库后钩子after_insert中完成完成商品属性表数据的入库。

商品列表展示

1. 在admin-GoodsController-index方法中取出商品数据进行分配到模板

1. 模板中遍历数据

使用ajax+layer弹出层查看商品详情

1. 给admin-view-goods-index.html模板内容设置查看商品详情的标签属性

1. 给上面的class=showContent绑定单击事件，发送ajax请求

同时引入layer弹出层插件的核心js文件layer.js:

3、在admin-GoodsController-ajaxGetContent获取商品的数据，返回json数据

效果：

作业：使用ajax修改商品的是否热卖等状态，类似于ecshop如下：

1.1、类型的列表显示

①增加方法

②修改模型增加listData方法

③处理模板

效果如下

1.2、类型的删除

①创建方法

②定义模型的dels方法实现删除

1.3、批量删除功能

①修改模板

效果如下

②实现全选

③实现反选

④点击删除触发ajax

⑤修改dels方法

⑥修改模型中的dels方法

⑦修改前台的js

属性管理

2.1、属性了解

属性作用是用于描述商品信息

2.1.1、单选属性

2.1.2、唯一属性

2.2、属性的录入方式

属性录入方式可以划分为两种。一种手工输入另外一种就是列表选择

关于属性的录入方式就是当描述商品时对应的内容，是使用选择框(列表选择)还是文本框(手工输入)

对于属性内容是属于固定的某几个可以使用列表选择

对于属性的内容是不固定可以使用手工输入

2.3、实现属性入库功能

2.3.1、创建属性的数据表

CREATE TABLE `shop_attribute` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT,

`attr_name` varchar(255) NOT NULL DEFAULT ” COMMENT ‘属性名称’,

`type_id` int(11) NOT NULL DEFAULT ‘0’ COMMENT ‘属性的所属类型 对应shop_type表中的id字段’,

`attr_type` tinyint(4) NOT NULL DEFAULT ‘1’ COMMENT ‘属性本身的类型 1唯一属性 2、单选属性’,

`attr_input_type` tinyint(4) NOT NULL DEFAULT ‘1’ COMMENT ‘属性的录入方式 1手工输入 2列表选择’,

`attr_values` varchar(255) NOT NULL DEFAULT ” COMMENT ‘属性的默认值 多个值使用逗号隔开’,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2.3.2、显示属性的添加表单

①创建控制器方法显示模板

②创建模板

③修改默认值增加id属性

④使用js实现禁用与取消

2.3.3、实现添加的入库

①修改add方法

②创建模型编写自动验证

2.4、属性列表显示功能

①创建方法获取数据显示模板

②创建listData方法

③处理模板显示

效果如下

2.5、属性的删除

①修改模板中的连接地址

②创建方法实现删除

③在模型下实现删除

2.6、属性编辑

2.6.1、显示原始数据

①创建方法获取原始数据

②处理模板

效果如下

2.6.2、实现入库修改

商品的属性关联

3.1、添加商品时显示类型

①增加商品属性选项卡

②增加商品属性选项卡对应的table

③修改商品添加获取类型

④修改模板循环显示类型

⑤修改商品表结构

⑥修改模型中自定义字段

效果如下

3.2、实现类型切换属性变化

①给select增加id属性

②绑定切换事件

③创建方法

④创建视图

3.3、实现单选属性的增加功能

由于单选属性是用于控制商品购买的。会提供多个值由用户进行选择。因此在数据录入时对于有单选属性的需要设置为可以提交多个内容

①修改模板

②编写js代码

效果如下

3.4、商品添加属性值入库功能

3.4.1、创建商品属性表

CREATE TABLE `shop_goods_attr` (

`id` int(10) unsigned NOT NULL AUTO_INCREMENT,

`goods_id` int(11) NOT NULL DEFAULT ‘0’ COMMENT ‘商品ID’,

`attr_id` int(11) NOT NULL DEFAULT ‘0’ COMMENT ‘属性ID 对应attribute表中的id字段’,

`attr_value` varchar(255) NOT NULL DEFAULT ” COMMENT ‘属性值’,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

3.4.2、实现可以提交属性ID及值

考虑有多个属性值需要提交因此需要使用数组格式

①修改模板设置数组格式的name

②修改添加的提交方法查看结果

③再次修改name值格式

④再次查看结果

⑤再次修改name格式

⑥查看结果

3.4.3、实现入库

①查看添加后置钩子函数传输的结果

②添加后置钩子函数处理属性

结果查看数据表即可

3.5、商品修改属性入库修改

3.5.1、实现显示已有的属性信息

①修改编辑的方法获取已有的属性信息

②查看结果

③继续修改编辑方法获取已有的类型信息

④继续格式化所获取到的属性信息

④继续格式化数据

格式化效果如下

②模板显示数据

最终效果如下

3.5.2、实现属性的入库修改

总结商品属性之间的关系