Detailed process record of node. js basic API building server, and node. js basic api Building

Detailed process record of node. js basic API building server, and node. js basic api Building

Preface

After getting used to using the express framework, jade template engine and other ready-made tools to write code, many people will gradually become unfamiliar with the basic NodeJS API. This article will introduce in detail how to use the APIS provided by the http, fs, path, and url modules of NodeJS to build a simple web server. As a review of NodeJS, it also provides a reference for developers who are new to NodeJS. The projects set up in this article will not use backend frameworks such as express. They will only use the most basic NodeJS API, code and explain according to the MVC design pattern, and exchange opinions. The Source Code address is as follows. We recommend that you download the source code, view the blog, and compare the source code to quickly understand the entire process. Https://github.com/hongchh/node-example

Project Introduction

There is a simple grocery store website that includes a home index and a details page detail. The home page displays information about all foods in a grocery store, including food pictures, names, and prices, as shown in.

Clicking on any item will jump to the corresponding details page, including food pictures, names, prices, and descriptions, as shown in.

Project Structure

The file structure of the project is as follows.

Node-example | -- data (folder for storing project data) | -- detail. json (storing food details data) | -- foods. json (storing home food data) | -- model (data model that provides access and operation data services) | -- detail. js (detailed data access module) | -- foods. js (Food Data Access Module) | -- public (static files such as css, js, and images are stored) | -- css (folder for storing css files) | -- img (folder for storing images) | -- js (folder for storing js files) | -- route (route, Controller) | -- api (route for processing common requests, or controller) | -- static (route for processing static file requests, or controller) | -- views (view, that is, user interface) | --index.html (homepage Interface) | --detail.html (details page) | -- server. js (server startup file) | -- package. json (project package information) | -- README. md (project information and startup method description)

This article only explains programming on the server side, so the implementation process of the two simple interfaces will not be too long here. If you have already completed Front-End Interface Programming on your own, the following describes server-side programming.

Compiling Server

Server. js needs to create and start the server, and forward the request to the corresponding route for processing. The detailed code is as follows (Suppose we already have a route that works normally. Here we use the Top-Down idea. We write Down one layer at a time and focus on solving problems at each layer ). The regular expression is used in the code to determine whether the client request is in a request for a static file. If yes, the request is sent to the static route for processing the static file request, otherwise, it is sent to the router api of the common request for processing. A common request uses get or post based on its HTTP method. Finally, set the server to listen to port 3000, And the server. js code is complete.

Var http = require ('http'); var url = require ('url'); var api = require ('. /route/api '); var static = require ('. /route/static '); // matches the regular expression of the static folder path, used to determine whether the request is a static file request var staticExp = // public \/(img | css | js) \/[a-z] * \. (jpg | png | gif | css | js)/; http. createServer (req, res) => {var pathname = url. parse (req. url ). pathname; if (staticExp. test (pathname) {// submit the static file request to static for static processing. get (_ dirname + pathname, res);} else if (req. method = 'post') {// process the common POST request api. post (req, res);} else {// process common get request api. get (req, res );}}). listen (3000); console. log ('[Server Info] Start server at http: // localhost: 3000 /');

Write a route

In simple terms, I first write the static route for processing static file requests. The logic of this route is very simple. As long as the client wants to request a static file (css/js/image), it will send the requested file to the client. The Code is as follows. Note the following: first, the client must determine whether the file exists before sending it to the client, if it does not exist, perform other processing (I have not done any other processing here ). Second, when the file is returned to the client, you need to set the MIME type of the http header so that the client can identify the file type and use it correctly after the file is sent. Finally, multimedia files such as images and audios must be read and written in binary format. Therefore, remember to add "binary" when responding to images ".

