New entry about ESP8266 in which we are going to see how to consume a Rest API with the Axios library, from an application in VueJs served from the ESP8266.
In the previous entry, we saw how to consume with an ESP8266 and the Axios library, using only Vanilla Javascript. On the other hand, we already saw how to serve an application in VueJs in this post.
Today it’s time to take a step further and combine both components, Axios and VueJS, to make a Web application that communicates with the ESP8266 as a backend through a Rest API, using Axios.
Of course, if you haven’t seen the previous entries yet, it would be a good time to review them because we are going to continue with what we saw.
Let’s get started! First of all, the backend in this example is identical to that of the previous entry. That is, the code in the ESP8266 will not change.
So as not to be annoying and unnecessarily lengthen the entry, we are going to omit it. You have it in the previous examples of the series and in the code on Github.
What will change, of course, is the frontend that we are going to serve from the SPIFFS, which now becomes.
Where we see that the code of our page has been adorned by the tags specific to a VueJs App.
<!DOCTYPE html>
<html>
<head>
<title>ESP8266 Vue + Axios</title>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!-- Our simple example APP -->
<div id="app">
<div>
<button v-on:click="getAll()">GetAll</button>
</div>
<div>
<button v-on:click="get()">Get</button>
<input v-model="getId" placeholder="getId">
</div>
<div>
<button v-on:click="getFiltered()">Filter</button>
<input v-model="filter" placeholder="filter">
</div>
<div>
<button v-on:click="create()">Create</button>
</div>
<div>
<my-component v-for="item in items" v-bind:my="item" v-bind:key="item.id"></my-component>
</div>
</div>
<!-- From CDN -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/axios@0.18.0/dist/axios.min.js"></script>-->
<script type="text/javascript" src="./vendor/vue.min.js"></script>
<script type="text/javascript" src="./vendor/axios.min.js"></script>
<!-- Load the files that simulate our API and our App in Vue.JS -->
<script type="text/javascript" src="./js/API.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
</body>
</html>The VueJS application is defined in the ‘app.js’ file. It is very simple, and basically exposes a collection of ‘items’ objects, and the necessary methods to call our example API.
Vue.component('my-component', {
props: ['my'],
template: '<div>{{my.text}}<button v-on:click="get(my.id)">Get</button><button v-on:click="update(my.id)">Update</button><button v-on:click="replac(my.id)">Replace</button><button v-on:click="delet(my.id)">Delete</button></div>',
methods: {
get: function (id) {
API_get(id);
},
update: function (id) {
API_update(id, 'NewItem');
},
replac: function (id) {
API_replace(id, 'NewItem');
},
delet: function (id) {
API_delete(id);
}
}
})
var app = new Vue({
el: '#app',
data: {
filter: "",
getId: "",
items: [
{ id: 0, text: 'Item1'},
{ id: 1, text: 'Item2' },
{ id: 2, text: 'Item3'}
]
},
methods: {
getAll() {
API_getAll();
},
get() {
API_get(this.$data.getId);
},
getFiltered() {
API_getFiltered(this.$data.filter);
},
create() {
API_create('NewItem');
},
}
})The API is defined in the ‘API.js’ file. These functions use Axios to make calls to our Rest API, as we saw in the previous entry.
function API_get(id) {
axios.get('item/' + id)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_getFiltered(filter) {
axios.get('item', {
params: {
filter: filter
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_getAll() {
axios.get('item')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_create(data) {
axios.post('item', {
data: data
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_replace(id, data) {
axios.put('item/ ' + id, {
data: data
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_update(id, data) {
axios.patch('item/ ' + id, {
data: data
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}
function API_delete(id) {
axios.delete('item/' + id)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
});
}Result
We upload our new page to the SPIFFS memory, and when we load it in the browser we see the same page as before.
If we interact with the buttons, we can verify in the browser’s developer console that the actions are performed correctly.
And we can also verify in the serial port terminal of the ESP8266 that the actions and information are indeed received correctly in the backend.
You may say. But it’s the same ugly page as the previous example! Well, no, we have taken a step further in the integration to serve and interact with complex Apps from the ESP8266. Now we don’t use ‘bare’ Javascript, but we incorporate two powerful libraries like Axios and VueJS.
In the next entry we will take one more step by integrating Vuetify, once again achieving a more modern Material Design look for our application. Until the next entry!
Download the code
All the code from this post is available for download on GitHub. 