Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
A closer look at Express's Request object.
HTML Forms
-
Sending form data (MDN)
- HTML forms (MDN general form page)
Documentation
What body-parser
Does Under the Hood
What is body-parser doing? In case you're curious, here's a little code that reads the body of an incoming request and logs it to the console. This is just a flavor of how using body-parser is making your life easier!
let bodyString = ''
req.on('data', chunk => bodyString += chunk.toString());
req.on('end', () => {
console.log(bodyString);
});
Note that even after bodyString
has been read completely, it still needs to be turned from a string into data your application can use, all of which is taken care of by body-parser.
-
0:00
Remember when we wrote out first route by hand and had to use a request and
-
0:05
response object for the route handler.
-
0:08
We've been using the response object to return a response to the client.
-
0:12
But we haven't been using the request object yet, apart from declaring it.
-
0:18
Let's look at the express documentation for the request object.
-
0:22
There are quite a few properties that you can access on the request.
-
0:28
The one we're most interested in is the body property.
-
0:33
This is where our form response will end up.
-
0:36
Notice though, that by default it is undefined.
-
0:41
To put the form responses into the body, we'll need what is called Middleware.
-
0:47
Middleware is basically some code that fits in the middle of a request or
-
0:51
a response.
-
0:53
Middleware does something to the incoming data and
-
0:56
hands the result of to the rest of your application.
-
1:00
We'll look more deeply at Middleware later in this course.
-
1:04
But we don't really need to know a lot about it yet.
-
1:06
I will show you how to install some middleware in a moment.
-
1:10
First, though,
-
1:11
let's use the console to take a look at the request object more closely.
-
1:16
In the app.js file,
-
1:19
I'll add a line in the post route to print out the request object to the console.
-
1:25
I'll save it and then go back to the browser to create a new request.
-
1:31
Our code will run.
-
1:34
I don't need a name right now, and I'll click on Submit.
-
1:39
Moving to the console where Express is running,
-
1:41
you can see that the request object includes a lot of information.
-
1:46
We will look too closely at the request.
-
1:48
I just wanted you to get an appreciation for
-
1:51
the amount of work expressed as to simplify our job as developers.
-
1:56
Most of the time, we don't need many of these properties.
-
1:58
We'll just access a select few.
-
2:02
I'll clear this screen, and then we'll switch back to the app.js file.
-
2:06
I'm just going to examine the body property now.
-
2:11
If I submit the form now using my name And switch to the console,
-
2:19
as you can see, I get undefined, just as the documents promised.
-
2:25
Let's install the middleware, called for by the docs.
-
2:30
It's called body parser and it will process the incoming form submission data
-
2:34
into a format that's easier for our program to read.
-
2:39
I'll go to the terminal and then I'll type,
-
2:45
npm install body-parser.
-
2:51
When that's done, I can require it in my app.js file at the top.
-
3:09
Now, we'll tell Express to use it.
-
3:12
Body-parser contains several parses, the different ways the clients can send data.
-
3:19
HTML forms normally encode the data they send the same way URLs do.
-
3:25
So, we'll need to use the urlencode parser.
-
3:32
We'll pass in an object, turning
-
3:37
off the parser's extended option.
-
3:46
Don“t worry too much about this line of code.
-
3:49
To be honest,
-
3:50
I have to look this up everytime I need to include it in my Express applications.
-
3:56
I've included more information about how forms and data and
-
3:59
how body-parser works in the teacher's notes.
-
4:03
Now, let's submit a name.
-
4:06
In the console, you can see the body property has now a username property.
-
4:14
Our app is now able to understand the information it's getting from our form.
-
4:19
Next, we'll use that information to send something meaningful back to the client.
-
4:24
While we do this, let's take a closer look at the response objects in the next video.
You need to sign up for Treehouse in order to download course files.
Sign up