Laravel 學習過程中用到的工具-20180930

EwenSal發表於2018-09-21
Laravel

說明

一、本文記錄自己在學習laravel過程中用到的工具，方便日後學習使用，絕大部分為摘抄。

二、儘量持續更新

三、如果有錯誤希望看到的大神幫忙指出，提前致謝！

一、使用者切換工具sudo-su

加上角色許可權判斷以後，我們需要切換多個使用者來測試，頻繁地退出和登入使用者是一個費時的事情，接下來我們將使用 sudo-su 使用者切換工具，來提高我們的效率。

1. 安裝

使用 Composer 安裝：


$ composer require "viacreative/sudo-su:~1.1"

2. 新增 Provider

app/Providers/AppServiceProvider.php


<?php

.

.

.

class AppServiceProvider extends ServiceProvider

{

    .

    .

    .

    public function register()

    {

        if (app()->isLocal()) {

            $this->app->register(\VIACreative\SudoSu\ServiceProvider::class);

        }

    }

}

3. 釋出資原始檔

執行以下命令：


$ php artisan vendor:publish --provider="VIACreative\SudoSu\ServiceProvider"

會生成：

-   /public/sudo-su 前端 CSS 資源存放資料夾；

-   config/sudosu.php 配置資訊檔案；

4. 修改配置檔案

config/sudosu.php


<?php

return [

    // 允許使用的頂級域名

    'allowed_tlds' => ['dev', 'local', 'test'],

    // 使用者模型

    'user_model' => App\Models\User::class

];

Sudosu 為了避免開發者在生產環境下誤開啟此功能，在配置選項 allowed_tlds 裡做了域名字尾的限制，tld 為 Top Level Domain 的簡寫。此處因我們的專案域名為 larabbs.test，故將 test 域名字尾新增到 allowed_tlds 陣列中。

5. 模板植入

在主要佈局模板中的 Scripts 區塊上寫入模板呼叫程式碼：

resources/views/layouts/app.blade.php


.

.

.

    @if (app()->isLocal())

        @include('sudosu::user-selector')

    @endif

    <!-- Scripts -->

    <script src="{{ asset('js/app.js') }}"></script>

    @yield('scripts')

</body>

</html>

此刻重新整理頁面，即可看到右下角的使用者賬號切換按鈕。

二、佇列監控Horizon

Horizon 是 Laravel 生態圈裡的一員，為 Laravel Redis 佇列提供了一個漂亮的儀表板，允許我們很方便地檢視和管理 Redis 佇列任務執行的情況。

使用 Composer 安裝：


$ composer require "laravel/horizon:~1.0"

安裝完成後，使用 vendor:publish Artisan 命令釋出相關檔案：


$ php artisan vendor:publish --provider="Laravel\Horizon\HorizonServiceProvider"

分別是配置檔案 config/horizon.php 和存放在 public/vendor/horizon 資料夾中的 CSS 、JS 等頁面資原始檔。

至此安裝完畢，瀏覽器開啟 http://larabbs.test/horizon 訪問控制檯：

file

Horizon 是一個監控程式，需要常駐執行，我們可以透過以下命令啟動：


$ php artisan horizon

安裝了 Horizon 以後，我們將使用 horizon 命令來啟動佇列系統和任務監控，無需使用 queue:listen。

接下來我們再次嘗試下發帖，發帖之前，請確保 horizon 命令處於監控狀態：

file

這一次多虧了 Horizon，我們可以清晰的看到更加詳盡的錯誤資訊，錯誤異常是 ModelNotFoundException，最重要的：

file

我們發現 Data 區塊裡，id 的值居然為 null。我們知道的，佇列系統對於構造器裡傳入的 Eloquent 模型，將會只序列化 ID 欄位，因為我們是在 Topic 模型監控器的 saving() 方法中分發佇列任務的，此時傳參的 $topic 變數還未在資料庫裡建立，所以 $topic->id 為 null。

三、樣式調整

執行 Laravel Mix

Laravel Mix 一款前端任務自動化管理工具，使用了工作流的模式對制定好的任務依次執行。Mix 提供了簡潔流暢的 API，讓你能夠為你的 Laravel 應用定義 Webpack 編譯任務。Mix 支援許多常見的 CSS 與 JavaScript 前處理器，透過簡單的呼叫，你可以輕鬆地管理前端資源。

使用 Mix 很簡單，首先你需要使用以下命令安裝 npm 依賴即可。我們將使用 Yarn 來安裝依賴，在這之前，因為國內的網路原因，我們還需為 Yarn 配置安裝加速：

$ yarn config set registry https://registry.npm.taobao.org

使用 Yarn 安裝依賴：

$ yarn install

安裝成功後，執行以下命令即可：

$ npm run watch-poll

