- [Instructor] Now that we know the basics
of how Axios works and the methods it provides us with
for making requests to the backend,
let's see how to actually install
and use this library on our view front end.
So the first thing we're going to need to do here
is install the Axios package
into our front end project.
And we can do that by opening up a terminal.
And again, make sure it's in your front end project here
and by running npm install axios and hitting enter.
And that was simple enough.
The next thing we're going to do
is switch over a few parts of our app to use Axios.
The first parts that we're going to switch over
are the parts of our application
that need the load data from the server.
when the page is open.
This will include the products page
which needs to load all the available products
when it's open, the product detail page
which needs to load the data for a specific product.
And finally, the cart page, which needs to load
all of the items that a user has in their cart.
Now there's a pretty straightforward process
for doing this and hopefully by the time we're done,
you'll have picked up on it.
So let's start off with our products page.
So let's open up that component here.
Open up productspage.vue.
And the first thing that we're going to do
is import the Axios library
at the top of our script section.
So we're going to say import Axios from Axios, just like that.
And then what we're going to do is instead of importing
our products from this fake data file here,
which we're going to delete actually, what we're going to do
is we're going to initially set the products
inside our data function, to an empty array.
This will be sort of the initial state of our products.
And what we're actually going to do with this
is the products we'll start off as an empty array.
And as soon as the page is loaded,
we're going to make a request to our backend
load those products,
and then call these stock products equals and, you know,
set the products of our component
to the data that we loaded from the server.
So now we come to the real question and that is in Vue,
how do we call a piece of code for example,
code that makes a request to our server
and then sets the products data appropriately
when the page is first loaded?
How do we do that?
Well, this is going to be something new for most of you,
but just like we've been able to define things
like data and computed properties for our components,
there's also a function
that we can tap into that's called created.
And this is what we referred to in view
as a life cycle method.
Here's what it looks like.
It's just a function called created, like that.
So basically this created method
which again is what's called a lifecycle method
is a method that's reliably called at a specific point
in the process of rendering a component on the screen.
In the case of created, for example,
the method is called when the component is well, created.
And that makes it the perfect place to load the data
for our components.
So here's what the loading is going to look like.
Based on what we learned in the previous video,
we're going to say const result.
And then we're going to say equals await axios.get.
That's the function we learned about
for getting data from the server.
And we're going to put the URL
that we want to make this request to,
which is going to be HTTP://localhost:8000/api/products.
And since we used await here,
we're actually going to need to set this created method
to async like that.
And now that we have the result that we got back
from calling axios.get.
Remember that the next thing we need to do
is call result.data.
So we can just say const products equals result.data.
And then we can set this products data of our component
to this product data that we loaded
from the server by saying this.products equals products.
Great.
So now that we've got this created life cycle method
coded out, let's run our front end and back end
and take a look to see if they work like
what we want them to.
So let's open a terminal in our front end
and run npm run serve.
And while that's starting up, let's open up a terminal
in our backend and run npm run dev.
And just as a side note, you're also going to want to make sure
that the Mongo daemon is running in the background.
If it isn't, you're going to want to run mongod,
in a separate terminal and leave that terminal open.
And once you've done that, again, let's run npm run dev
on the backend, that will start up our server.
And now if we open up the URL
for our front end, which will open up in a browser here,
we're going to see that it actually doesn't work.
And if we open up the inspector tools here
and go to the console,
and we're going to see that there's some errors
in the console.
In particular, we see this cores error thing.
And this is an extremely common error to see
when starting out with full stack development.
Basically, it's a security related error
that our app is throwing for us in an attempt to be helpful.
It happens whenever our front end tries to make a request
to some end point on a different origin than itself.
So the real question here is how do we get rid of this error
and let our front end loaded status in peace?
Well, in order to do that, basically what we need to do
and this might not make sense to some of you at this point,
but what we need to do is make our front end
and backend think that they're running on the same origin.
And here's how we do that.
We need to open up our front end
and we need to set up something called a proxy.
So here's how to do that in Vue.
Inside the root directory of our front end,
we're going to create a new file called vue.config.js.
And then inside here, we're going to add the following code.
We're just going to say module.exports equals.
And this object that we're exporting
is going to have a dev server property.
And that dev server property
is going to have its own property called proxy.
And what we're going to do is put the URL that the server,
the backend is currently running on here.
So we're going to say HTTP//localhost:8000.
And what we just did here
again, this might look fairly new to a lot of you.
What we just put here, we'll tell our front end
that all requests going to local hosts 8000
should be treated as if they were going
to the same origin that our front end app was running on.
Don't worry if that doesn't make complete sense,
just know that this will work.
And now that we've done that,
there's just one more thing we need to do.
We need to go into productspage.vue
and we need to actually delete
this HTTP local host 8000 thing
in front of /api/projects.
You see now that our front end thinks
that it's running on the same sort of origin as our backend,
what we can do is we can simply make our requests
using the basic path
without the whole HTTP local host 8000 thing
in front of it.
And now that we've done that and we run our front end,
we should be able to open up our front end
and see that it's actually loading the data for us.
So now we see that the products page
is indeed loading the data, which is great.
However, we now run into a new problem
and that is that the images aren't working.
So in order to make this happen,
what we need to do is we need to make a few changes
to our backend.
Basically, what we need to do is we need to tell
our backend server how to serve the images
in our assets folder when the front end requests them.
And this is a pretty simple process.
So let's go over to our backend and open up server.js.
And just as a side note here,
we can now delete all of this fake data here
just cause I'm tired of scrolling up and down past it.
It's all stored in our database now.
So now what we can do is we're going to start off
by saying import path from path.
And then in order to serve the assets
inside this assets folder here,
what we're going to do is add something right underneath
app.use bodyparser json.
That says app.use.
And then whatever URL we want the front end
to be able to request these images on.
We're just going to use images here.
And then we say express.static, path.join
and then __dirname../assets.
So basically what we're saying here with this
is that we want to serve the assets directory
whenever a request is received on this slash images route.
And let's make sure that worked.
It looks like the server is listening correctly.
So now if we go back to our front end
and try and reload, we should see
that all of the images successfully load from our backend.