Laravel Nova 卡片

概述

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

定義卡片

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

artisan nova:card acme/analytics

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

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

注冊卡片

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

use Acme\Analytics\Analytics;

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

卡片選項

通常，您需要允許您卡片的消費者自定義卡上的運行時配置選項。您可以通過在您的 card 類中公開方法來實現(xiàn)這一點。這些方法可能會調(diào)用卡片的底層 withMeta 方法來添加信息到卡片的元數(shù)據(jù)中，這些元數(shù)據(jù)將應(yīng)用在您的 Card.vue 的組件。withMeta 方法接受一個 鍵 / 值 選項數(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)前的訪問者。
     *
     * @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 文件中注冊，以便 Laravel 框架自動加載。

授權(quán)

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

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 生成您的卡片時，它會創(chuàng)建一個 routes/api.php 路由文件。如果需要，您可以使用此文件來定義您卡片所需的任何路由。

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

路由授權(quán)

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

Assets

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

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

卡片屬性

您卡片的 Card.vue 組件接收一個 卡片 Vue prop。此屬性提供對任何可用卡片 選項 的訪問：

const issuesRefunds = this.card.issuesRefunds;

注冊 Assets

Nova 卡片的服務(wù)提供注冊您卡片編譯的 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)和注冊。您可以根據(jù)需要自由修改此文件或在此注冊其他組件。

編譯資源

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

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

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

此外，你還可以運行 NPM watch 命令在文件改動時自動編譯：

npm run watch