Nodejs中通过web服务器访问静态资源

Nodejs中web 服务器创建和使用

https://blog.csdn.net/qq_44741577/article/details/136445032?spm=1001.2014.3001.5501

一、需求说明

1.1. 文档目录

1.2. index.html效果展示

1.3. 实现的功能

浏览器访问127.0.0.1可以打开我的index.html并且加载js和css

二、实现步骤

• 导入需要的模块
• 创建基本的 web 服务器
• 将资源的请求url地址映射为静态资源的存放路径
• 读取文件内容并响应给客户端

2.1. 导入需要的模块

// 1.1 导入 http 模块
const http = require( 'http' )
// 1.2 导入 fs 文件系统模块
const fs = require( 'fs' )
// 1.3 导入 path 路径处理模块
const path = require( 'path' )

2.2. 创建基本的 web 服务器

//  2.1 创建 web 服务器
const serve = http.createServer();

// 2.2 监听 web 服务器的 request 事件
serve.on("request", (req, res) => {});

//  2.3 启动 web 服务器
serve.listen(80, () => {
  console.log(" server listen at http://127.0.0.1");
});

2.3. 将资源的请求url地址映射为静态资源的存放路径

// 2.2 监听 web 服务器的 request 事件
serve.on("request", (req, res) => {
  // 3.1 获取到客户端请求的 url地址
  const url = req.url;
  // 3.2 把 请求的 url地址，映射为静态资源的存放路径
  const fpath = path.join(_dirname, url);
  console.log(__dirname); //__dirname就是当前js文件所在的目录
});

2.4. 读取文件的内容并响应给客户端

// 4.1 根据”映射”过来的文件路径读取文件
  fs.readFile(fpath, "utf-8", (err, dataStr) => {
    // 4.2 读取文件失败后，向客户端响应固定的“错误消息”
    if (err) return res.end("404 Not fount.");
    //4 读取文件成功后，将“读取成功的内容”响应给客户端
    res.end(dataStr);
  });

2.5. 完整代码

// 1.1 导入 http 模块
const http = require("http");
// 1.2 导入 fs 文件系统模块
const fs = require("fs");
// 1.3 导入 path 路径处理模块
const path = require("path");

//  2.1 创建 web 服务器
const serve = http.createServer();

// 2.2 监听 web 服务器的 request 事件
serve.on("request", (req, res) => {
  // 3.1 获取到客户端请求的 ur1 地址
  const url = req.url;
  // 3.2 把 请求的 url 地址，映射为本地文件的存放路径
  const fpath = path.join(__dirname, url);
  console.log(__dirname); //__dirname就是当前js文件所在的目录
  // 4.1 根据”映射”过来的文件路径读取文件
  fs.readFile(fpath, "utf-8", (err, dataStr) => {
    // 4.2 读取文件失败后，向客户端响应固定的“错误消息”
    if (err) return res.end("404 Not fount.");
    //4 读取文件成功后，将“读取成功的内容”响应给客户端
    res.end(dataStr);
  });
});

//  2.3 启动 web 服务器
serve.listen(80, () => {
  console.log(" server listen at http://127.0.0.1");
});

三、运行服务

四、浏览器访问127.0.0.1/html/index.html