watch-poll 會在你的終端裡持續執行，監控 resources 資料夾下的資原始檔是否有發生改變。在 watch-poll 命令執行的情況下，一旦資原始檔發生變化，Webpack 會自動重新編譯。

注意：在後面的課程中，我們需要保證 npm run watch-poll 一直處在執行狀態中。
如果啟動出錯，可以嘗試npm rebuild node-sass --no-bin-links

四、安裝驗證碼擴充套件包

我們將以第三方擴充套件包 mews/captcha 作為基礎來實現 Laravel 中的驗證碼功能。

使用 Composer 安裝：

$ composer require "mews/captcha:~2.0"

執行以下命令生成配置檔案 config/captcha.php：

$  php artisan vendor:publish --provider='Mews\Captcha\CaptchaServiceProvider'

我們可以開啟配置檔案，檢視其內容：

config/captcha.php

<?php

return [

    'characters' => '2346789abcdefghjmnpqrtuxyzABCDEFGHJMNPQRTUXYZ',

    'default'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
    ],

    'flat'   => [
        'length'    => 6,
        'width'     => 160,
        'height'    => 46,
        'quality'   => 90,
        'lines'     => 6,
        'bgImage'   => false,
        'bgColor'   => '#ecf2f4',
        'fontColors'=> ['#2c3e50', '#c0392b', '#16a085', '#c0392b', '#8e44ad', '#303f9f', '#f57c00', '#795548'],
        'contrast'  => -5,
    ],

    'mini'   => [
        'length'    => 3,
        'width'     => 60,
        'height'    => 32,
    ],

    'inverse'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
        'sensitive' => true,
        'angle'     => 12,
        'sharpen'   => 10,
        'blur'      => 2,
        'invert'    => true,
        'contrast'  => -5,
    ]
];

可以看到這些配置選項都非常通俗易懂，characters 選項是用來顯示給使用者的所有字串，default, flat, mini, inverse 分別是定義的四種驗證碼型別，你可以在此修改對應選項自定義驗證碼的長度、背景顏色、文字顏色等屬性，在此不做過多敘述。

五、提示資訊擴充套件包 - overtrue/laravel-lang

接下來讓我們使用 Composer 來安裝 laravel-lang。

$ composer require "overtrue/laravel-lang:~3.0"

六、 Intervention/image 擴充套件包來處理圖片裁切

  1. Composer 安裝
$ composer require intervention/image
  1. 配置資訊

執行以下命令獲取配置資訊：

$ php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

開啟 config/image.php 檔案可以看到只有一個驅動器的選項，支援的值有 GD 庫 和 ImageMagic：

file

注：此處我們使用預設的 gd 即可，如果將要開發的專案需要較專業的圖片，請考慮 ImageMagic。

七、剪裁圖片 Intervention/image

  1. Composer 安裝
$ composer require intervention/image
  1. 配置資訊

執行以下命令獲取配置資訊：

$ php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

開啟 config/image.php 檔案可以看到只有一個驅動器的選項，支援的值有 GD 庫 和 ImageMagic：

八、程式碼生成器 —— Laravel 5.x Scaffold Generator

安裝

1. 透過 Composer 安裝

$ composer require "summerblue/generator:~0.5" --dev

2. 版本標記

在測試之前，我們先把程式碼納入到版本管理，做個版本標記，以便後續測試的程式碼回滾：

$ git add -A
$ git commit -m "Add generator"

3. 試執行

接下來我們可以放心的測試，執行 generator 的 readme 裡提供的示例：

$ php artisan make:scaffold Projects --schema="name:string:index,description:text:nullable,subscriber_count:integer:unsigned:default(0)"

我們在命令列中指定了資料模型還有具體的欄位資訊，執行命令後，generator 幫我們生成了一堆檔案，並在最後執行了資料庫遷移：

file

我們將會在下一個章節中具體講解所有生成的檔案，接下來讓我們還原專案到正常狀態，首先回滾資料庫遷移：

$ php artisan migrate:rollback

還原修改檔案到原始狀態：

$ git checkout .

檢視檔案修改狀態：

$ git status

輸出：

file

可以看出剩下的是新建的檔案，接下來使用下面命令還原：

$ git clean -f -d

命令 git clean 作用是清理專案，-f 是強制清理檔案的設定，-d 選項命令連資料夾一併清除。執行成功後再使用：

$ git status

九、 laravel-debugbar

安裝 Debugbar

使用 Composer 安裝：

$ composer require "barryvdh/laravel-debugbar:~3.1" --dev

生成配置檔案，存放位置 config/debugbar.php：

$ php artisan vendor:publish --provider="Barryvdh\Debugbar\ServiceProvider"

開啟 config/debugbar.php，將 enabled 的值設定為：

