Laravel Nova 卡片

概述

卡片類似于資源工具，但卻是一種更小、更微型的工具，它們可以被放置在儀表盤(pán)中，用來(lái)顯示或提示各類資源的簡(jiǎn)要信息或明細(xì)信息。事實(shí)上，如果你已經(jīng)使用過(guò) Nova metrics 的話，說(shuō)明你已經(jīng)嘗試過(guò)卡片。同時(shí)，可以通過(guò)自定義卡片來(lái)創(chuàng)建屬于你自己的資源工具。

定義卡片

卡片可以使用 Artisan 命令 nova:card 來(lái)創(chuàng)建。默認(rèn)情況下，所有新創(chuàng)建的卡片都將被保持在你應(yīng)用根目錄下的 nova-components 文件夾中。當(dāng)使用 Artisan 命令 nova:card 創(chuàng)建卡片時(shí)，所傳遞的卡片名稱因遵從 Composer  vendor/package 格式。因此，如果我們要?jiǎng)?chuàng)建一個(gè)叫『流量分析』的卡片時(shí)，我們應(yīng)該運(yùn)行如下命令：

artisan nova:card acme/analytics

生成卡片時(shí)，Nova 講提示你去安裝卡片所需要的 npm 依賴包，編譯資源，和更新項(xiàng)目的 composer.json 文件。所有的自定義卡片都會(huì)通過(guò) Composer "path" 倉(cāng)庫(kù)注冊(cè)到你的應(yīng)用。

Nova 卡包括構(gòu)建卡所需的所有腳手架。每張卡甚至都包含其自己 composer.json 文件，并可以在 GitHub 或您選擇的源代碼控制提供商上與世界共享。

注冊(cè)卡片

Nova 卡片可以在你的 Resource 類中的 cards 方法中注冊(cè)。此方法返回資源可用的卡片數(shù)組。將你的卡片添加到由這個(gè)方法返回的卡片數(shù)組中，對(duì)卡片進(jìn)行注冊(cè):

use Acme\Analytics\Analytics;

/**
 * 獲取可用的資源卡片.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function cards(Request $request)
{
    return [new Analytics];
}

卡片選項(xiàng)

通常，您需要允許您卡片的消費(fèi)者自定義卡上的運(yùn)行時(shí)配置選項(xiàng)。您可以通過(guò)在您的 card 類中公開(kāi)方法來(lái)實(shí)現(xiàn)這一點(diǎn)。這些方法可能會(huì)調(diào)用卡片的底層 withMeta 方法來(lái)添加信息到卡片的元數(shù)據(jù)中，這些元數(shù)據(jù)將應(yīng)用在您的 Card.vue 的組件。withMeta 方法接受一個(gè) 鍵 / 值 選項(xiàng)數(shù)組：

<?php

namespace Acme\Analytics;

use Laravel\Nova\Card;

class Analytics extends Card
{
    /**
     * 卡片的寬度(1/3, 1/2, or full)。
     *
     * @var string
     */
    public $width = '1/3';

    /**
     * 指示分析應(yīng)該顯示當(dāng)前的訪問(wèn)者。
     *
     * @return $this
     */
    public function currentVisitors()
    {
        return $this->withMeta(['currentVisitors' => true]);
    }

    /**
     * 獲取卡片的組件名稱。
     *
     * @return string
     */
    public function component()
    {
        return 'analytics';
    }
}

構(gòu)建卡片

Nova 生成的每張卡片都包含自己的服務(wù)提供商和 “卡片” 類，以使用 analytics 卡片為例，卡片類位于 src/Analytics.php。

卡片的服務(wù)提供者也位于卡片的 src 目錄中，并在卡片的 composer.json 文件中注冊(cè)，以便 Laravel 框架自動(dòng)加載。

授權(quán)

如果您只想向特定用戶公開(kāi)指定的卡片，可以將 canSee 方法鏈到您指定的卡片上。canSee 方法接受一個(gè)閉包，該閉包應(yīng)該返回 true 或 false。閉包將接收傳入的 HTTP 請(qǐng)求：

use Acme\Analytics\Analytics;

/**
 * 獲得可用的資源卡片.
 *
 * @param  \Illuminate\Http\Request  $request
 * @return array
 */
public function cards(Request $request)
{
    return [
        (new Analytics)->canSee(function ($request) {
            return false;
        }),
    ];
}

路由

通常，您需要定義卡片調(diào)用的 Laravel 路由。當(dāng) Nova 生成您的卡片時(shí)，它會(huì)創(chuàng)建一個(gè) routes/api.php 路由文件。如果需要，您可以使用此文件來(lái)定義您卡片所需的任何路由。

此文件中的所有路由都由您卡片的 CardServiceProvider 在路由組內(nèi)自動(dòng)定義。路由組指定組內(nèi)所有路由都應(yīng)接收 /nova-vendor/card-name 前綴，其中 card-name 是您卡片的「kebab-case」名稱。例如，/nova-vendor/analytics。您可以自由的修改此路由組的定義， 但請(qǐng)務(wù)必確保您的 Nova 卡片與其他 Nova 包共存。

路由授權(quán)

當(dāng)為您的卡片創(chuàng)建路由時(shí)，您應(yīng)該 始終 使用 Laravel 的 gates 或 policies 為這些路由添加授權(quán)。

Assets

當(dāng) Nova 生成卡片時(shí)，會(huì)為您生成 resources/js 和 resources/sass 目錄。這些目錄包含您的卡片的 JavaScript 和 Sass 樣式表。這些目錄中最感興趣的文件主要是：resources/js/components/Card.vue 和 resources/sass/card.scss。

Card.vue 文件是一個(gè)包含卡片前端的單文件 Vue 組件。從這文件中，您可以隨意構(gòu)建你想要的卡片。您的卡片可以使用 Axios 發(fā)起 HTTP 請(qǐng)求，它是全局可用的。此外，moment.js 和 underscore.js 庫(kù)也是全局可用。

卡片屬性

您卡片的 Card.vue 組件接收一個(gè) 卡片 Vue prop。此屬性提供對(duì)任何可用卡片 選項(xiàng) 的訪問(wèn)：

const issuesRefunds = this.card.issuesRefunds;

注冊(cè) Assets

Nova 卡片的服務(wù)提供注冊(cè)您卡片編譯的 assets，以便 Nova 前端可以使用它們：

/**
 * 引導(dǎo)任何應(yīng)用程序服務(wù)。
 *
 * @return void
 */
public function boot()
{
    $this->app->booted(function () {
        $this->routes();
    });

    Nova::serving(function (ServingNova $event) {
        Nova::script('{{ component }}', __DIR__.'/../dist/js/card.js');
        Nova::style('{{ component }}', __DIR__.'/../dist/css/card.css');
    });
}

JavaScript 引導(dǎo) & 路由

您組件在 resources/js/card.js 文件中被引導(dǎo)和注冊(cè)。您可以根據(jù)需要自由修改此文件或在此注冊(cè)其他組件。

編譯資源

Nova 創(chuàng)建卡片的同時(shí)生成一個(gè) webpack.mix.js 文件。你可以使用 NPM dev 和 prod 命令構(gòu)建卡片：

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

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

此外，你還可以運(yùn)行 NPM watch 命令在文件改動(dòng)時(shí)自動(dòng)編譯：

npm run watch