Web Front-end
JS Tutorial
How to use nodejs server to read HTML files and render them to the front end
How to use nodejs server to read HTML files and render them to the front end
This time I will show you how to use the nodejs server to read HTML files and render them to the front end, and how to use the nodejs server to read HTML files and render them to the front end. What are the precautions?The following is a practical case, let's go together take a look.
1. Simply implement three backup pages respectively.
Code snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 p), 可以使用 margin: auto;</p>
<p class="center">
<p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</p>
</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>
<p class ="center" >404 Not Fount</p>
</body>
</html>2. Modify the created nodejs server page to make different response pages to requests from different addresses.
Add the file reading code in the url address judgment to read the defined html page.
DeclarationFile systemObject:
// 声明文件操作系统对象
var fs = require('fs');Realize file content reading and rendering to the page
if(url ==='/'){
//response.writeHead(响应状态码，响应头对象): 发送一个响应头给请求。
response.writeHead(200,{'Content-Type':'text/html'})
// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
fs.readFile('./practice/login.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}Complete code:
/**
1.使用 HTTP 服务器与客户端交互，需要 require('http')。
声明http协议
*/
var http = require('http');
// 声明文件操作系统对象
var fs = require('fs');
/**
2.获取服务器对象
1.通过 http.createServer([requestListener]) 创建一个服务
requestListener <Function>
返回: <http.Server>
返回一个新建的 http.Server 实例。
对于服务端来说，主要做三件事：
1.接受客户端发出的请求。
2.处理客户端发来的请求。
3.向客户端发送响应。
*/
var server = http.createServer();
/**
3.声明端口号，开启服务。
server.listen([port][, host][, backlog][, callback])
port <number> ：端口号
host <string> ：主机ip
backlog <number> server.listen() 函数的通用参数
callback <Function> server.listen() 函数的通用参数
Returns: <net.Server>
启动一个TCP服务监听输入的port和host。
如果port省略或是0，系统会随意分配一个在'listening'事件触发后能被server.address().port检索的无用端口。
如果host省略，如果IPv6可用，服务器将会接收基于unspecified IPv6 address (::)的连接，否则接收基于unspecified IPv4 address (0.0.0.0)的连接
*/
server.listen(9001, function(){
console.log('服务器正在端口号：9001上运行......');
})
/**
4.给server 实例对象添加request请求事件，该请求事件是所有请求的入口。
任何请求都会触发改事件，然后执行事件对应的处理函数。
server.on('request',function(){
console.log('收到客户端发出的请求.......');
});
*/
/**
5.设置请求处理函数。
请求回调处理函数需要接收两个参数。
request ：request是一个请求对象，可以拿到当前浏览器请求的一些信息。
eg：请求路径，请求方法等
response： response是一个响应对象，可以用来给请求发送响应。
*/
server.on('request',function(request,response){
var url = request.url;
if(url ==='/'){
//response.writeHead(响应状态码，响应头对象): 发送一个响应头给请求。
response.writeHead(200,{'Content-Type':'text/html'})
// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
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'});
// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
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'});
// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
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'});
// 如果url=‘/' ,读取指定文件下的html文件，渲染到页面。
fs.readFile('./practice/notFount.html','utf-8',function(err,data){
if(err){
throw err ;
}
response.end(data);
});
}
});
Final effect:
Open the nodejs server and enter in the address bar: 127.0.0.0.1:9001 or 127.0.0.0.1:9001/login
Enter in the address bar: 127.0.0.0.1:9001/index
Enter in the address bar: 127.0.0.0.1: 9001/Other content
# I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
How to build a webpack react development environment
How to build a React family bucket environment
The above is the detailed content of How to use nodejs server to read HTML files and render them to the front end. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is nodejs a backend framework?
Apr 21, 2024 am 05:09 AM
Node.js can be used as a backend framework as it offers features such as high performance, scalability, cross-platform support, rich ecosystem, and ease of development.
How to connect nodejs to mysql database
Apr 21, 2024 am 06:13 AM
To connect to a MySQL database, you need to follow these steps: Install the mysql2 driver. Use mysql2.createConnection() to create a connection object that contains the host address, port, username, password, and database name. Use connection.query() to perform queries. Finally use connection.end() to end the connection.
What are the global variables in nodejs
Apr 21, 2024 am 04:54 AM
The following global variables exist in Node.js: Global object: global Core module: process, console, require Runtime environment variables: __dirname, __filename, __line, __column Constants: undefined, null, NaN, Infinity, -Infinity
What is the difference between npm and npm.cmd files in the nodejs installation directory?
Apr 21, 2024 am 05:18 AM
There are two npm-related files in the Node.js installation directory: npm and npm.cmd. The differences are as follows: different extensions: npm is an executable file, and npm.cmd is a command window shortcut. Windows users: npm.cmd can be used from the command prompt, npm can only be run from the command line. Compatibility: npm.cmd is specific to Windows systems, npm is available cross-platform. Usage recommendations: Windows users use npm.cmd, other operating systems use npm.
Is there a big difference between nodejs and java?
Apr 21, 2024 am 06:12 AM
The main differences between Node.js and Java are design and features: Event-driven vs. thread-driven: Node.js is event-driven and Java is thread-driven. Single-threaded vs. multi-threaded: Node.js uses a single-threaded event loop, and Java uses a multi-threaded architecture. Runtime environment: Node.js runs on the V8 JavaScript engine, while Java runs on the JVM. Syntax: Node.js uses JavaScript syntax, while Java uses Java syntax. Purpose: Node.js is suitable for I/O-intensive tasks, while Java is suitable for large enterprise applications.
Is nodejs a back-end development language?
Apr 21, 2024 am 05:09 AM
Yes, Node.js is a backend development language. It is used for back-end development, including handling server-side business logic, managing database connections, and providing APIs.
Can nodejs write front-end?
Apr 21, 2024 am 05:00 AM
Yes, Node.js can be used for front-end development, and key advantages include high performance, rich ecosystem, and cross-platform compatibility. Considerations to consider are learning curve, tool support, and small community size.
Which one to choose between nodejs and java?
Apr 21, 2024 am 04:40 AM
Node.js and Java each have their pros and cons in web development, and the choice depends on project requirements. Node.js excels in real-time applications, rapid development, and microservices architecture, while Java excels in enterprise-grade support, performance, and security.
