关于HTTP模块访问之后响应网页

在之前我们说了http模块的简单搭建服务器
现在我们来制作简单的响应
如果之前没看过的话可以去看看
浅谈关于nodejs的HTTP模块

1，准备

模块：HTTP模块，FS文件模块（文件系统模块）
工具：你的编辑器

2，实现原理

利用fs文件模块读取目录下的网页文件

3，准备文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <style>
    a{
      font-size: 20px;
      transition: 1s;
    }
    a:hover{
      font-size: 40px;
    }
    p{
      color: aqua;
      transition: 1s;
      font-size: 20px;
    }
    p:hover{
      color: rgb(12, 63, 63);
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p>hello word</p>
  <p>hello node-http</p>
  <a href="http://baidu.com">百度</a>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

app.js

const http = require('http');
const fs=require('fs');
// 导入模块
const app = http.createServer();
// 创建服务器
app.listen(3000, () => {
  // 监听端口
  console.log('127.0.0.1:3000');
  // 回调返回数据
});
app.on('request', function (req, res) {
  console.log(req.url);
  var data=fs.readFileSync('./index.html')
  // 自动把buffer转为字符串
  res.write(data)
  //获取请求的资源，请求的方式
  res.end();
})

// http://localhost:3000
// http://127.0.0.1:3000

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

实验

开启服务器当访问时
在这里插入图片描述

可以看到正常但是我们如果把css外置呢？

重启服务器后我们发现我们的css样式没了这是为什么呢？

原因如上图

当在页面上打开index.html之后它无法找到自己的样式所以就会失效

相关阅读:
tomcat+idea--如何在idea上发布项目
多线程java （附代码）
产品经理薪资水涨船高的根本原因是什么？
react this.setState接收参数。写成Promise形式。以及async/await和Promise的区别
这3个图表“小心机”，用对了雪中送炭，用错了是惨不忍睹
系统学习Python——字符串（str）：字符串格式化表达-[基础知识]
如何使用 NestJS 构建电子商务应用
【数组】-数组里的所有数字都在 0 到 n-1范围内，判断该数组中是否有重复的数
Redis之分布式锁
C++ STL详解

原文地址：https://blog.csdn.net/weixin_50112395/article/details/125426123