Laravel Nova 工具

概覽

當你想用 Nova 還沒有提供的功能時，你可以向 Nova 的側邊欄添加自定義工具。Nova 工具的定制性極強，因為他們主要都是由 Vue 的單文件組件構成。在 Vue 組件里，你可以向應用中任意的控制器發(fā)送 HTTP 請求。

定義工具

自定義工具可以通過 nova:tool 命令生成。所有生成的工具都默認放在應用的 nova-components 目錄中。當使用 nova:tool 命令生成工具時，工具的名稱必須遵循 Composer 的 vendor/package 格式。比如我們要生成一個價格跟蹤工具，我們可以執(zhí)行如下命令：

artisan nova:tool acme/price-tracker

當生成工具時，Nova 會提示你安裝工具的 NPM 依賴，編譯資源，并且更新應用的 composer.json 文件。所有自定義的工具都會作為 Composer 的「path」注冊到你的應用中。

Nova 生成工具時已經包含了所有必要的東西。每個工具都有自己的 composer.json 文件，他們隨時可以在 Github 或其他源碼管理網站上分享。

注冊工具

Nova 工具要在應用的 NovaServiceProvider 中注冊。服務提供者里包含一個 tools 方法，該方法返回一個工具數組。只要把你的工具添加到工具列表中即可完成注冊。假如你創(chuàng)建了一個名為 acme/price-tracker 的 Nova 工具，你可以像下面這樣來注冊：

use Acme\PriceTracker\PriceTracker;

/**
 * 獲取展示在 Nova 側邊欄中的卡片。
 *
 * @return array
 */
public function tools()
{
    return [
        new PriceTracker,
    ];
}

構建工具

每個 Nova 生成的工具都包含有各自的服務提供者和「tool」類。以 price-tracker 工具為例，該工具的類文件位于 src/PriceTracker.php 。像上文提到的那樣，該工具類必須在 NovaServiceProvider 中注冊。

工具的服務提供者位于工具的 src 目錄，并且已經注冊進了工具的 composer.json 文件中，因此 Laravel 框架會自動加載該工具類。

授權

如果你只想把工具暴露給特定的用戶，你可以在工具注冊時鏈式調用 canSee 方法。canSee 方法接收一個返回值為 true 或 false 的閉包函數。該閉包函數的參數為 HTTP 請求：

use Acme\PriceTracker\PriceTracker;

/**
 * 獲取展示在 Nova 側邊欄里的卡片。
 *
 * @return array
 */
public function tools()
{
    return [
        (new PriceTracker)->canSee(function ($request) {
            return false;
        }),
    ];
}

路由

通常，你需要定義工具調用的 Laravel 路由。Nova 生成工具時會創(chuàng)建一個 routes/api.php 的路由文件。你可以使用它定義任何工具所需要的路由。

它所有路由都是通過工具的 ToolServiceProvider 自動定義在路由組里面。路由組指定所有組內路由接收一個 /nova-vendor/tool-name 前綴，tool-name 是工具 "kebab-case" 的名字 。舉例： /nova-vendor/price-tracker 。你可以自由定義這個路由組，但是請注意要確保你的 Nova 工具和其他 Nova 包兼容。

路由授權

你的 Nova 工具會生成一個 Authorize 中間件。它在執(zhí)行任意的請求到達路由組之前，就自動判斷授權用戶是否可見此工具。另外，你可以按需自由修改這個中間件。

導航

Nova 工具類包含一個 renderNavigation 方法。該方法返回一個渲染工具側邊欄鏈接的視圖。當然，工具生成時就已經創(chuàng)建好了一個默認的導航。如果需要的話你可以自定義該視圖：

/**
 * 構建工具的導航鏈接視圖。
 *
 * @return \Illuminate\View\View
 */
public function renderNavigation()
{
    return view('price-tracker::navigation');
}

資源

Nova 生成工具時，resources/js 和 resources/sass 目錄也一并創(chuàng)建了。這些目錄包含了工具的 JavaScript 腳本和 Sass 樣式，其中的主要文件是：resources/js/components/Tool.vue 和 resources/sass/tool.scss。

Tool.vue 是一個 Vue 單文件組件，你可以在里面做任意修改。在工具里你可以通過全局的 Axios 發(fā)送 HTTP 請求。此外，moment.js 和 underscore.js 庫也是全局可訪問的。

注冊資源

Nova 工具類包含了一個 boot 方法，當工具存在或者注冊后，這個方法會被執(zhí)行。默認情況下，該方法會把你的工具已編譯的資源都注冊上，因此在 Nova 的前端就可以使用了。

/**
 *  工具注冊時需要執(zhí)行的任務
 * 
 * @return void
 */
public function boot()
{
    Nova::script('price-tracker', __DIR__.'/../dist/js/tool.js');
    Nova::style('price-tracker', __DIR__.'/../dist/css/tool.css');
}

JavaScript Bootstrap & 路由

你的組件會被引導啟動并且前端路由注冊在 resources/js/tool.js 文件中。你可以按需求自由地修改這個文件或者注冊額外的組件。

編譯資源

Nova 在創(chuàng)建工具時也創(chuàng)建了一個 webpack.mix.js 文件。你可以使用 NPM dev 和 prod 命令構建工具：

// 為本地開發(fā)環(huán)境編譯資源...
npm run dev

// 編譯并壓縮資源...
npm run prod

此外，你可以執(zhí)行 NPM watch 命令來實現(xiàn)資源文件修改后的自動編譯：

npm run watch