nodejs http 发送html文件到浏览器

初学nodejs,记录一下用http模块实现浏览器输入地址到收到本地服务器的html文件。

步骤:

  1. 创建本地服务器js文件
  2. 创建主页html文件
  3. 在浏览器上输入地址

本来想直接测试http的form提交。但是进行了跳转。

然后用ajax避免跳转,但是又涉及同源。

所以就用服务器返回html文件的方式。

只记录最重要的第一步:创建服务器js文件

const Http = require('http');//引用http模块。其继承了net模块。
const fs = require('fs');//引用文件系统模块

const client = Http.createServer((req, res) => {
    if (req.method == 'GET') {
        if (req.url == '/') {
            console.log('get index.html');
            res.setHeader('content-type', 'text/html');//application/html会下载文件
            res.on('close',()=>{
                console.log('send file close');
            })
            fs.createReadStream('index.html').pipe(res);//此处完成的时候,隐式调用了res.end();
        }
    }
});
client.listen(2333, 'localhost', () => {
    console.log('client server build');
})

 其中有用到pipe功能。感觉像是调用了res的write功能,第三个参数是callback。可能完成后的那个callback是end函数。所以就不需要在后面写end了。写了就错了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值