IMPORTANT: Per accedir als fitxer de subversion: http://acacha.org/svn (sense password). Poc a poc s'aniran migrant els enllaços. Encara però funciona el subversion de la farga però no se sap fins quan... (usuari: prova i la paraula de pas 123456)

TODO: exemple com utilitzar vue-resource per a fer peticions a una api amb ajax https://laracasts.com/series/charting-and-you/episodes/7

https://github.com/laracasts/Graphs-and-AJAX/blob/master/app/Http/routes.php

Instal·lació

Vanilla javascript

Els podeu trobar a:

https://github.com/vuejs/vue-resource/tree/master/dist

També podeu trobar CDNs a:

https://cdnjs.com/libraries/vue-resource

Webpack/Browserify

$ npm install vue-resource --save

I afegir les següents línies al codi:

var Vue = require('vue');

Vue.use(require('vue-resource'));

Com funciona?

Afegeix a vue suport Ajax afegint el objecte http.

Globalment:

Vue.http

O dins d'una instància Vue:

this.$http

Pels que vinguin del mon Angular és similar a http d'Angular:

https://docs.angularjs.org/api/ng/service/$http

NOTA: NO necessàriament heu de fer les peticions ajax amb aquest sistema! Podeu utilitzar vanilla javascript o altres llibreries com Jquery (vegeu Jquery Ajax)

Exemple complet

new Vue({

    ready: function() {

      var resource = this.$resource('someItem/:id');

      // get item
      resource.get({id: 1}, function (item, status, request) {
          this.$set('item', item)
      })

      // save item
      resource.save({id: 1}, {item: this.item}, function (data, status, request) {
          // handle success
      }).error(function (data, status, request) {
          // handle error
      })

      // delete item
      resource.delete({id: 1}, function (data, status, request) {
          // handle success
      }).error(function (data, status, request) {
          // handle error
      })

    }

})

Exemple

Crear una gràfica i obtenir les dades per petició Ajax amb vue-resource

https://laracasts.com/series/charting-and-you/episodes/7
https://github.com/laracasts/Graphs-and-AJAX/blob/master/app/Http/routes.php

Vegeu endpoint de la API al fitxer routes.php

 'admin'], function () {
    Route::get('api/revenue', function () {
        return Performance::thisYear()
            ->selectRaw('strftime("%m", created_at) as month, sum(revenue) as revenue')
            ->groupBy('month')
            ->pluck('revenue', 'month');
    });
});

Far una consulta sobre la taula performance. On pluck:

https://laravel.com/docs/master/collections#method-pluck

Vegeu Laravel Collections i recordeu també que per defecte els arrays són retornats com a Jsons amb Laravel. I el component Vue:

https://github.com/laracasts/Graphs-and-AJAX/blob/master/resources/assets/js/components/Graph.js
...
ready() {
        this.$http.get(this.url)
            .then(response => {
                const data = response.data;

                this.render({
                    labels: Object.keys(data),
                    datasets: [
                        {
                            label: "Revenue",
                            fillColor: "rgba(220,220,220,0.2)",
                            strokeColor: "rgba(220,220,220,1)",
                            pointColor: "rgba(220,220,220,1)",
                            pointStrokeColor: "#fff",
                            pointHighlightFill: "#fff",
                            pointHighlightStroke: "rgba(220,220,220,1)",
                            data: Object.keys(data).map(key => data[key])
                        }
                    ]
                });
            });
    },

Tutorials

Laracast:

Videotutorial:

Interceptors

Vegeu Interceptors . Són similars als midleware de Laravel és a dir permeten interceptar peticions HTTP i realitzar modificacions sobre la request i/o o la response

Vegeu també

Enllaços externs