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

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、查看layUI使用方式

①引入对应的js文件

②查看文件上传使用方式

1.2、项目中使用文件上传

①将资源文件拷贝到项目中

②引入layui的js文件

③修改文件上传的type类型

④对文件上传绑定切换事件

⑤创建upload方法

先抓包结果如下

⑥修改模板增加img显示上传结果

⑦修改js处理文件上传成功

⑧修改商品添加的HTML

⑨修改js

⑩修改添加的前置钩子函数删除文件上传代码

由于目前文件上传使用了异步的方式因此此处的代码多余

1.3、使用ajaxReturn返回结果

①查看ajaxReturn方法的使用方式

②修改upload方法使用ajaxReturn

商品列表

2.1、实现显示商品的列表

①在控制器中增加方法

②在模型中增加listData方法获取数据

③拷贝模板

④修改模板

2.2、实现分页显示商品列表

①修改listData方法

②修改模板

修改循环的变量

修改使用分页

2.3、获取分类名称

修改listData方法链表查询分类名称

2.4、商品搜索

2.4.1、显示搜索的分类

①index方法获取所有的分类信息

②修改模板显示分类

2.4.2、根据搜索的提交获取数据

根据条件对商品进行搜索本质就是表单提交。对于表单提交想要去获取到对应的条件的商品信息就需要去组装sql语句中的where条件

修改listData方法

2.5、对商品列表进行优化

2.5.1、实现方式

使用替换的方式将链表查询拆分成为两次sql查询（第一次查询后期可以使用高速内存缓存系统加速）

1. 先获取所有分类的信息
2. 根据页码获取到当前页的商品信息(单表查询)
3. 对商品信息进行循环根据分类的id使用第一次查询结果进行替换

2.5.2、具体代码操作

①修改index方法传递分类信息作为参数

②修改模型下的listData方法

2.6、缓存使用(重点)

2.6.1、缓存使用的原理

1. 当读取数据时。优先查询缓存系统(文件、内存)中的内容，如果读取到了数据直接使用。如果没有读取到在查询数据库获取数据，然后在将数据写入到缓存系统中
2. 当修改数据时，需要对缓存系统中的内容进行更新或者删除操作

2.6.2、TP中的S函数使用

2.6.3、在项目中使用S函数

①修改listData方法使用缓存

②查看效果

2.6.4、针对所有的分类的使用缓存

①修改getTree方法

②修改listData方法

③针对分类的添加对缓存进行更新

④分类到的修改更新缓存

⑤删除分类更新缓存

2.7、实现状态的点击切换

①修改商品列表的模板

②增加函数实现ajax

③创建方法处理请求

④修改模板中代码实现图片的切换

商品删除

①增加删除的连接地址

②增加方法进行删除

③修改模板

④修改Goods模型下的where条件

去掉了上下架的条件

⑤再次修改模板

商品回收站

4.1、商品回收站列表显示

①创建方法

②修改模型获取数据方法

③拷贝模板并且修改

在index模板基础上修改操作即可

4.2、商品的还原功能

①修改回收站商品列表

②修改dels方法

4.3、彻底删除

①修改模板对彻底删除增加连接地址

②添加方法实现删除

③实现模型下的删除方法

商品编辑

5.1、显示原始商品信息

①创建方法获取原始数据

②拷贝添加模板并且修改

5.2、实现修改入库

①修改编辑的方法处理表单提交

②增加方法实现修改

商品类型

6.1、商品类型介绍

商品归属于某一个分类。通过分类可以方便用户在前台界面中对商品进行筛选。当描述商品信息时，需要将商品的具体信息表述出。例如手机又cpu、内存、存储大小，衣服有颜色，尺码。对于要描述的内容可以称为属性。

为了描述出属性信息，可以在商品表中使用字段记录对应的信息。如果使用此方式会导致数据表特别庞大并且有很多字段时无用的。

因此可以将属性信息保存到一格单独的数据表中(每一条记录就是一个属性)。如果只有商品表跟属性表还不能完整的描述出商品信息

因此可以对属性做一个归类。归类及抽象一个类型出来。一个商品属于某一个类型就可以使用类型下对应的属性对商品进行描述

注意：类型只是在后台中使用，目的是为了方便管理属性

6.2、创建类型数据表

CREATE TABLE `shop_type` (

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

`type_name` varchar(255) NOT NULL DEFAULT ” COMMENT ‘类型名称’,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

6.3、类型的添加与修改

①控制中实现根据添加与修改时显示模板

②模板中展示出数据

③创建自定义模型

④实现数据的入库