html服务器读文件,通过nodejs 服务器读取HTML文件渲染到页面

/**

1.使用 HTTP 服务器与客户端交互,需要 require('http')。

声明http协议

*/

var http = require('http');

// 声明文件操作系统对象

var fs = require('fs');

/**

2.获取服务器对象

1.通过 http.createServer([requestListener]) 创建一个服务

requestListener 

返回: 

返回一个新建的 http.Server 实例。

对于服务端来说,主要做三件事:

1.接受客户端发出的请求。

2.处理客户端发来的请求。

3.向客户端发送响应。

*/

var server = http.createServer();

/**

3.声明端口号,开启服务。

server.listen([port][, host][, backlog][, callback])

port  :端口号

host  :主机ip

backlog  server.listen() 函数的通用参数

callback  server.listen() 函数的通用参数

Returns: 

启动一个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);

});

}

});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这个问题涉及到了几个方面:Node.js 文件读取,数据格式转换,HTML 页面渲染和 echarts 数据可视化。我来一步一步地解答。 首先,我们需要使用 Node.js 的 fs 模块来读取本地文件。假设我们要读取文件是 data.txt,那么可以使用以下代码读取文件内容: ```javascript const fs = require('fs') fs.readFile('data.txt', 'utf-8', (err, data) => { if (err) throw err console.log(data) }) ``` 这段代码会将 data.txt 文件内容读取出来,并输出到控制台上。 接下来,我们需要将读取到的数据转换成 HTML 页面可以渲染的格式。这里我们可以使用 JSON 格式来存储数据。假设我们的数据格式如下: ```json [ {"name": "Apple", "value": 20}, {"name": "Banana", "value": 30}, {"name": "Orange", "value": 40} ] ``` 我们可以将数据转换成以下格式: ```json { "xAxis": { "type": "category", "data": ["Apple", "Banana", "Orange"] }, "yAxis": { "type": "value" }, "series": [ { "data": [20, 30, 40], "type": "bar" } ] } ``` 这个格式是 echarts 数据可视化库所需要的格式。 接下来,我们需要将数据渲染HTML 页面上。这里我们可以使用 Express 框架来搭建 Web 服务器,并使用 EJS 模板引擎来渲染页面。以下是一个简单的示例: ```javascript const express = require('express') const ejs = require('ejs') const fs = require('fs') const app = express() app.set('view engine', 'ejs') app.get('/', (req, res) => { fs.readFile('data.txt', 'utf-8', (err, data) => { if (err) throw err const chartData = transformData(data) res.render('index', { chartData }) }) }) app.listen(3000, () => { console.log('Server is running on port 3000') }) ``` 这段代码会读取 data.txt 文件,并将转换后的数据传递给 EJS 模板引擎进行渲染。以下是 index.ejs 模板文件的示例: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bar Chart</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px;height:400px;"></div> <script> var chartData = <%= JSON.stringify(chartData) %> var chart = echarts.init(document.getElementById('chart')) chart.setOption({ xAxis: chartData.xAxis, yAxis: chartData.yAxis, series: chartData.series }); </script> </body> </html> ``` 这个模板文件会将 echarts 图表渲染页面上。 最后,我们需要使用浏览器访问 http://localhost:3000 来查看渲染后的页面。如果一切正常,你应该能够看到一个包含有数据可视化图表的页面

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值