Var fs = require ('fs'); var path = require ('path'); var MIME = {}; MIME [". css "] =" text/css "; MIME [". js "] =" text/js "; MIME [". jpg "] =" image/jpeg "; MIME [". jpeg "] =" image/jpeg "; MIME [". png "] =" image/png "; MIME [". gif "] =" image/gif "; function get (pathname, res) {if (fs. existsSync (pathname) {var extname = path. extname (pathname); res. writeHead (200, {'content-type': MIME [extname]}); fs. readFile (pathname, (err, data) =>{ if (err) {console. log (err); res. end ();} else {if (isImage (extname) {res. end (data, "binary"); // binary} else {res. end (data. toString () ;}}}) ;}// determine whether it is an image function isImage (extname) based on the extended name) {if (extname = '.jpg '| extname = '.jpeg' | extname = '.png '| extname = '.gif') {return true ;} return false;} // interface module provided to other modules. exports = {get: get };

After static writing is complete, write the api below. The api must respond to the corresponding content based on the request URL. For example, when a client requests "/", it responds to the homepage of its website and requests "/detail? Id = 0 "to respond to the details page of the food whose id is 0. If the client requests a URL that does not exist, a 404 response is returned, indicating that no URL is found. The Code is as follows. Here I have divided two handler, and there is no post operation in this project, so only getHandler will use it. The purpose of postHanlder is to briefly describe how to write a route for processing client post requests.

Taking getHanlder ['/'] as an example, when the client requests "/response, it is not as simple as returning index.html to the server. Imagine that a food store may provide different dishes every day, or because of seasonal issues, the dishes of each season are different, so the dishes displayed on the home page of our website may also change. Therefore, we need to dynamically render the content of the Home Page Based on the home page data stored in the database. I wrote idnex.html as a template. In order not to apply to jade and other template engines, I used a tag in html in the form of "{foodMenu}". After reading the template, you can use a simple string operation to replace tags with the content that we need to dynamically render to achieve the purpose of dynamically rendering HTML.

A route other than a static file, or controller, usually contains the business logic, that is, the business logic is generally completed at this layer. As shown in the figure above, the homepage is dynamically rendered based on the database content, or you will see data verification for login registration in other scenarios, after successful logon, the client is redirected to the corresponding user interface and other business logic are implemented at this layer.

Var fs = require ('fs'); var url = require ('url'); var querystring = require ('querystring'); var foods = require ('.. /model/foods ') (); var detail = require ('.. /model/detail ') (); var getHandler = {}; var postHandler = {}; // process the request to the home page getHandler ['/'] = function (req, res) {var foodMenu = ""; // assemble the homepage data var food = foods. getAllFoods (); for (var I = 0; I <food. length; ++ I) {foodMenu + = '<div class = "food-card" id = "' + food [I]. id + '">  
Finally, let's talk about the post method processing process, although the post method is not used in this project. The main difference between the post method and the get method is that the post method not only sends http header information, but also carries the data submitted by the client. When receiving a post request, you need to read the data and read the data in a simple way. You only need to set the listener for the request. The "data" event is triggered when the request object receives the data. Therefore, set a listener for this event to save the data when it receives the data. After receiving all the post data of a request, the "end" event is triggered. Therefore, set a listener for this event, this allows you to perform operations on the submitted data only after receiving the complete data.
Compile a data model
Let's talk about the homepage first. We can see that the data on the home page includes the pictures, names, and prices of the displayed dishes. In addition, we need to jump to the corresponding details page based on different dishes, therefore, an id is also needed as the identifier. Finally, you can get the following data model (I use json to describe the model below, you can also take other measures ). This data model describes the data model of the home page, that is, there are many foods on the home page, represented by arrays, each data element represents a food. Each food item includes four items: id, image, name, and price. The value of id is a number, which is a unique identifier. An image is a string used to specify the image address. The value of name is a string, indicating the name of the food, and the value of price is a string, indicating the price of the food.
{ "foods": [{ "id": "number", "image": "string", "name": "string", "price": "string" }]}
The purpose of designing a data model is to facilitate the design of pseudo data and operations on data. Generally, we need to design a data model (Data Structure) before programming ), in this way, the program can be written smoothly, and many interfaces can be standardized. Although I put the model step at the end here, the model here only writes the data access module, which does not mean that the data model is designed at the end, it's just because the idea I'm going to explain here is to customize the data model design.
The following uses foods. js as an example to explain how to compile a model. The Code is as follows. Because there is no database here (it is troublesome for new users to talk about the process, this article will not use the database to store data), I will store all the data using json files, such as foods. json stores the data of all foods on the home page. The foods model provides external interfaces to support operations such as accessing food data on the home page and modifying food data (four operations such as adding, deleting, querying, and modifying CRUD in the database ). This project only needs to query all videos. Therefore, I have implemented a simple method to obtain all foods, in addition, it comes with a method for getting a single food by id (this method is only an example and is not used ).
Var fs = require ('fs'); module. exports = function () {// read the data in the file and convert it into an object to use var data = JSON. parse (fs. readFileSync (_ dirname + '/.. /data/foods. json '); var foods = {getAllFoods: getAllFoods, getFood: getFood}; // obtain all foods function getAllFoods () {return data. foods;} // obtain the function getFood (id) {for (var I = 0; I <data. foods. length; ++ I) {if (data. foods [I]. id = id) return data. foods [I] ;}} return foods ;};
The modules in the model generally provide data operation services for controllers to use. Therefore, at this layer, we mainly focus on implementing data CRUD operations. There is basically no business logic.
Based on the concept of writing foods, we will write the detail, and the entire project will be completed. Is it quite simple. Go to the project directory and run node server. js to start the server.

Finally, after reading the entire project, you can probably find that the entire writing process, or the division of each module, seems to follow a specific pattern, in fact, I wrote this project according to the MVC model. Recently, MVC is often used in another course. I think it is a good design model, if you are interested, please study it. Of course, I cannot say that the code I write fully complies with the MVC specifications. After all, everyone may have such discrepancies. This article is for reference only. You are welcome to exchange suggestions. Thank you!
The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!