Web前端高级工程师培训：使用 Node.js 构建一个 Web 服务端程序（2）

2024-10-25 07:10:29

6、返回响应数据（资源）

6-1、使用 http.ServerResponse 类实例处理响应数据（资源）

在每一次的 request 事件中回调函数中会通过参数注入两个对象：

第一个参数： IncomingMessage 对象。
第二个参数：ServerResponse 对象。

我们可以使用第二个参数 ServerResponse 对象来向客户端返回数据。

// 基于 #C5-5-1
// #C6-6-1

...

server.on('request', (req, res) => {
  console.log(`有客户端请求`);
  
  // 写入数据
  res.write('Hello');
  // 结束数据写入
  res.end();
  
  // 也可以直接调用
  res.end('Hello');
});

...

参考：https://nodejs.org/dist/latest-v15.x/docs/api/http.html#http_class_http_serverresponse

7、多资源定位

7-1、使用 URI(URL) 定位不同的资源

参考：https://developer.mozilla.org/zh-CN/docs/Glossary/URL

访问上面那个 URL ，你就可以看到关于 URL 的详细资料。

8、获取请求信息

8-1、使用 http.IncomingMessage 类实例获取客户端请求信息

// 基于 #C6-6-1
// #C8-8-1

...

server.on('request', (req, res) => {
  console.log(`有客户端请求`);
  
  // 获取请求相关信息
  // 当前请求的 url 字符串
  console.log(req.url);
  
  // 写入数据
  res.write('Hello');
  // 结束数据写入
  res.end();
});

...

参考：https://nodejs.org/dist/latest-v15.x/docs/api/http.html#http_class_http_incomingmessage

9、URL 字符串解析

9-1、使用 Node.js 中的 URL 模块解析 URL 字符串

// 基于 #C8-8-1
// #C9-9-1
...

const url = require('url');

...


server.on('request', (req, res) => {
  console.log(`有客户端请求`);
  
  // 获取请求相关信息
  // 当前请求的 url 字符串
  console.log(req.url);
  
  // 使用 Node.js 的 url 模块中提供的工具方法解析 url 字符串
  const urlObj = url.parse(req.url);
  console.log(urlObj);
  
  // 写入数据
  res.write('Hello');
  // 结束数据写入
  res.end();
});

...

9-2、使用 WHATWG（HTML5）中的 URL API 解析 URL 字符串

// 基于 #C8-8-1
// #C9-9-2

// const URL = require('url').URL; // 不需要引入
...


server.on('request', (req, res) => {
  console.log(`有客户端请求`);
  
  // 获取请求相关信息
  // 当前请求的 url 字符串
  console.log(req.url);
  
  // 使用 WHATWG（HTML5） 中的 URL API 解析 URL 字符串
  const urlObj = new URL(req.url);
  console.log(urlObj);
  
  // 写入数据
  res.write('Hello');
  // 结束数据写入
  res.end();
});

...

参考：https://nodejs.org/dist/latest-v15.x/docs/api/url.html#

10、静态资源

10-1、静态资源与动态资源

通俗来讲（广义），静态资源 指的是通过资源地址（URL）访问到的内容就是资源内容本身，不经过程序的特殊处理（如：逻辑判断处理、数据库读取、随机内容等……），一般我们把网站的 HTML文件、CSS文件、JS文件、图片文件 等称为静态资源。对于静态资源，我们如果不去修改这些静态资源本身的内容，那么通过同一个 URL 在任何时候看到的内容应该不变的。

而动态资源正好与之相反。

// #C10-10-1
...
server.on('request', (req, res) => {
  // 静态资源
  res.end('Hello');
  
  // 动态资源
  res.end( new Date() );
})
...

10-2、静态资源优化

通常，我们会把静态特性的资源存储到其它媒介（硬盘文件）中，在需要访问的时候根据一些规则（WebServerAPP自定义）进行读取访问，这样的好处：

方便管理维护
方便修改

// #C10-10-1
...
server.on('request', (req, res) => {
  // 1、获取当前客户端请求的url
  // 2、解析 url 字符串
  // 3、获取 url 中 path 部分的值
  // 4、根据 path 中的读取我们存放在硬盘中的对应资源文件
  // 5、把读取到的资源文件内容作为响应内容返回给客户端
});
...

问题！！！

不同类型的资源内容（如：html、css、image……）在客户端接收到以后可能会无法正确被处理。

码农公寓