补充：

Chrome浏览器打开调试模式，快捷键：

1、开发者工具：option＋command＋i
2、Javascript控制台：option＋command＋j
3、或者 option＋command＋c

效果如图：（注意箭头指向）

1、业务逻辑梳理。

实现广告轮播图配置功能，包含序号，标题，内容，图片，跳转网址，发布来源，更新时间，增删改查等功能。
根据需求创建数据库表，这里就不做具体说明。

2、图片上传功能实现。

我们使用的是WebUploader文件上传框架，相关功能可以查看官方文档。

在advert->add.html中，我们引入资源

引入Image框架，执行composer命令

composer require topthink/think-image

Html部分

初始化Web Uploader

     // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // swf文件路径
        swf: "/static/admin/lib/webuploader/0.1.5/Uploader.swf",
        // 文件接收服务端。
        server: "{:url('/admin/upArtImg')}",
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',
        // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
        resize: false,
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ,data) {
        if (data.status == 'fail'){
            $('#img').html(''+data.info+'');
        } else {
            $('#img').html('');
        }
    });

配置Route

Route::post('upArtImg','admin/UploadController/uploadArt');

控制器UploadController

   //上传广告图片缩略图
    public function uploadArt(Request $request){
        $validate = config('image.VALIDATE'); // 大小格式校验
        $path = config('image.ARTPATH'); // 存储路径
        $file = $request->file('file');
        $res  = $file->validate($validate)->move($path);
        if($res){
            $fileName = $res->getPathName();
            $image = Image::open($fileName);
            $image->thumb(250,150,Image::THUMB_FIXED)->save($fileName);
            $data = ['status'=>'success','info'=>$fileName];
        }else{
            $data = ['status'=>'fail','info'=>$file->getError()];
        }
        return json($data);
    }

引入Config配置，

return [
    'VALIDATE'=>['ext'=>'jpg,png,jpeg,gif','size'=>2097152],
    'ARTPATH' =>'uploads/advert/thumb',
];

注意事项

TP5.1的Config方法要注意使用助手函数。

config文件夹分模块处理app/admin。

Image使用Composer加载进入框架。

3、新增广告功能

在form表单中增加路由设置

在Controller和Model里面获取相关参数，插入数据表即可。

4、分页展示功能

在Model中使用paginate方法对数据进行分页查询。

   //获取所有广告
    public function getAllAd($list){
       $data = $this->where('type',1)->order('created_at desc')->paginate($list);
        return $data;
    }

在Controller中，我们通过assign方法传递数据。

    public function index(){
         $advert = new Advert;
         $ads = $advert->getAllAd(2);
         $adCount = $advert->getAllAdCount();
         $this->assign('ads',$ads);
         $this->assign('adCount',$adCount);
         return view('advert/index');
    }

在Controller中，我们通过render方法显示分页，volist方法显示列表。

// 图片展示方法
 
// 分页展示效果
  {$ads->render()|raw}

分页样式我们使用Bootcdn框架，打开Bootcdn官网，搜索bootstrap选择一个相对低版本，复制链接引入HTML

5、修改功能

在HTML中，在编辑按钮设置路由



在Controller中，edit方法里面通过ID获取该条数据，并传入edit视图中。

   public function edit($id){
        $advert = new Advert();
        $ad = $advert->getOneAd($id);
        $this->assign('ad',$ad);
        return view('advert/edit');
    }

在edit视图中，我们队数据进行展示和保存。

注意这里的form表单的save方法和图片显示以及数据显示的写法。最后再控制器的update方法中更新数据库即可。

6、删除功能

在HTML中我们设置删除的onclick方法，并传入ID。



设置Ajax请求，这里有方法类型，URL地址，事件处理，网页跳转。

/*广告-删除*/
    function delAdvert(id) {

        layer.confirm('确认要删除吗？？？',function(){
            $.ajax({
                type: 'DELETE',
                dataType: 'json',
                url: '/admin/ad/'+id,
                success: function(data){
                    if(data.status=='success'){
                        layer.msg(data.info,{icon:1,time:1000},function () {
                          location.href = '/admin/ad';
                        });
                    }else {
                        layer.msg(data.error,{icon:2,time:1000},function () {
                            location.href = '/admin/ad';
                        });
                    }
                },
                error:function(data) {
                    console.log(data.msg);
                },
            });
        });
    }

在Controller中

  public function delete($id) {
        $advert = new Advert();
        $res = $advert->deleteAd($id);
        return json($res);
    }

总结：
这样我们的广告功能就开发完毕
包括:资源路由使用，先关页面导入，Image框架导入，Webuploader框架使用，图片裁剪，图片保存，图片展示方法，缩略图页面展示，分页查询，分页显示，Bootcdn框架导入和使用，删除功能Ajax功能使用等。

【PHP笔记十二】TP5.1广告功能开发、

补充：