一、完成文章的添加

完成文章模板的展示

第一步：修改left.html模板，加一个添加分类的链接地址

第二步：在后台admin创建一个Article控制器，并建立一个add方法，完成文章的入库操作

模板分配数据：

使用富文本编辑器完成文章的内容添加

第一步：把课件中的相应的ueditor复制到网站根目录下面的插件目录plugin中

第二步：引入核心js文件，并且给textarea 设置一个id=content

效果如下：

完成文章数据的入库

第一步：设置表单name值

第二步：在add方法中，完成数据的入库

使用验证器完成添加文章的验证

在后台的admin的validate目录建立一个Article 的验证器

添加文章的时候，调用验证器的对应场景进行验证：

完成文章的图片上传

表单上传文件的要求：1、post提交 2、设置form的enctype=’multipart/form-data’

设置上传文件的input标签

控制器add方法处理上传文件的路径入库：

数据库存储的路径形式如下：

6、完成文章图片缩略图生成

在有文件上传成功的前提下，处理缩略图生成：

注：函数thumb(width，height,缩放比例) ，缩放比例默认为1为等比例缩放，为2则是填充补白。

存储如下：

数据库存储的路径：

实现上传图片的实时预览

引入核心js文件：

在add.html模板文件设置预览的区域：

效果：

完成文章的列表展示

数据展示

第一步：在后台admin的Article控制器中建立一个index方法，完成文章列表展示

模板中index.php,循环输出

数据分页

把模型的select方法改为paginate(每页显示条数)即可

模板中输出分页页码：

效果：

完成文章编辑

第一步：给编辑设置链接地址，携带文章的参数id

第二步：建立一个upd方法完成数据回显到模板中

第三步：模板中回显数据

效果：

第四步：在upd方法中判断是否是post请求，完成数据的编辑入库

可以设置Article模型自动维护时间戳：

完成文章删除

第一步：给删除的链接地址设置链接，并且设置参数

第二步：添加del方法完成删除

五、XSS攻击

xss介绍

如在输入框输入js代码：

<script>

var cookie = document.cookie

//发送一个jsonp请求

</script>

访问此标题的时候就会弹出1，从而达成攻击；

防止xss攻击（防止js攻击）

使用htmlspecialchars函数防止

注： 百度富文本编辑器ueditor自动将危险的代码如js进行转化为实体符号。

htmlspecialchars函数的作用：将html标签符号转化为实体符号。

如：大于号“>”会被转化为 “&gt;”

如：大于号“<”会被转化为 “&lt;”

可以在配置文件config,添加全局的过滤函数：

此种缺点：会把html和js代码的特殊符号都进行转移，不满足我们的要求。我们只需要转移js代码。如下所示：

解决办法：

1. 不使用函数htmlspecialchars()进行处理，但可能会出现xss攻击。
2. 使用htmlspecialchars()函数处理，页面的数据（富文本html）又不能正常显示出来，可以借助htmlspecialchars_decode()反转，把html实体符号转化为html标签，但这又可能会造成xss攻击。

我们的希望是HTML可以正常显示，但是又不希望js代码被执行。

这时可以借助第三方防止xss攻击的插件如：HTMLPurifier，此插件会把浏览器提交过来的数据有选择性的过滤。只过滤危险的js代码，保留html代码，这就刚好满足我们的需求。

使用插件HTMLPurifier防止

复制防止xss攻击的库到项目extend目录中。

把HTMLPurifier中的example.php文件中函数定义在common.php中，并且修改路径

需要把函数名为removeXSS设置为tp的全局的默认过滤函数

使用之后，只会把js代码进行过滤，保留html代码：

显示就不会造成攻击，html正常显示：

扩展-验证插件jquery-validate的使用

前端验证目的：减轻服务器压力，提高用户体验。

后端验证：主要保证数据的安全（不要信任浏览器携带过来的任何数据）

具体使用：https://www.jianshu.com/p/e1d5f0dc2f5d

手册：

模型的事件（钩子）

所谓的事件就类似于svn中的钩子一样，做一件事情都有前事件和后事情发生。

