通过nodejs 服务器读取HTML文件渲染到页面的方法
1.分别简单实现三个备用页面。
login.html页面
index.html页面
代码片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>元素居中对齐</h2>
<p>水平居中块级元素 (如 div), 可以使用 margin: auto;</p>
<div class="center">
<p><b>注意: </b>使用 margin:auto 无法兼容 IE8, 除非 !DOCTYPE 已经声明。</p>
</div>
</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>
<div class ="center" >404 Not Fount</div>
</body>
</html>
2.修改创建的nodejs 服务器页面，对不同地址的请求做出不同的响应页面。
在url地址判断中添加，文件读取代码，以实现读取定义的html页面。
声明文件系统对象：
// 声明文件操作系统对象
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);
});
}
完整代码：
/**
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/其他内容
以上这篇通过nodejs 服务器读取HTML文件渲染到页面的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
Nodejs中使用phantom将html转为pdf或图片格式的方法
最近在项目中遇到需要把html页面转换为pdf的需求,并且转换成的pdf文件要保留原有html的样式和图片.也就是说,html页面的图片.表格.样式等都需要完整的保存下来. 最初找到三种方法来实现这个需求,这三种方法都只是粗浅的看了使用方法,从而找出适合这个需求的方案: html-pdf 模块 wkhtmltopdf 工具 phantom 模块 最终使用了phantom模块,也达到了预期效果.现在简单的记录三种方式的使用方法,以及三者之间主要的不同之处. 1.html-pdf github:ht
-
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
需求描述,由于工作的需要,需要将原本用于1280720的网页改为19201080的网页(电视端页面).需求可以拆分为两部分,代码部分的修改以及图片的修改.在代码部分,需要将所有位置以及大小相关的值乘以1.5,图片的尺寸也要放大1.5倍. 首先使用nodejs遍历当前的文件夹: // 遍历所有的文件 var fs = require("fs") var path = require("path") var relativePath = '\\test' // 拿到需要
-
nodejs分离html文件里面的js和css的方法
摘要: 本文要实现的内容,使用nodejs 对文件的增删改查,演示的例子->分离出一个html 文件里面的script 和style 里面的内容,然后单独生成js文件和css 文件.中间处理异步的api->async/await , Promise 项目托管:extract-js-css, 欢迎star 直接上代码: // import fs from 'fs' var fs = require('fs') // import csscomb from 'csscomb' // var css
-
使用nodejs分离html文件里的js和css详解
摘要: 本文要实现的内容,使用nodejs 对文件的增删改查,演示的例子->分离出一个html 文件里面的script 和style 里面的内容,然后单独生成js文件和css 文件.中间处理异步的api->async/await , Promise 项目托管:extract-js-css , 欢迎star 直接上代码: // extract-js-css // import fs from 'fs' var fs = require('fs') // import csscomb from '
-
用Nodejs搭建服务器访问html、css、JS等静态资源文件
为了测一个附近门店的功能,需要配置一下服务器进行测试.本来打算用apache的,后来想自己是做前端的,好久没有用过Nodejs了何不用所学的知识自己配一下呢,说动手就手. 第一步,俗话说的好,工欲善其事,必先利其器.既然要用node+express配置服务器,如果电脑上没有的话自然要先安装这两个大宝贝啦. 1.安装node.到Node官网下载安装即可,直接下一步下一步就完成了. 2.npm初始化项目.打开终端,输入npm init -y即可.注意:如果不输入-y要自己写一些配置,写了-y会默认直
-
nodejs 简单实现动态html的方法
动态替换html内容 1.实现的功能及原理 实现了将,用户表单的数据,与html相结合,将用户输入的数据,显示到html对应的位置. 原理:通过正则表达式,替换html中的模板数据 如用户名{name},可以通过拿到用户提交的name的值value,通过 replace(正则表达式,value)的方式替换掉原模板数据,并输出到客户端. 2.主要用到的方法和模块 2.1文件操作模块 var fs=require("fs"); 方法: 2.1.1 异步读取文件的方法 fs.readFile
-
通过nodejs 服务器读取HTML文件渲染到页面的方法
1.分别简单实现三个备用页面. login.html页面 index.html页面 代码片段: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> .center { margin: auto; width: 60%; border: 3px solid #73AD21;
-
php使用fgetcsv读取csv文件出现乱码的解决方法
本文实例讲述了php使用fgetcsv读取csv文件出现乱码的解决方法.分享给大家供大家参考.具体分析如下: 一般来说在php中碰到乱码多半是编码问题,在这里我们实例分析了fgetcsv读取csv文件乱码原因所在与解决方法. 例子如下: 复制代码 代码如下: function get_csv_contents( $file_target ){ $handle = fopen( $file_target, 'r'); while ($data = fgetcsv($handle, 1000,
-
spring mvc 读取xml文件数据库配置参数的方法
本文主要介绍怎么通过属性注入与构造器注入实现把我们项目中要用到的数据库参数放到xml文件里面去,方便部署. spring mvc 4.2.6项目 SQL Server 2008数据库 本文介绍的主要使用ApplicationContext以及其实现类实现.主要用到的是ClassPathXmlApplicationContext. ClassPathXmlApplicationContext:从类路径ClassPath中寻找指定的XML配置文件,找到并装载 完成ApplicationContext
-
asp.net使用DataSet的ReadXml读取XML文件及Stream流的方法
本文实例讲述了asp.net使用DataSet的ReadXml读取XML文件及Stream流的方法.分享给大家供大家参考,具体如下: string strxml = "<xml><m><a>1</a><b>2</b></m><m><a>11</a><b>22</b></m><m><a>111</a><
-
c#使用Dataset读取XML文件动态生成菜单的方法
本文实例讲述了c#使用Dataset读取XML文件动态生成菜单的方法.分享给大家供大家参考.具体实现方法如下: Step 1:Form1 上添加一个ToolStripContainer控件 Step2:实现代码 private void Form2_Load(object sender, EventArgs e) { CMenuEx menu = new CMenuEx(); string sPath = "D://Menu.xml";//xml的内容 if (menu.FileExi
-
C#读取中文文件出现乱码的解决方法
本文实例讲述了C#读取中文文件出现乱码的解决方法.分享给大家供大家参考.具体分析如下: 先来看这段代码: FileStream aFile = new FileStream(SingleFile,FileMode.Open); StreamReader sr = new StreamReader(aFile,Encoding.GetEncoding("gb2312"),true); string FileContent = sr.ReadToEnd(); aFile.Close();
-
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
本文实例讲述了微信小程序使用wx.request请求服务器json数据并渲染到页面操作.分享给大家供大家参考,具体如下: 微信小程序的数据总不能写死吧,肯定是要结合数据库来做数据更新,而小程序数据主要是json数据格式,所以我们可以利用php操作数据库,把数据以json格式数据输出即可.现在给大家讲一下,微信小程序的wx.request进行服务器数据请求的用法: 官方文档给出了示例代码,但是我这边自己进行了简单的处理: index.js Page({ data: { }, onLoad: fun
-
Python实现读取txt文件并转换为excel的方法示例
本文实例讲述了Python实现读取txt文件并转换为excel的方法.分享给大家供大家参考,具体如下: 这里的txt文件内容格式为: 892天平天国定都在?A开封B南京C北京(B) Python代码如下: # coding=utf-8 ''''' main function:主要实现把txt中的每行数据写入到excel中 ''' ################# #第一次执行的代码 import xlwt #写入文件 import xlrd #打开excel文件 import os txtFi
-
python中利用h5py模块读取h5文件中的主键方法
如下所示: import h5py import numpy as np #HDF5的写入: imgData = np.zeros((2,4)) f = h5py.File('HDF5_FILE.h5','w') #创建一个h5文件,文件指针是f f['data'] = imgData #将数据写入文件的主键data下面 f['labels'] = np.array([1,2,3,4,5]) #将数据写入文件的主键labels下面 f.close() #关闭文件 #HDF5的读取: f = h5
-
Python第三方库h5py_读取mat文件并显示值的方法
mat数据格式是Matlab默认保存的数据格式.在Python中,我们可以使用h5py库来读取mat文件. >>> import h5py >>> data = h5py.File("**.mat") >>> test = data["digitStruct/name"] #<HDF5 dataset "name": shape (13068, 1), type "|O&quo