如何使用nodejs 服务器读取HTML文件渲染至前端-js教程-PHP中文网

首页

web前端

js教程

如何使用nodejs 服务器读取HTML文件渲染至前端

php中世界最好的语言

May 28, 2018 pm 03:50 PM

javascript nodejs 服务器

这次给大家带来如何使用nodejs 服务器读取HTML文件渲染至前端，使用nodejs 服务器读取HTML文件渲染至前端的注意事项有哪些，下面就是实战案例，一起来看一下。

1.分别简单实现三个备用页面。

代码片段：

<!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页面

<!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.修改创建的nodejs 服务器页面，对不同地址的请求做出不同的响应页面。

在url地址判断中添加，文件读取代码，以实现读取定义的html页面。

声明文件系统对象：

1 2	`// 声明文件操作系统对象` `var` `fs =` `require('fs');`

登录后复制

实现文件内容读取并渲染到页面

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); 
  }); 
}

登录后复制

完整代码：

100

101

102

103

/**
     
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);
        });
    }
     
}); 

登录后复制

最终实现效果：

开启nodejs服务器，在地址栏中输入：127.0.0.0.1：9001或127.0.0.0.1：9001/login

在地址栏中输入：127.0.0.0.1：9001/index

在地址栏中输入：127.0.0.0.1：9001/其他内容

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7814

Java教程

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

显示更多

Related knowledge

nodejs是后端框架吗 Apr 21, 2024 am 05:09 AM

Node.js 可作为后端框架使用，因为它提供高性能、可扩展性、跨平台支持、丰富的生态系统和易于开发等功能。

nodejs怎么连接mysql数据库 Apr 21, 2024 am 06:13 AM

要连接 MySQL 数据库，需要遵循以下步骤：安装 mysql2 驱动程序。使用 mysql2.createConnection() 创建连接对象，其中包含主机地址、端口、用户名、密码和数据库名称。使用 connection.query() 执行查询。最后使用 connection.end() 结束连接。

nodejs中的全局变量有哪些 Apr 21, 2024 am 04:54 AM

Node.js 中存在以下全局变量：全局对象：global核心模块：process、console、require运行时环境变量：__dirname、__filename、__line、__column常量：undefined、null、NaN、Infinity、-Infinity

nodejs安装目录里的npm与npm.cmd文件有什么区别 Apr 21, 2024 am 05:18 AM

Node.js 安装目录中有两个与 npm 相关的文件：npm 和 npm.cmd，区别如下：扩展名不同：npm 是可执行文件，npm.cmd 是命令窗口快捷方式。Windows 用户：npm.cmd 可以在命令提示符下使用，npm 只能从命令行运行。兼容性：npm.cmd 特定于 Windows 系统，npm 跨平台可用。使用建议：Windows 用户使用 npm.cmd，其他操作系统使用 npm。

nodejs和java的差别大吗 Apr 21, 2024 am 06:12 AM

Node.js 和 Java 的主要差异在于设计和特性：事件驱动与线程驱动：Node.js 基于事件驱动，Java 基于线程驱动。单线程与多线程：Node.js 使用单线程事件循环，Java 使用多线程架构。运行时环境：Node.js 在 V8 JavaScript 引擎上运行，而 Java 在 JVM 上运行。语法：Node.js 使用 JavaScript 语法，而 Java 使用 Java 语法。用途：Node.js 适用于 I/O 密集型任务，而 Java 适用于大型企业应用程序。