给表tp_category添加一个zhujian字段，目的是记录当前记录的主键值。

让zhujian字段和cat_id的值保持一致，我们一把入库成功后要更新:

常规做法如下：

但是不建议上面写，我们希望只把业务逻辑写在控制器，我们把数据有关的操作写在模型的事件中。

模型中注册事件：

我们可以在模型中注册after_insert事件，即入库成功之后，把zhujian的字段和cat_id的保持一致。

效果：

触发事件的流程：入库前事件—>save()—->入库后的事件，

如果在入库前事件前返回false,则事件不会继续执行。

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

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：定义模型

/**

* 关联直播流模型（1:1）

* 语法：模型名::with（’role’）->first()

* @return \Illuminate\Database\Eloquent\Relations\HasOne

*/

public function stream()

{

#return $this->hasOne(关联模型名，关联模型公共字段，本模型公共字段)

return $this->hasOne(‘App\Http\Model\Stream’,’id’, ‘stream_id’);

}

步骤2：修改控制器

步骤3：修改视图

日期插件

配置手册：http://www.my97.net/demo/index.htm

图片上传【★★★】

webuploader插件介绍

说明：就是由百度团队开发的一个上传插件

地址：http://fex.baidu.com/webuploader/

使用

• 语法：

检查是否存在指定键：$request->hasFile(‘file’)

检查是否上传成功： $request->file(‘file’)->isValid()

存储文件： $request->file(‘file’)->store(‘子路径’，存储驱动器的名称);

• 实现步骤：

步骤1：将官方下载的文件移动到public目录下的webuploader文件夹中

步骤2：（视图代码）打开手册引入静态资源并复制初始化代码

<div class=”row cl”>

<label class=”form-label col-xs-4 col-sm-3″>封面</label>

<div class=”formControls col-xs-8 col-sm-9″>

<!–dom结构部分–>

<div id=”uploader-demo”>

<!–用来存放item–>

<div id=”fileList” class=”uploader-list”></div>

<div id=”filePicker”>选择图片</div>

</div>

<div id=”showimg”>

</div>

<div id=”uploading” style=”width:0%;height:20px;background: blue;”></div>

<input required type=”text” class=”input-text” value=”” placeholder=”” id=”img” name=”img”>

</div>

</div>

<!–引入CSS–>

<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘webuploader’) }}/webuploader.css”>

<!–引入JS–>

<script type=”text/javascript” src=”{{ asset(‘webuploader’) }}/webuploader.js”></script>

<script type=”text/javascript”>

// 初始化Web Uploader

