Laravel composer包-webUpload制作过程
生活随笔
收集整理的這篇文章主要介紹了
Laravel composer包-webUpload制作过程
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
參考文章: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 如下 <?phpreturn ['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() !!} 效果如下:
最終目錄結構如下:
②修改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 如下 <?phpreturn ['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() !!} 效果如下:
最終目錄結構如下:
總結
以上是生活随笔為你收集整理的Laravel composer包-webUpload制作过程的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 阿里天池 Python 训练营1
- 下一篇: NB-IoT技术是未来发展趋势,作为一个