hsntngr/roux

一个laravel包,提供在fetch调用中使用路由名称和操作的功能

安装: 9

依赖者: 0

建议者: 0

安全: 0

星标: 3

关注者: 2

分支: 0

语言:JavaScript

1.0.0 2019-01-17 15:41 UTC

This package is auto-updated.

Last update: 2024-09-16 10:04:28 UTC


README

Roux Api提供在laravel项目中发送fetch调用时使用路由名称和操作的功能。注意:目前处于开发中

安装

通过composer安装roux

composer require teomanofficial/roux

发布包的配置和资产文件。

php artisan vendor:publish --provider="Hsntngr\Roux\RouxServiceProvider" --tag="config" --tag="asset"

将roux服务提供者添加到config/app.php中的providers配置

'providers' => [
    // ...
    Hsntngr\Roux\RouxServiceProvider::class
];

在您的自定义javascript文件上方添加roux.js

<script src="{{asset("js/roux.js")}}"></script>
<script src="{{asset("js/app.js")}}"></script>

然后开始使用roux api...

假设我们有一个user.greetings路由,它接受两个参数。

Route::get("welcome/{name}/{surname}", function ($name,$surname) {
    return response()->json("Welcome " . $name." ".$surname);
})->name("user.greetings");

使用roux,您可以使用路由名称(user.greetings)作为目标。

roux = new FetchApiWithRoute();

roux.call("user.greetings",["Hasan Teoman","Tıngır"])
    .then(res => console.log(res))
//  welcome Hasan Teoman Tıngır

call()方法接受三个参数,路由、路由参数和fetch选项(POST数据、headers、token等)。

但您也可以将上述信息作为第一个参数传递,就像ajax一样

roux.call({
    method: "GET",
    route: "users.get",
    params: userId
});

除了路由名称,您还可以使用路由操作作为目标

roux.call({
    method: "POST",
    action: "PostController@store",
    contentType: "json",
    csrf: token,
    data: postData
});

roux.call("PostController@show", postId)

默认情况下,roux会在DOM中查找csrf token并设置csrf header。

<!--common csrf fields in dom that roux looks for-->
@csrf
{{ csrf_field() }}
<input name="_token" value="{{ csrf_token() }}">
<meta name="csrf-field" content="{{ csrf_token() }}">

您可以通过为每个服务设置默认roux来以更优雅的方式处理任何API

var postApi = new Roux({
    as: "posts.",
    namespace: "Api"
})

现在我们可以通过postApi发送请求

postApi.call("show", postId)
postApi.call("update", postId, {data: data})

版权 MIT LICENCE