var uploader = WebUploader.create({

// 设置自定义请求数据

formData: {

_token: ‘{{ csrf_token() }}’

},

// 选完文件后，是否自动上传。

auto: true,

// swf文件路径

swf: ‘{{ asset(“webuploader”) }}/Uploader.swf’,

// 文件接收服务端。

server: ” {{ url(‘admin/upload/file’) }}”,

// 选择文件的按钮。可选。

// 内部根据当前运行是创建，可能是input元素，也可能是flash.

pick: ‘#filePicker’,

// 只允许选择图片文件。

accept: {

title: ‘Images’,

extensions: ‘gif,jpg,jpeg,bmp,png’,

mimeTypes: ‘image/*’

}

});

// 文件上传成功，给item添加成功class, 用样式标记上传成功。

uploader.on( ‘uploadSuccess’, function( file, response ) {

//file是原上传文件信息，相当于php的$_FILES数据

//response是php上传文件响应的数据

console.log(response);

$(‘#img’).val(response.info);

var imgSrc = “{{asset(‘uploads’)}}” + ‘/’ + response.info;

$(‘#showimg’).html(‘<img src=”‘+imgSrc+'” width=”120″ height=”80″ />’)

});

// 文件上传过程中创建进度条实时显示。

uploader.on( ‘uploadProgress’, function( file, percentage ) {

$(‘#uploading’).css( ‘width’, percentage * 100 + ‘%’ );

});

</script>

步骤3：定义路由，并创建控制器书写上传功能代码

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class UploadController extends Controller

{

//上传文件

public function file(Request $request)

{

//1.判断$_FILES[file键]是否存在，并且$_FILES[键][error] 等于0 （也就是没有错误）

if ($request->hasFile(‘file’) && $request->file(‘file’)->isValid()) {

//2.上传文件

//语法： request->file(‘file’)->store(‘子路径’，存储驱动器的名称);

//store是官方存储文件方法

//存储驱动器的名称：对应config/filesystems.php文件

//子路径： 指会在config/filesystems.php文件声明的上传文件夹下再创建一个文件

$filename = $request->file(‘file’)->store(‘img’, ‘upload’);

return [‘info’ => $filename];

}

}

}

更改图片上传规则到七牛云【★★★】

1）对象存储介绍

对象存储简单理解：就是用来存放静态资源的服务器

好处：减少冗余，便于维护

2）使用（zgldh/qiniu-laravel-storage）

步骤1：下载并配置根据下图文档 composer reqiure zgldh/qiniu-laravel-storage

步骤2：打开控制器方法将上传到laravel项目代码更改为上传到七牛云即可

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class UploadController extends Controller

{

//上传文件

public function file(Request $request)

{

//1.判断$_FILES[file键]是否存在，并且$_FILES[键][error] 等于0 （也就是没有错误）

if ($request->hasFile(‘file’) && $request->file(‘file’)->isValid()) {

//2.上传文件

//语法： request->file(‘file’)->store(‘子路径’，存储驱动器的名称);

//store是官方存储文件方法

//存储驱动器的名称：对应config/filesystems.php文件

//子路径： 指会在config/filesystems.php文件声明的上传文件夹下再创建一个文件

//$filename = $request->file(‘file’)->store(‘img’, ‘upload’);

###更改七牛云存储图片

//定义上传文件名称

$filename = uniqid(‘goods’.date(‘YmdHis’,time()));

//从临时文件中获取图片数据

$imgData = file_get_contents($request->file(‘file’)->getPathName());

//上传

\Storage::disk(‘qiniu’)->put($filename, $imgData); //上传文件 file_get_contents(XX.PNG)

//获取下载地址（图片地址）

$downloadUrl = \Storage::disk(‘qiniu’)->getDriver()->downloadUrl($filename);

return [‘info’ => $downloadUrl];

}

}

}

更改直播播放视图

步骤1：将直播详情页静态代码替换edu项目中的直播详情页

步骤：将直播地址更改为变量

首页点播功能

快进看视频，主要理解思路，最好自己写一写

图片懒加载：http://www.jq22.com/jquery-info390

四、总结

本项目中使用了以下几个插件/功能：

Laravel自带组件：

DebugBar（调试工具）、

laravelexcel（导出导入excel文件）、

QiniuSDK（云存储）、

GuzzleHttp（发送请求）

JQuery插件：

datatables（数据表格无刷新分页）、

webuploader（上传文件）、

validate（表单验证插件）、

layer（弹框插件）

直播内容

七牛直播云

OBS推流软件使用

视频播放器Ckplayer（拉流）

1. 需求分析
2. 原型界面
3. UI设计
4. 前端编写代码
5. 核心架构处理(代码层面核心架构，服务器层面的架构、数据库的架构等)
6. 编写代码
7. 测试
8. 上线

项目分析

2.1、项目前台分析

2.2、项目后台分析

ecshop安装

3.1、ecshop的配置

①创建ecshop的web目录

②拷贝ecshop的源码

③创建虚拟主机

④修改hosts文件

3.2、安装ecshop

①重启Apache访问安装

②检查环境

③配置信息

④登录后台

3.3、解决报错问题

①修改includes目录下的cls_template.php文件

②修改cls_image.php文件

③修改lib_main.php

④清除缓存

商品分类管理

4.1、商品分类列表显示

①增加index方法获取数据并且渲染模板

②拷贝视图

③修改资源地址

④修改模板循环显示数据

4.2、分类的删除

①创建方法调用模型方法进行删除

②在模型中实现删除方法

4.3、分类的编辑

4.3.1、回显分类信息

①创建方法获取数据并且显示

②拷贝添加模板为编辑模板

③修改模板

4.3.2、实现提交修改

①修改edit方法处理提交

②修改getTree方法可以根据id标识获取子分类

③模型增加方法实现修改

4.4、分类使用模板继承

4.4.1、介绍模板继承

一个模板继承另外一个模板。在父模板中已有的HTML代码可以直接使用

4.4.2、使用模板继承

①定义父模板

②修改添加使用模板继承

③修改index使用模板继承

④修改编辑模板使用模板继承

商品管理

5.1、商品数据表创建

CREATE TABLE `shop_goods` (

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

`goods_name` varchar(255) NOT NULL DEFAULT ” COMMENT ‘商品名称’,

`goods_sn` varchar(255) NOT NULL DEFAULT ” COMMENT ‘货号’,

`market_price` decimal(10,2) NOT NULL DEFAULT ‘0.00’ COMMENT ‘市场价格’,

`shop_price` decimal(10,2) NOT NULL DEFAULT ‘0.00’ COMMENT ‘本店售价 单位元’,

`goods_number` int(11) NOT NULL DEFAULT ‘0’ COMMENT ‘商品数量’,

`cate_id` int(11) NOT NULL DEFAULT ‘0’ COMMENT ‘商品的分类ID 关联category表中id字段’,

`goods_img` varchar(255) NOT NULL DEFAULT ” COMMENT ‘商品图片’,

`goods_thumb` varchar(255) NOT NULL DEFAULT ” COMMENT ‘缩略图’,

`goods_body` text,

`addtime` int(11) NOT NULL DEFAULT ‘0’ COMMENT ‘添加时间’,

`is_del` tinyint(4) NOT NULL DEFAULT ‘1’ COMMENT ‘是否删除 1代表正常 0代表已经删除’,

`is_hot` tinyint(4) NOT NULL DEFAULT ‘0’ COMMENT ‘是否热卖 1是 0否’,

`is_new` tinyint(4) NOT NULL DEFAULT ‘0’ COMMENT ‘是否新品 1是0否’,

`is_rec` tinyint(4) NOT NULL DEFAULT ‘0’ COMMENT ‘是否推荐 1是0否’,

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

5.2、实现商品的基本入库

5.2.1、显示添加的界面

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

②拷贝商品添加模板

③修改模板使用模板继承

④处理模板显示商品分类

5.2.2、实现入库

①修改方法处理数据提交入库

②创建模型类

③添加字段定义

④创建验证规则

⑤增加添加数据的前置钩子函数

⑥修改钩子函数增加价格判断

5.3、使用ueditor实现商品详情

5.3.1、项目中使用ueditor

①拷贝源码

②在添加模板中引入编辑器的js文件

5.3.2、实现选项卡效果

①修改选项卡标签

②修改商品详情使用选项卡

③修改父模板引入jQuery

④实现切换效果

5.3.3、查看ueditor文件上传的流程(了解)

①抓包查找文件上传地址

②查看controller.php

③查看action_upload.php

④查看upload类

对于上图的upFile及实现了文件上传的功能，关于需要修改上传逻辑的可以在下图中代码实现

5.3、实现图片上传

5.3.1、TP中的文件上传功能

①查看文件上传的配置信息

②查看文件上传的方法

5.3.2、具体实现文件上传

①创建测试方法显示上传表单

②处理上传的表单

③实现文件上传

④查看效果

⑤手动创建上传的根目录

⑤再次查看效果

5.3.3、在项目中使用文件上传

①修改添加的前置钩子函数实现文件上传

②查看结果

③修改前置钩子函数的文件上传

5.4、处理商品的缩略图

5.4.1、生成缩略图流程

1. 实例化Image对象
2. 使用对象打开图片
3. 指定方法对图片进行处理，并且将图片进行保存

5.4.2、生成商品的缩略图

①修改添加的前置钩子函数

针对文件上传成功之后在处理图片

②查看效果