[Node.js] Front End - Axios Library(Vue CLi)

To see what we have so far:

cd front-end
npm install
npm run serve

Navigate to localhost:8080 to see the site. Add some items, make sure all the functionality works. Refresh the screen and notice that any new items you added are gone, since they are stored in the front end.

 

Setup proxy configuration

We need to tell the front end to send API requests to the back end. Do this by creating a file called vue.config.js in the front-end directory. This file should contain:

module.exports = {
  devServer: {
    proxy: 'http://localhost:3000',
  }
}

Install Axios

We're going to be using the Axios library to make API requests instead of fetch. Install this with:

npm install axios

Then, at the start of the script section in src/views/Home.vue, import this library:

<script>
import axios from 'axios';

Creating and reading items

Let's start by initializing the list to an empty array instead of having hard-coded data there:

  data() {
    return {
      items: [],
      text: '',
      show: 'all',
    }
  },

Now add a created section to the component, right after the data() function:

created: function() {
  this.getItems();
},

This will call the getItems function when Vue is created. Add that function in the methods section of the component:

    async getItems() {
      try {
        const response = await axios.get("/api/items");
        this.items = response.data;
      } catch (error) {
        console.log(error);
      }
    },

This uses the axios library to get the items, then store them in the items property.

To add new items, let's modify the addItems function:

    async addItem() {
      try {
        await axios.post("/api/items", {
          text: this.text,
          completed: false
        });
        this.text = "";
        this.getItems();
      } catch (error) {
        console.log(error);
      }
    },

This POSTs a new item to the server, and when it is done it fetches the list of items again so that Vue will update the DOM with the new list.

Updating items

To update items on the server, we need to add an event handler that gets called whenever a checkbox is clicked to indicate an item has been completed. In the template of Home.vue, modify the checkbox so it looks like this:

          <input type="checkbox" v-model="item.completed" @click="completeItem(item)" />

Then, in the methods section, add the completeItem method:

    async completeItem(item) {
      try {
        axios.put("/api/items/" + item.id, {
          text: item.text,
          completed: !item.completed,
        });
        this.getItems();
      } catch (error) {
        console.log(error);
      }
    },

This method uses axios to send the PUT request, with the required information in the body of the request.

 

Notice that when we add an item or edit an item we call getitems when it is done. This enables us to be sure our copy of the data is in sync with the server. A different way to do this is to modify our local copy of the data but only if the API call succeeds. This would avoid fetching the entire list each time it is changed, but requires you to be careful to keep the data in sync properly.

 

Deleting items

We need to modify the front end to call the API to delete an item. In Home.vue, modify deleteItem as follows:

    async deleteItem(item) {
      try {
        await axios.delete("/api/items/" + item.id);
        this.getItems();
      } catch (error) {
        console.log(error);
      }
    },

Notice how we get the list after the API call succeeds, so we Vue can update the DOM.

We also need to change deleteCompleted:

    deleteCompleted() {
      this.items.forEach(item => {
        if (item.completed)
          this.deleteItem(item);
      });
    },

This loops through the items and sends a request to the server to delete each completed item. These will each run asynchronously since deleteItem is an async function!