Instructions.txt

Instrucciones:

1. El nombre de la clase tiene que ser en Singular y en Pascal case. Esto debido a que el nombre de la ruta va a depender de este
por ejemplo, si la clase se llama MySuperLargeUrl entonces nuestra ruta será  http://nombredelaapi.com/prefijo/my-syper-large-url
2. Puedes cambiar el prefijo (por ej. '/admin/endpointname'), endpoint (por ej. 'prefix/users/') y el origen (por ej. www.api.myapp.com/prefix/endpoint)

Para hacer un poco entendible, veamos este ejemplo
...
class MySuperService extends Service
  constructor() {
		super();
		this.config.prefix = '/api/';
		this.config.endpointUrl = 'posts'; //Override endpointUrl
		this.config.origin = 'https://api.facebook.com'; //Override origin 
	}
...
Las rutas se generarán de la siguiente manera:
[GET] https://api.facebook.com/api/posts
[GET] https://api.facebook.com/api/posts/1
[POST] https://api.facebook.com/api/posts
[PUT] https://api.facebook.com/api/posts/1
[DELETE] https://api.facebook.com/api/posts/1

3. Si usamos los valores por default, suponiendo que estamos ejecutando la clase anterior y estamos desde un server con url https://api.cuadrangular.mx, las peticiones se realizarán de la siguiente manera:

[GET] https://api.cuadrangular.mx/my-super-services
[GET] https://api.cuadrangular.mx/my-super-services/1
[POST] https://api.cuadrangular.mx/my-super-services
[PUT] https://api.cuadrangular.mx/my-super-services/1
[DELETE] https://api.cuadrangular.mx/my-super-services/1

Si por ejemplo vamos a devolver una colección pero queremos determinada página o mostrar 500 registros por página, puedes mandarlos de la siguiente manera.

 import UserService from '/services/UserService.js';
 
 let User = new UserService();
 
 let users_collection_promise = User.get('?per_page=100&page=2&sortBy=id'); //URL  https://api.cuadrangular.mx/user?limit=100&page=2&sortBy=id
 
 users_collection.then(collection =>{
   //collection 
   {
// 	"total": 600,
// 	"per_page": 100,
// 	"current_page": 6,
// 	"last_page": 6,
// 	"next_page_url": null,
// 	"prev_page_url": null,
// 	"from": 1,
// 	"to": 6,
// 	"data": [{
// 		"id": 10,
// 		"first_name": "Patricio",
// 		"email": "[email protected]",
// 		"created_at": "2016-12-29 05:21:05",
// 		"updated_at": "2017-01-01 04:58:12",

// 	}, {
// 		"id": 9,
// 		"first_name": "Steve",
// 		"email": "[email protected]",
// 		"created_at": "2016-12-15 06:56:06",
// 		"updated_at": "2016-12-15 07:12:35",

// 	}, {
// 		"id": 8,
// 		"first_name": "Carlos",
// 		"email": "[email protected]",
// 		"created_at": "2016-12-13 06:22:21",
// 		"updated_at": "2016-12-15 06:45:05",

// 	}, {
// 		"id": 6,
// 		"first_name": "Cesar",
// 		"email": "[email protected]",
// 		"created_at": "2016-12-04 19:12:17",
// 		"updated_at": "2016-12-04 19:34:01",

// 	}]
// }
}
    
 }).catch(err => { console.log(err) });

Service.js

import Vue from 'vue';
import Pluralize from 'pluralize';
import _ from 'lodash';
class Service {
	constructor() {
		this.initService();
	}

	getClassName() {
		return this.constructor.name;
	}

	initService() {
		this.config = {
			origin: window.location.origin,
			prefix: '/',
			endpointUrl: Pluralize(_.kebabCase(this.getClassName()))
		};
	}

	buildUrl() {
		var prefix = this.config.prefix;
		var origin = this.config.origin;
		var endpoint = this.config.endpointUrl;

		return origin + prefix + endpoint;
	}

	get(params) {
		params = typeof params == 'undefined' ? '' : params;

		var endpoint = this.buildUrl(this.config.endpointUrl)
		var resource_promise = new Promise((resolve, reject) => {
			Vue.http.get(endpoint + params)
				.then((collection) => {
					resolve(collection.data); // Deberiamos definir las convenciones para cuando recibamos una collección
				})
				.catch((err) => {
					reject(err);
				});
		});
		return resource_promise;

	}

	find(id) {
		if (!id) {
			throw "ID is needed";
			return;
		}

		var endpoint = this.buildUrl(this.config.endpointUrl) + "/" + id;
		var resource_promise = new Promise((resolve, reject) => {
			Vue.http.get(endpoint)
				.then((data) => {
					resolve(data.data); // Deberiamos definir las convenciones para cuando recibamos una collección
				})
				.catch((err) => {
					reject(err);
				});
		});
		return resource_promise;

	}

	create(data) {
		if (!data) {
			throw "data is needed";
			return;
		}

		var endpoint = this.buildUrl(this.config.endpointUrl);
		var resource_promise = new Promise((resolve, reject) => {
			Vue.http.post(endpoint, data)
				.then((data) => {
					resolve(data.data); // Deberiamos definir las convenciones para cuando recibamos una collección
				})
				.catch((err) => {
					reject(err);
				});
		});
		return resource_promise;

	}


	update(id, data) {
		var endpoint = this.buildUrl(this.config.endpointUrl) + "/" + id;
		var resource_promise = new Promise((resolve, reject) => {
			Vue.http.put(endpoint, data)
				.then((data) => {
					resolve(data.data); // Deberiamos definir las convenciones para cuando recibamos una collección
				})
				.catch((err) => {
					reject(err);
				});
		});
		return resource_promise;
	}

	delete(id) {
		var endpoint = this.buildUrl(this.config.endpointUrl) + "/" + id;
		var resource_promise = new Promise((resolve, reject) => {
			Vue.http.delete(endpoint, data)
				.then((data) => {
					resolve(data.data); // Deberiamos definir las convenciones para cuando recibamos una collección
				})
				.catch((err) => {
					reject(err);
				});
		});
		return resource_promise;
	}
}

export default Service;

user.component.vue

<!--Componente -->
<template>
    <div class="component-widget-users">
        <!-- Table -->
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Nombre</th>
                    <th>Correo electrónico</th>
                    <th>Activado</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="user in users">
                    <td>{{user.id}}</td>
                    <td>{{user.first_name}} {{user.last_name}}</td>
                    <td>{{user.email}}</td>
                    <td>{{user.activated? 'Activo' : 'Inactivo'}}</td>
                </tr>
            </tbody>
        </table>

    </div>
</template>

<script>
    import UserService from '/services/UserService.js';
    export default {
        data(){
            return {
                users : [],
            }
        },
        mounted() {
            var vm = this;
            var User = new UserService(); // Instancia
            var requests_promise = User.get();

            requests_promise.then((collection)=>{
                vm.users = collection.data;
            }).catch(error => {
                console.log(error)
            }); 


            User.find(1);  //Find User with id = 1
        },
        methods : {}
    }
</script>
<style lang="sass">
    .users-component{
    }
</style>

UserService.js

//UserService.js
import Vue from 'vue';
import Service from './Service.js';

class User extends Service {
	constructor() {
		super();
		this.config.prefix = '/admin/';
		//this.config.endpointUrl = 'productos'; //Override endpointUrl
	}
}
export default User;