- [Instructor] In this video, we will modify
our frontend project
in order to request all of our messages from the backend.
To do that, we'll use a library called Axios.
At one point, Vue did have its own
Vue Resource Library, which gave us the same functionality,
but Vue dropped support for it
and now recommends Axios in the official documentation.
Let's take a look at the Axios GitHub project page.
If we scroll down,
we can see the installation instructions.
So I'll copy the NMP instructions,
go over to our frontend project,
open up the Terminal and paste that in.
And I'll do dash dash save.
Now back on the website, let's scroll down to the example.
The first thing we'll need to do is require it in.
Then after, we can use axios.get.
So let's give that a try.
So I'll copy in the first line to require it in
and go to our frontend project.
We'll open up the messages component
and now we need to figure out
where we're going to call axios.get.
A good place would be once the component
is done initializing
we then worry about what data we need to get.
And Vue has just the function for us.
So below our data, we'll add a comma
and I'll add a create function.
Then I'll use console.log.
And then, just to test out when this function is called,
we'll put in a created message.
Save this and take a look at our app.
I'll refresh and we can see it's called
soon as our app is loaded.
So the first thing we'll need to do
is paste in the require we copied for Axios earlier.
I'll do that below line 14
and above our data function.
We could also use a more modern import.
So I'll comment this out
and use import axios from axios.
And I'll get rid of line 14
since we no longer need a require.
And in our created,
I'll get rid of line 23, since we don't need
that test console log.
In here, we'll use axios.get
and we'll need to supply that URL.
So just like before, it's http colon slash slash
localhost port 3,000 slash messages.
Let's save these changes and see what happens.
So inside our app, if we refresh,
we can see that in our console,
we're getting the CORS error.
By default, we'll always get an error such as this
when the appl URL, in this case,
localhost port 8080 differs from the backend URL
which is localhost port 3,000,
and so in this case, the port difference
is simply causing the error.
To get around that, we'll use a non-production solution
which simply tells our app to allow
requests from any URL
and there's a package in NMP
that allows us to do just that.
So let's go to our backend project.
We'll create a new terminal
and we'll use npm install cors.
Now let's go back to the first terminal
and then after line one,
we'll create a new constant called cors
and we'll set it to the new package we just installed
called cors.
Then above our first end point,
we'll specify app.use and we'll pass in the cors function
and that'll act as a built-in cors middleware,
which will called before any of our endpoints.
Let's save that
and I just need to fix a typo line two for require
and we're not getting anymore errors.
So now let's go back to our app and see what happens.
If we refresh, we can see
we're no longer getting the cors error
and if we go to the Network tab,
we can see our messages request
and we can see the response with all of our messages.
The next thing I'd like to do
is modify the actual message contents
so that we know it's getting messages
from the backend versus the hard-coded frontend.
So I'll just modify each message.
Just simple placeholders for now.
Save that.
Then let's check our app.
So I'll refresh,
check the message's response
and we can see our new messages.
We can see that we're not displaying those yet in our list.
So let's focus on that.
So back in our frontend project,
we need to set the response we get from our get
into our messages array.
We can use an async array to do that easily,
so I'll add async to the front of created on line 22.
Then I'll set this.messages to await axios.get.
I'll save that
and then we'll check the app.
And we can see it's not really what we expected.
We're getting an object with several properties
that are being iterated in that v-for.
Let's go back to the frontend project
and let's display the messages data
to see what we're actually getting.
So above our list,
I'll just use curly braces and specify messages.
Let's go back to our app
and we can see we're getting a big object.
With the first property called data,
which actually contains our messages.
So we just need to display the data
and not this entire object.
So that's simple.
We'll go to our frontend project.
I'll get rid of this line four
that we added as a test
and then we simply wrap our await axios.get with brackets
and add dot data to the end.
So what's happening here is
async await is awaiting for this response.
Once it gets it, we access just the data property
and send that into our messages data
using this.messages
and then Vue will iterate through that.
And there we go.
It's now displaying each of our messages.
And we know we're getting
the correct messages from the backend
since they match the backend message text.
So we know how to get data from the backend,
how to serve it on the backend,
and then how to display it on the frontend.
Next, let's take a look at how to save data to our backend.