Menu

CSS / JavaScript

CSS

Nova 使用 Tailwind.css 库来作为前端的样式。因此,对于自定义的组件你可以随意使用 Tailwind 的功能和类。

JavaScript

当你创建自定义的 Nova 工具,资源工具,卡片,和字段的时候,你可以使用各种各样的全局可用的辅助函数。

Axios

Axios HTTP 库 是全局可用的,它可以让你很方便地发送 HTTP 请求到你自定义组件的 Laravel 控制器:

axios.get('/nova-vendor/stripe-inspector/endpoint').then(response => {
    // ...
})

Nova 请求

除了直接用 Axios 之外,你也可以使用 Nova.request() 方法。 这个方法配置了一个单独的 Axios 实例,它运用预先配置好的拦截器去处理和重定向 401403, 以及 500 服务器错误:

Nova.request().get('/nova-vendor/stripe-inspector/endpoint').then(response => {
    // ...
})

事件机制

你自定义的组件可以使用全局的 Nova JavaScript 对象作为发布/订阅事件总线机制。 这个机制提供了以下的方法,它和 Vue 提供的 事件方法一致:

Nova.$on(event, callback)
Nova.$once(event, callback)
Nova.$off(event, callback)
Nova.$emit(event, callback)

消息通知

Nova 的 Vue 配置自动注册了 Vue toasted 插件。因此,在你自定义的组件内,你可以利用 this.$toasted 对象去呈现简单的消息通知:

this.$toasted.show('It worked!', { type: 'success' })
this.$toasted.show('It failed!', { type: 'error' })

全局变量

全局 Nova JavaScript 对象的 config 属性包含了当前 Nova 的 base 路径和 userId

const userId = Nova.config.userId;
const basePath = Nova.config.base;

不过,你可以在 Nova::serving 监听器里调用 Nova::provideToScript 方法去加入额外的值, 这个监听器通常会被注册在项目或自定义组件的服务提供者的 boot 方法中:

use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;

/**
 * 启动所有的应用服务
 *
 * @return void
 */
public function boot()
{
    Nova::serving(function (ServingNova $event) {
        Nova::provideToScript([
            'user' => $event->request->user()->toArray(),
        ]);
    });
}

一旦通过 provideToScript 方法加载了新变量,你可以用全局的 Nova JavaScript 对象访问它:

const name = Nova.config.user.name;

其它可用的库

除了 Axios 之外,在自你定义的组件中,你还可以使用全局通用的 LodashMoment.js 库。

本文章首发在 LearnKu.com 网站上。
上一篇 下一篇
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 0
发起讨论 只看当前版本


暂无话题~