hsntngr/roux

A laravel package that provide to use route names and actions in fetch calls

1.0.0 2019-01-17 15:41 UTC

Requires

• illuminate/support: ^5.1

MIT

• Teoman Hasan Tıngır

README

Roux Api provide you to use route names and actions while sending fetch calls in laravel projects Note: Currently under development

Installation

install roux via composer

composer require teomanofficial/roux

Publish config and asset file of package.

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

Add roux service provider to providers in config/app.php

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

Add roux.js above your custom javascript files

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

Then start to use roux api..

Let assume we have a user.greetings route and takes two parameter.

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

with roux, you can use route name (user.greetings) as target.

roux = new FetchApiWithRoute();

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

call() method takes three parameter, route, route parameters and fetch options. (Post data, headers, token etc.)

But you may pass above information in first parameter as ajax do

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

Instead of route names, also you may use route action as target

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

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

By default, roux looks for csrf token in dom and set 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() }}">

You can work with any api more elegant way by setting up default roux for each service

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

now we can sand requests through postApi

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

Copyright MIT LICENCE