Familiarize yourself with Node.js: Simple web server build

Tram Ho

Hello friends! I continue with the series of articles to familiarize yourself with Node.js. Today, I will show you how to build a simple webserver with Node.js. And also conclude the series of familiarization with Node.js here. I will continue with the new series on using the Express web framework.

1. Building a simple web server:

I created the app.js module. I use the HTTP module to create a simple server.

Run the app.js module in the terminal and open the browser and enter the address localhost: 3000 , we will see the words Hello, I’m a Node js Server . Thus, I succeeded in creating a simple web server already. :>
Now, I will create an html file to return to the client instead of a plain-text as above. Create the index.html file, at the same level as app.js , and edit the content in the response as follows:

Basically, the treatment is not much different. However, here instead of content-type: text / plain-text will be text / html . At the same time, I read the content of the html file and return the result in the response.
Turn off and run app.js again, reload the localhost: 3000 page in the browser, now we have an interface with the content returned from the above html file. Next, I will upgrade to a simple level a bit complicated and make a web application to look up Vietnamese vehicle variables.

2. Building a simple web app “Look up Vietnamese license plates”:

To be more realistic, I built a simple web server to look up Vietnamese license plates. First of all, I also created the app.js module, index.html file (interface), file vehicle_plates.json .
The interface uses bootstrap 4, jquery 3.4.1, select2.js to perform functions on the main interface. The interface code is as follows:

After finishing the interface, I proceed to handle the server. Code module app.js :

The structure of the web app is as follows:

  • Regarding routes: Will return to the main interface if the request to root “/” or “/index.html”. 2 routes used to handle ajax client request get information about cities to select on select2 and search for license plate information according to the city selected in the client. And a route for taking every request is outside the routes (stated). In routes, I did not perform a check method called GET / POST / … to simplify the application.
  • About functions:
    • Including function of processing id for json data, to facilitate the search of license plate.
    • The function handles the params passed by the ajax POST request.
    • Function handles searching license plates by id of the selected city.
      Launch the app and we have a simple web app to look up your license plate.

3. Conclusion

Thank you for following the series of articles getting acquainted with Node.js during the past time.
Through this series of introductory articles, you will gain some knowledge before stepping into the series with Web Framework Express for Node.js.

Posts inevitable mistakes, hope to receive your comments to improve the article. Thank you.

Share the news now

Source : Viblo