Read the HTML file and render it to the page through the nodejs server

1. Simple implementation of three alternate pages respectively.

login.html page
index.html page
code segment:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
< title >Rookie Tutorial (runoob.com) </ title >
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
< h2 >Elements are centered </ h2 >
< p > To center block-level elements (such as div ) horizontally, you can use margin: auto; </ p >
<div class="center">
< p > < b >Note: </ b >Using margin:auto is not compatible with IE8 unless !DOCTYPE is declared. </ p >
</div>
</body>
</html>

notFount.html page

<!DOCTYPE HTML>
<html>
<head>
<script>
</script>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
color:red;
}
</style>
</head>
<body>
<div class ="center" >404 Not Fount</div>
</body>
</html>

2. Modify the created nodejs server page and make different response pages for requests from different addresses.

Add the file reading code in the url address judgment to realize the reading of the defined html page.
Declare the filesystem object:

// Declare the file OS object
var fs = require('fs');

Implement file content reading and rendering to the page

if(url ==='/'){
//response.writeHead(response status code, response header object): Send a response header to the request.
response.writeHead(200,{'Content-Type':'text/html'})
// If url='/', read the html file under the specified file and render it to the page.
fs.readFile('./practice/login.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}

Full code:

/**
1. To interact with the client using the HTTP server, require('http') is required.
declare http protocol
*/
var http = require('http');
// Declare the file OS object
var fs = require('fs');
/**
2. Get the server object
1. Create a service through http.createServer([requestListener])
requestListener <Function>
Returns: < http.Server >
Returns a newly created http.Server instance.
For the server, there are three main things to do:
1. Accept the request from the client.
2. Process the request sent by the client.
3. Send a response to the client.
*/
var server = http.createServer();
/**
3. Declare the port number and start the service.
server.listen([port][, host][, backlog][, callback])
port < number > : port number
host < string > : host ip
Generic parameters for the backlog < number > server.listen() function
callback < Function > Generic parameter for server.listen() function
Returns: <net.Server>
Start a TCP service listening on the input port and host.
If port is omitted or 0, the system will arbitrarily assign an unused port that can be retrieved by server.address().port after the 'listening' event fires.
If host is omitted, the server will accept connections based on the unspecified IPv6 address (::) if IPv6 is available, otherwise it will accept connections based on the unspecified IPv4 address (0.0.0.0)
*/
server.listen(9001, function(){
console.log('The server is running on port number: 9001...');
})
/**
4. Add a request request event to the server instance object, which is the entry point for all requests.
Any request will trigger the change event, and then execute the handler function corresponding to the event.
server.on('request',function(){
console.log('Received a request from the client......');
});
*/
/**
5. Set the request processing function.
The request callback handler needs to receive two parameters.
request : request is a request object that can get some information about the current browser request.
eg: request path, request method, etc.
response: response is a response object that can be used to send a response to the request.
*/
server.on('request',function(request,response){
var url = request.url;
if(url ==='/'){
//response.writeHead(response status code, response header object): Send a response header to the request.
response.writeHead(200,{'Content-Type':'text/html'})
// If url='/', read the html file under the specified file and render it to the page.
fs.readFile('./practice/login.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}else if(url === '/login'){
response.writeHead(200,{'Content-Type':'text/html'});
// If url='/', read the html file under the specified file and render it to the page.
fs.readFile('./practice/login.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}else if(url === '/index'){
response.writeHead(200,{'Content-Type':'text/html'});
// If url='/', read the html file under the specified file and render it to the page.
fs.readFile('./practice/index.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}else{
response.writeHead(200,{'Content-Type':'text/html'});
// If url='/', read the html file under the specified file and render it to the page.
fs.readFile('./practice/notFount.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}
});

The final effect:
Start the nodejs server and enter in the address bar: 127.0.0.0.1:9001 or 127.0.0.0.1:9001/login

In the address bar enter: 127.0.0.0.1:9001/index

In the address bar enter: 127.0.0.0.1:9001/something else

Read the HTML file and render it to the page through the nodejs server

Guess you like