Updating your front end to get data from service

- [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.