- [Instructor] Express comes
with a few additional built-in middleware functions
that can be helpful in the construction of applications.
Currently, there are three built-in
middleware functions with Express.
Static, JSON, and URL-encoded.
Express.static serves static assets,
including files and images.
If you recall from a previous video,
we use this method to serve images in our application.
The next is express.json.
It parses incoming requests with JSON payloads
and is based on body parser.
Body parser is a Node.js parsing middleware.
The final built-in middleware function
is express.urlencoded, which is similar
to express.json, except it parses incoming requests
with URL-encoded payloads.
It is also based on body parser.
Before we move on, let's take a look
at an example of JSON versus URL-encoded payloads
to make sure we understand the difference.
You can see the both examples contain the same information
but in two different formats.
At this point, JSON should look familiar to you.
We have our keys and values within an object.
The URL-encoded version is assembled in a single block
with the keys and values separated by an equals sign.
Now, that we have a better understanding
of the differences between the two,
let's head to our editor and incorporate
these middleware functions into our application.
If your terminal is not open, make sure
that you go ahead and open it now.
Let's get started right below
where we used express.static previously,
and we're just going to add a few lines there.
We'll start with app.use.
All right, use method, and then we're going to pass
in express with the JSON method applied.
All right and then save that.
So with this we're specifying
that we want our requests to be JSON.
The next thing we'll want to do is create a post route
that we can use to illustrate how express.json
and express.urlencoded work.
So actually, before we do that, I'm just going to add
a comment here, and we're using express.json
and express.urlencoded and save.
Okay, so we're going to create a new post route,
and I'm just going to scroll down a little bit,
and we're going to add that below our GET at the root.
So I'm going to add a comment here.
So this is going to be a POST, and this is going to be tied
to express.json and express.urlencoded.
Great.
All right, so the path for this is going to be item.
So because this is a post, we'll start with app.post,
and our path, we said it's going to be items.
So it's /item, and then we need to set up our function
and add in our request and response
and then get our arrow function set up as well.
In this instance, we're just going to log out
the request body and send that to the client.
Because this end point is a post,
we're going to need to use postman to test,
but let's go ahead and get this set up here.
So we're going to log out.
Oops, console.log, requests.body.
All right, so we'll log that out,
and then we're also going to send
the request body to the client.
So we do that using response.send,
and then we're just passing in
the request body as the argument there.
All right, so now let's go ahead
and transition to postman and test.
In postman, let's go ahead and open a new tab,
and we can type localhost3000/item,
and then we need to set the HTTP method to POST.
Now, we have a few additional steps
that we're going to need to implement here in postman
to see our express.json in action.
The first is to set the content type
in the headers of the end point call.
So in order to do this, we'll click on Headers,
which is right below that URL bar,
and when we click in there,
you'll see a KEY and VALUE field.
Both of these fields will auto-populate,
meaning if you start to type in something,
you'll get a list of different options.
So that's super helpful.
So we're going to click into KEY and we're going
to start typing content and we see Content Type appears.
So that's what we want to select, Content Type,
and then for the value, we want to use JSON,
and the value that corresponds
to this will be application/json,
but if I go ahead and type json,
we'll see that that pops up as the first option.
Before we send the request, we need to set up the body.
So to the right of the headers, you'll see Body,
and you can go ahead and click there,
and then you'll see a couple options here,
none, form data, x-www-form-urlencoded,
raw, binary and GraphQL.
We want to select raw.
On the far right, you should see that this is set to JSON.
If not, click this dropdown menu and make sure
that it's set appropriately.
All right, now, we're going to click into this space,
where you see there's the number one,
and we're going to supply a body to our route.
Since our route is item, let's just set the key to item.
So our body is going to be an object.
So we need our curly braces and with the key item.
So item's going to be in quotation marks and then a colon,
and let's give this item value a value of rollerblades.
That sounds fun. All right?
And now we can send our request.
So in the body of postman, you should see exactly
what we just sent via the raw body,
which is our object here with the key item
and the value rollerblades.
Transitioning back to our editor
where we have our terminal open,
you can also see that rollerblades was logged
on the server side as well, and that comes
from that console log of request.body.
So the console log request.body provided that to us
in our terminal when we hit the end point item
with a post HTTP method.
Now, let's transition to urlencoded.
We're going to scroll back up to where
we have our app.use with express.json,
and we can go ahead and comment that out for now,
and we're going to replace that with app.use.
So just like we started with before,
and we're going to say express
and this time, .urlencoded, all right?
Now, here, urlencoded also takes an argument,
and we want to pass this argument extended true
because it will give us more of a JSON-like experience.
So inside the parentheses, we can create a new object
and it's going to have the key of extended,
and you'll see that auto-completed for me there,
and that's going to be set to true.
All right, so go ahead and save that
and additionally, this will prevent us
from getting any errors with our code as well.
So now, we'll need to head back to postman,
make a few adjustments, and then we're
going to send the request again using the urlencoded.
So the first thing that we'll need
to change here is the content type.
So we need to go back to our Headers menu
and in the VALUE field, we need to clear this out.
So the content type key is going to stay
but now, we're going to change the value of the content type.
So if you clear that out and start typing url,
you should see this, application/x-www-form-urlencoded,
and that's what you'll need to select,
then we're going to click into the body,
and we're going to change the raw to that same value
that we just selected in the headers,
this x www-form-urlencoded.
We're going to use the same data here
but in a different way.
So here it prompts you for a key, which instead
of typing the object out and adding the quotation marks
to indicate that it's a key,
we can just simply type item here
and then for our value, we will do the same thing
as we did before, and we'll provide a value of rollerblades.
So when we hit send, we're going to see the exact same body.
It just looks a little bit different.
If you remember, from the previous example,
they looked identical, but since we're using
the urlencoded value, it's a little bit different
in terms of how we pass the body,
but not how the body is received.
So now, let's head back to our editor
and see what that looks like in our terminal.
If we take a look at our terminal, we see
that we also get this logged out on the server side,
as we would have expected from our previous example.