Express Basic: F1Tours Project – Circuit1- Overview of F1Tours – Handling GET and POST requests

Tram Ho

Hi, guys. After the start with “Hello World” for the series on Express was really boring. I will continue the series by incorporating a project called “F1Tours” along with the knowledge of Express. That will help you more easily visualize.
Note: The article uses F1 Schedule information from website formula1.com for the purpose of sharing knowledge articles for non-commercial purposes. This article is not responsible for any commercial use of the content from the article.
Just a little bit of note like that, because when I use information from their website, I am not sure about copyright information. Please mind it. Let’s get started with F1Tours!

1.Introduction of Project F1Tours:

Due to the covid-19 epidemic, the F1 race scheduled to be held in Hanoi did not take place. Pity! Not only that, some other races in the tournament system must also be postponed. So I decided to build F1Tours project to provide some information from this tournament such as: Racing in countries, information about the race.

  • In the process of implementing the project, I will also introduce you to the handling techniques in the article. Technologies used include: npm v6.14.4, Express v4.17.1. In the course of writing my article, I will update the technology used.
  • The project presentation is also from the beginning, then will be optimized gradually through each stage.
  • This project only focuses on processing api and not views. Therefore, I will use curl to call api, or you can use other applications like postman to call api.

2. Initialize the project and handle GET and POST requests in Express:

First, I created a project folder with the name F1Tours in the workplace. Then go to the project init F1Tours directory with npm init . Next, I proceed to install Express dependencies, and devDependencies nodemon . Initially, I only used that.
Next, I created the app.js file as the launch module of the project. In app.js , I declare basic to use Express as follows:

Next, I created the data directory, and the file f1tours.json (this file is not public) with some initial races. This file will first be considered the db used to access all F1-tours and record the added races.
In this section, I will create api with route “/ api / f1 / tours” to get all F1-tour information from existing data and create new race information, and “/ api / f1 / tours / : id “ to get information about a specific F1 race.
Now go through the terminal, go to the correct F1Tours project folder , then open another terminal tab. Thus, I will use 2 terminal tabs, one to use curl to call api, one to run the server using nodemon . Running the server with nodemon will help me not to restart the server every time I change the code.

Get all F1 race information in the database:

In app.js , I fixed the following:

I will read the information from db f1tours.json and parse about JSON format to return to the client. Then, handle GET request for route / api / f1 / tours by simply declaring app.get .
The basic structure when using app.get usually includes: the path will handle or the regexp of the path will handle, and the callback includes 2 arguments, req (request) and res (response) to handle the request and the response content will return.
Here, I did not handle anything in req , the res will return status 200 , and json res has data on all tours from the db.
Now I use curl to test this api to see how it works. On the terminal I execute the command: curl -H “Content-Type: application / json” -v localhost: 3000 / api / f1 / tours | json_pp . You can refer to curl to better understand the statement. The json_pp part is just to format the json response for easy viewing. And the result, I have the information:
So we have all the information of the F1 stage from the racing db already.

Create new F1 race information:

To create new F1 race information, I use POST request for route “/ api / f1 / tours”. Inside, my app.js continues to handle the following:

Similar to the GET request handle , the POST request handle will be used by declaring app.post . The basic components are similar to GET . Here I will create a new F1 tour, then push into the existing tours array, and record it into f1tours.json . Finally returns the data json of the new F1 tour to the client.
I omitted validating the input. I need to enter the correct input to create a new F1-Tour in the right format, otherwise I can enter anything. =)).
Here is a piece of code to note is req.body . The use of req.body is thanks to the use of middlewave express.json () . Without this middlewave, when we use it, the result will be undefined , and the program will fail at the server.
Now go back to the terminal. Use the curl command with the following content:

And we will have the result:

As such, I have created information for a new F1 race.

See information on an F1 race:

To view information about an F1 race I will handle GET requests for route “/ api / f1 / tours /: id” . In app.js , I handle the following:

Here, I use req.params to get params information. That is, I take the : id , I have declared in the route to handle. I will find F1-Tour in the db, if any then return F1-Tour information otherwise return “Invalid ID”.
Now go through the terminal and enjoy the fruits. Use the curl command:

Will produce the following result:

3. The next part:

The next section, I will continue to handle the next issues such as updating and deleting F1-Tour information. I paused the first race here.

Thank you for reading my article.
The article cannot avoid the shortcomings, hope to receive your comments to improve the article.
Reference source:
Expressjs.com
Udemy.com
– And some other sources

Share the news now

Source : Viblo