'enabled' => env('APP_DEBUG', false),

修改完以後, Debugbar 分析器的啟動狀態將由 .env檔案中 APP_DEBUG 值決定。

重新整理列表頁面即可看到我們的開發者工具欄：

十、 導航欄選中狀態外掛hieu-le/active

使用 Composer 安裝 hieu-le/active：

$ composer require "hieu-le/active:~3.5"

安裝完成後，在模板中使用：

resources/views/layouts/_header.blade.php

.
.
.
        <div class="collapse navbar-collapse" id="app-navbar-collapse">
            <!-- Left Side Of Navbar -->
            <ul class="nav navbar-nav">
                <li class="{{ active_class(if_route('topics.index')) }}"><a href="{{ route('topics.index') }}">話題</a></li>
                <li class="{{ active_class((if_route('categories.show') && if_route_param('category', 1))) }}"><a href="{{ route('categories.show', 1) }}">分享</a></li>
                <li class="{{ active_class((if_route('categories.show') && if_route_param('category', 2))) }}"><a href="{{ route('categories.show', 2) }}">教程</a></li>
                <li class="{{ active_class((if_route('categories.show') && if_route_param('category', 3))) }}"><a href="{{ route('categories.show', 3) }}">問答</a></li>
                <li class="{{ active_class((if_route('categories.show') && if_route_param('category', 4))) }}"><a href="{{ route('categories.show', 4) }}">公告</a></li>
            </ul>
.
.
.

上面程式碼看起來很複雜，但都是些重複的程式碼。我們需先理解好 active_class 函式的用法，此函式的定義如下：

/**
 * Get the active class if the condition is not falsy
 *
 * @param        $condition
 * @param string $activeClass
 * @param string $inactiveClass
 *
 * @return string
 */
function active_class($condition, $activeClass = 'active', $inactiveClass = '')

如果傳參滿足指定條件 ($condition) ，此函式將返回 $activeClass，否則返回 $inactiveClass。

此擴充套件包提供了一批函式讓我們更方便的進行 $condition 判斷：

  1. if_route() - 判斷當前對應的路由是否是指定的路由；
  2. if_route_param() - 判斷當前的 url 有無指定的路由引數。
  3. if_query() - 判斷指定的 GET 變數是否符合設定的值；
  4. if_uri() - 判斷當前的 url 是否滿足指定的 url；
  5. if_route_pattern() - 判斷當前的路由是否包含指定的字元；
  6. if_uri_pattern() - 判斷當前的 url 是否含有指定的字元；

在這裡我們用到第 1 和 第 2 。

十一、過濾使用者提交的內容HTMLPurifier for Laravel 5

HTMLPurifier for Laravel 是對 HTMLPurifier 針對 Laravel 框架的一個封裝。本章節中，我們將使用此擴充套件包來對使用者內容進行過濾。

1. 安裝 HTMLPurifier for Laravel 5

使用 Composer 安裝：

$ composer require "mews/purifier:~2.0"

2. 配置 HTMLPurifier for Laravel 5

命令列下執行

$ php artisan vendor:publish --provider="Mews\Purifier\PurifierServiceProvider"

請將配置資訊替換為以下:

config/purifier.php

<?php

return [
    'encoding'      => 'UTF-8',
    'finalize'      => true,
    'cachePath'     => storage_path('app/purifier'),
    'cacheFileMode' => 0755,
    'settings'      => [
        'user_topic_body' => [
            'HTML.Doctype'             => 'XHTML 1.0 Transitional',
            'HTML.Allowed'             => 'div,b,strong,i,em,a[href|title],ul,ol,ol[start],li,p[style],br,span[style],img[width|height|alt|src],*[style|class],pre,hr,code,h2,h3,h4,h5,h6,blockquote,del,table,thead,tbody,tr,th,td',
            'CSS.AllowedProperties'    => 'font,font-size,font-weight,font-style,margin,width,height,font-family,text-decoration,padding-left,color,background-color,text-align',
            'AutoFormat.AutoParagraph' => true,
            'AutoFormat.RemoveEmpty'   => true,
        ],
    ],
];

配置裡的 user_topic_body 是我們為話題內容定製的，配合 clean() 方法使用：

$topic->body = clean($topic->body, 'user_topic_body');

開始過濾

一切準備就緒，現在我們只需要在資料入庫前進行過濾即可：

app/Observers/TopicObserver.php

<?php

namespace App\Observers;

use App\Models\Topic;

// creating, created, updating, updated, saving,
// saved,  deleting, deleted, restoring, restored

class TopicObserver
{
    public function saving(Topic $topic)
    {
        $topic->body = clean($topic->body, 'user_topic_body');

        $topic->excerpt = make_excerpt($topic->body);
    }
}
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章