Vue.js workshops

# REST: Representational state transfer

# What is REST ?

I assume you already know it, but here is the wikipedia definition:

TIP

Representational state transfer (REST) is a programming architectural implementation intended to increase the efficiency of communication in computing systems. It embodies the idea that the best way to share large amounts of data between multiple parties is to make that data available on-demand by sharing references to that data rather than a complete copy of the data itself. Systems which implement REST are called 'RESTful' systems.

For our use case we are to use Axios library:

TIP

Axios: Promise based HTTP client for the browser and node.js

You can read more about it right here -> Axios url (opens new window)

We will consume the data that this api will give: http://jsnoise.herokuapp.com (opens new window) and when you navigate to it view swagger (opens new window) you'll be presented with the swagger definitions.

Time to add the axios library. We'll use the vue-axios library because we want to access the axios instance easily. Now click on the "Add Dependency" button on the left side and in the search bar type vue-axios. Select the vue-axios resource. Click again on the "Add Dependency" and search for axios. Select the axios library from the search result.

Once added, let's import it in the main.js file

//main.js
import axios from 'axios'
import VueAxios from 'vue-axios'
    
Vue.use(VueAxios, axios)

The above lines import and tell Vue to use the axios library in all the components.

# Let's get some podcasts!

Open the Podcasts.vue file and in the script tag, on the methos block add the loadPodcasts method, like this:

,
loadPodcasts() {
    this.axios
    .get("https://jsnoise.herokuapp.com/api/showslist?page=1")
    .then(response => {
        this.podcasts = response.data.shows;
        this.first = response.data.first;
        this.last = response.data.last;
        window.scrollTo(0,0);
    })
    .catch(err => console.log("Error loading podcasts: " + err));
}

Method loadPodcasts will make a call to the server that will give us the podcasts. On success it will map the podcasts to the response.data.shows and the first and last properties too. Once they are mapped the page will show you the received list of podacasts.

One more thing remains to just make a first call to the loadPodcasts method once we have the Podcasts component created. We do this in the created() hook that every vue component has. Just replace the existing method with the new one:

created() {
    this.loadPodcasts();     
}

# Refresh and play with the new podcasts received!

Since we are on the Podcasts.vue component let's add one more feature: pagination

The swagger definition for /api/showslist can use 2 parameters: q for searching and page for page. The data received is paginated so we can use this feature to show pages of shows.

We will use the first and last values received from the api to block/unblock the next and previus buttons that are available below the shows.

The loadPodcasts method uses a hardcoded url so we have to add a data property that will keep the current page number and update the url to use this new data property. The new data() method will look like:

data() {
    return { 
        podcasts: [], 
        first: false, 
        last: false, 
        page:1 };
},

Updating the axios get hardcoded url is just as easy. Replace this:

this.axios
    .get("https://jsnoise.herokuapp.com/api/showslist?page=1")

with this:

this.axios
    .get(`https://jsnoise.herokuapp.com/api/showslist?page=${this.page}`)

Let's update the buttons as follows. Replace the full <ul class="text-center"></ul> with the new code:

<ul class="text-center">
    <li>
        <a @click.prevent="prevPage" v-if=" first === false" href="#">&lt;</a>
    </li>

    <li>
        <a @click.prevent="nextPage" v-if=" last === false" href="#">&gt;</a>
    </li>
</ul>

The above code will link the click events to methods that we'll add next, will prevent the navigation from the page with .prevent and will also display the anchors based on the v-if condition.

Adding the prevPage and nextPage methods is easy, so add them in the methods block:

,
prevPage() {
    if (this.first == true) return;
    this.page--;
    this.loadPodcasts();
    
},
nextPage() {
    if (this.last == true) return;
    this.page++;
    this.loadPodcasts();        
}

You can now play with the paginaton to see the changes.

# Let's show the transcripts

On the Podcast.vue side we have to receive the parameter named id and then to call the rest api to get the details of the specified podcast.

We replace the created() with a new version:

//Podcast.vue
,
created() {
    this.podcast = null;
    this.loadPodcast(this.$route.params.id);
}

The created() hook will put the current podcast to null and it will call the new method loadPodcast sending the id parameter received from the vue-router

Add the new method loadPodcast in the methods block of the vue component:

//Podcast.vue
methods: {
    loadPodcast(id) {
        this.axios
        .get(`https://jsnoise.herokuapp.com/api/shows/${id}`)
        .then(response => this.podcast = response.data )
        .catch(err => console.log("Error loading podcast:" + err));
    }
    },

While the podcast data is received we could show a loading indicator or we could just hide the content of the page. We hide the content by updating the fist div of the Podcast.vue component like this

<div class="site-wrap" v-if="podcast">

The above condition will only show the Podcast component when a podcast is prezent.

# Well done! you now have server communication in place.

Next, let's use Flux architecture to manage the data.

← Data store →