Laravel Nova 工具

概覽

當(dāng)你想用 Nova 還沒(méi)有提供的功能時(shí)，你可以向 Nova 的側(cè)邊欄添加自定義工具。Nova 工具的定制性極強(qiáng)，因?yàn)樗麄冎饕际怯?Vue 的單文件組件構(gòu)成。在 Vue 組件里，你可以向應(yīng)用中任意的控制器發(fā)送 HTTP 請(qǐng)求。

定義工具

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

artisan nova:tool acme/price-tracker

當(dāng)生成工具時(shí)，Nova 會(huì)提示你安裝工具的 NPM 依賴，編譯資源，并且更新應(yīng)用的 composer.json 文件。所有自定義的工具都會(huì)作為 Composer 的「path」注冊(cè)到你的應(yīng)用中。

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

注冊(cè)工具

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

use Acme\PriceTracker\PriceTracker;

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

構(gòu)建工具

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

工具的服務(wù)提供者位于工具的 src 目錄，并且已經(jīng)注冊(cè)進(jìn)了工具的 composer.json 文件中，因此 Laravel 框架會(huì)自動(dòng)加載該工具類。

授權(quán)

如果你只想把工具暴露給特定的用戶，你可以在工具注冊(cè)時(shí)鏈?zhǔn)秸{(diào)用 canSee 方法。canSee 方法接收一個(gè)返回值為 true 或 false 的閉包函數(shù)。該閉包函數(shù)的參數(shù)為 HTTP 請(qǐng)求：

use Acme\PriceTracker\PriceTracker;

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

路由

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

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

路由授權(quán)

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

導(dǎo)航

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

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

資源

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

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

注冊(cè)資源

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

/**
 *  工具注冊(cè)時(shí)需要執(zhí)行的任務(wù)
 * 
 * @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 & 路由

你的組件會(huì)被引導(dǎo)啟動(dòng)并且前端路由注冊(cè)在 resources/js/tool.js 文件中。你可以按需求自由地修改這個(gè)文件或者注冊(cè)額外的組件。

編譯資源

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

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

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

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

npm run watch