工具

未匹配的标注

概览

当你想用 Nova 还没有提供的功能时,你可以向 Nova 的侧边栏添加自定义工具。Nova 工具的定制性极强,因为他们主要都是由 Vue 的单文件组件构成。在 Vue 组件里,你可以向应用中任意的控制器发送 HTTP 请求。

定义工具

自定义工具可以通过 nova:tool 命令生成。所有生成的工具都默认放在应用的 nova-components 目录中。当使用 nova:tool 命令生成工具时,工具的名称必须遵循 Composer 的 vendor/package 格式。比如我们要生成一个价格跟踪工具,我们可以执行如下命令:

artisan nova:tool acme/price-tracker

当生成工具时,Nova 会提示你安装工具的 NPM 依赖,编译资源,并且更新应用的 composer.json 文件。所有自定义的工具都会作为 Composer 的「path」注册到你的应用中。

Nova 生成工具时已经包含了所有必要的东西。每个工具都有自己的 composer.json 文件,他们随时可以在 Github 或其他源码管理网站上分享。

注册工具

Nova 工具要在应用的 NovaServiceProvider 中注册。服务提供者里包含一个 tools 方法,该方法返回一个工具数组。只要把你的工具添加到工具列表中即可完成注册。假如你创建了一个名为 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 方法接收一个返回值为 truefalse 的闭包函数。该闭包函数的参数为 HTTP 请求:

use Acme\PriceTracker\PriceTracker;

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

路由

通常,你需要定义工具调用的 Laravel 路由。Nova 生成工具时会创建一个 routes/api.php 的路由文件。你可以使用它定义任何工具所需要的路由。
它所有路由都是通过工具的 ToolServiceProvider 自动定义在路由组里面。路由组指定所有组内路由接收一个 /nova-vendor/tool-name 前缀,tool-name 是工具 "kebab-case" 的名字 。举例: /nova-vendor/price-tracker 。你可以自由定义这个路由组,但是请注意要确保你的 Nova 工具和其他 Nova包兼容。

路由授权

你的 Nova 工具会生成一个 Authorize 中间件。它在执行任意的请求到达路由组之前,就自动判断授权用户是否可见此工具。另外,你可以按需自由修改这个中间件。

导航

Nova 工具类包含一个 renderNavigation 方法。该方法返回一个渲染工具侧边栏链接的视图。当然,工具生成时就已经创建好了一个默认的导航。如果需要的话你可以自定义该视图:

/**
 * 构建工具的导航链接视图。
 *
 * @return \Illuminate\View\View
 */
public function renderNavigation()
{
    return view('price-tracker::navigation');
}

资源

Nova 生成工具时,resources/jsresources/sass 目录也一并创建了。这些目录包含了工具的 JavaScript 脚本和 Sass 样式,其中的主要文件是:resources/js/components/Tool.vueresources/sass/tool.scss

Tool.vue 是一个 Vue 单文件组件,你可以在里面做任意修改。在工具里你可以通过全局的 Axios 发送 HTTP 请求。此外,moment.jsunderscore.js 库也是全局可访问的。

注册资源

Nova 工具类包含了一个 boot 方法,当工具存在或者注册后,这个方法会被执行。默认情况下,该方法会把你的工具已编译的资源都注册上,因此在 Nova 的前端就可以使用了。

/**
 *  工具注册时需要执行的任务
 * 
 * @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 在创建工具时也创建了一个 webpack.mix.js 文件。你可以使用 NPM devprod 命令构建工具:

// 为本地开发环境编译资源...
npm run dev

// 编译并压缩资源...
npm run prod

此外,你可以执行 NPM watch 命令来实现资源文件修改后的自动编译:

npm run watch

本文章首发在 LearnKu.com 网站上。

本译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
贡献者:3
讨论数量: 0
发起讨论 只看当前版本


暂无话题~