Laravel composer包-webUpload制作过程

来源：互联网发布：sql loader 350 编辑：程序博客网时间：2024/06/08 18:02

参考文章：https://laravel-china.org/articles/1714

以下封装的包的demo在：https://github.com/Lidisam/webUpload-for-laravel

接下来讲解如何将webupload封装成一个laravel的composer包

这里针对的版本是laravel 5.2

①首先打开laravel目录，然后再app的同级目录下创建 packages/lisam/webupload/src

注：src目录存储开发包的代码

②修改laravel项目根目录的composer.json如下：

"autoload": {     "classmap": [ "database" ],     "psr-4": {     "App\\": "app/",     "Lisam\\Webupload\\": "packages/lisam/webupload/src/" }},

注：修改根目录的composer.json需要重新加载，命令为：composer dump-autoload

③在包的src的同级目录添加composer.json，并修改代码如下：

{    "name": "lisam/webupload-for-laravel",    "description": "webupload for laravel5",    "authors": [        {            "name": "lisam",            "email": "364362035@qq.com"        }    ],    "require": {}}

④创建服务提供者WebuploadServiceProvider

php artisan make:provider WebuploadServiceProvider

并将其从app/Providers/WebuploadServiceProvider.php移动到packages/lisam/webupload/src下,然后将WebuploadServiceProvider注册到config/app.php的providers下

'providers' => [     /* * Laravel Framework Service Providers... */      ......     /* * Application Service Providers... */     ......                       Lisam\Webupload\WebuploadServiceProvider::class,],

⑤新建配置文件 packages/lisam/webupload/src/config/webupload.php 如下

<?php     return [          'options' => []];

⑥新建功能函数文件 packages/lisam/webupload/src/Webupload.php (包含相干的资源文件js、css)

<?php namespace Lisam\Webupload;class Webupload{    /**    * constructor.    */    public function __construct()    {    }    public function render()    {//        return view('Toastr::toastr', compact('javascript'));    }    /**    * css资源文件    */    public function css()    {        echo '<link rel="stylesheet" type="text/css" href="/packages/webUpload/css/webuploader.css" />' . PHP_EOL;        echo '<link rel="stylesheet" type="text/css" href="/packages/webUpload/css/style.css"/>' . PHP_EOL;    }    /**    * js资源文件    */    public function js()    {        echo '<script type="text/javascript" src="/packages/webUpload/js/jquery.js"></script>' . PHP_EOL;        echo '<script type="text/javascript" src="/packages/webUpload/js/webuploader.js"></script>' . PHP_EOL;        echo '<script type="text/javascript" src="/packages/webUpload/js/upload.js"></script>' . PHP_EOL;    }    /**    * 主体内容    */    public function content()    {        echo '<div id="wrapper">' .            '<div id="container">' .            '<div id="uploader">' .            '<div class="queueList">' .            '<div id="dndArea" class="placeholder">' .            '<div id="filePicker"></div>' .            '<p>或将照片拖到这里，单次最多可选300张</p>' .            '</div>' .            '</div>' .            '<div class="statusBar" style="display:none;">' .            '<div class="progress">' .            '<span class="text">0%</span>' .            '<span class="percentage"></span>' .            '</div>' .            '<div class="info"></div>' .            '<div class="btns">' .            '<div id="filePicker2"></div>' .            '<div class="uploadBtn">开始上传</div>' .            '</div>' .            '</div>' .            '</div>' .            '</div>' .            '</div>';    }}

⑦注册门面Facade，新建packages/lisam/webupload/src/Facades/Webupload.php

<?php namespace Lisam\Webupload\Facades;use Illuminate\Support\Facades\Facade;class Webupload extends Facade{    protected static function getFacadeAccessor()    {        return 'webupload';    }}

⑧修改providers

<?php namespace Lisam\Webupload;use Illuminate\Support\ServiceProvider;class WebuploadServiceProvider extends ServiceProvider{    /**    * Bootstrap the application services.    *    * @return void    */    public function boot()    {        $this->publishes([            __DIR__ . '/config/webupload.php' => config_path('webupload.php'),        ]);    }    /**    * Register the application services.    *    * @return void    */    public function register()    {        $this->app['webupload'] = $this->app->share(function ($app) {            return new Webupload();        });    }    /**    * Get the services provided by the provider.    *    * @return array    */    public function provides()    {        return ['webupload'];    }}

⑨修改config/app.php文件如下：

'aliases' => [     'WebUpload' => Lisam\Webupload\Facades\Webupload::class,],

⑩然后随便找一个控制器指向根目录文件，并修改视图文件如下：

{{--设置token验证--}}<meta name="_token" content="{{ csrf_token() }}"/>{{--设置当前保存url--}}<meta name="_url" content="/admin/good/webUpload?goods_id={{ $id }}"/>{!! WebUpload::css() !!}{!! WebUpload::content() !!}{!! WebUpload::js() !!}

效果如下：

最终目录结构如下：

1 0