Node学习（三）01-http模块——使用http模块搭建Web服务器-4个步骤-server对象 & 对浏览器的请求做出响应-res.setHeader、res.write配置响应信息

Node学习（三）01-http模块——使用http模块搭建Web服务器-4个步骤-server对象 & 对浏览器的请求做出响应-res.setHeader、res.write配置响应信息

2.4 http模块

http服务器处理模块，可以使用http模块搭建服务器

node不同于Apache，安装完node并没有一个能够提供Web服务环境，需要使用http模块自己来搭建Web服务器

• http是一个系统模块，让我们能够通过简单的流程创建一个Web服务器

---

2.4.1 使用http模块搭建Web服务器

• 使用http模块搭建Web服务器

  创建 Web 服务器的步骤

  • 导入 http 核心模块
  • 创建 server 对象(server 对象负责建立连接，接收数据)
  • 注册 request 事件，当浏览器发送请求到服务器执行，设置处理请求的函数
  • 监听端口（这个步骤也可以放到注册request事件之前）

  // 0. 加载 http 核心模块
  var http = require('http')
  // 1. 创建服务器，得到 Server 实例
  var server = http.createServer()
  // 2. 监听客户端的 request 请求事件，设置请求处理函数
  server.on('request', function (req, res) {
    // 形参req是请求request的简写
    // 形参res是响应response的简写
    console.log('收到客户端的请求了')
  })
  // 3. 绑定端口号，启动服务器
  server.listen(3000, function () {
    console.log('Server is running at port 3000.')
  })
  

  • 当服务器接收到浏览器的请求后，如果没有做出响应，浏览器会等待
  • 服务器的最终目的是要根据请求做出响应

实例

01-http模块.js

// 1 导入 http 核心模块
const http = require('http');
// 2 创建 server 对象(server 对象负责建立连接，接收数据)
const server = http.createServer();
// 3 注册 server对象的request 事件，当浏览器发送请求到服务器，会触发这个事件
server.on('request', () => {
    console.log('你的请求我收到了，但是我没空处理');
});
// 4 监听端口（这个步骤也可以放到注册request事件之前）
server.listen(3000, () => {
    console.log('服务器启动了');
});

打开终端，执行命令

node ./01-http模块.js

显示

在浏览器输入127.0.0.1:3000，验证浏览器打转儿发起请求，响应后，再次打印——你的请求我收到了，但是我没空处理

小结：

• 其他模块
  • path
    • path.extname() – 获取字符串中的后缀
    • path.join() – 连接两个或更多个路径
  • fs
    • fs.readFile(‘文件地址’, ‘utf-8’, (err, data) => {})
    • fs.writeFile();
  • querystring
    • querystring.parser(); – 将查询字符串处理成JS对象
    • querystring.stringify(); – 将JS对象处理成查询字符串
  • url
    • const myurl = new URL(完整的url);
    • let id = myurl.searchParams.get(‘id’); // — 获取url中的id参数
• http – 创建服务器
  • 四个步骤
    • 加载http
    • 创建server （const server = http.createServer()）
    • 监听端口，开启服务 （server.listen(4000, () => console.log('开启了'))）
    • 注册request事件，监视浏览器的请求 server.on('request', (req, res) => {})
  • request事件的处理函数，有两个形参
    • req – 该对象可以获取到所有和请求相关的信息
      • req.url – 获取请求的url
      • req.method – 请求方式
    • res – 该对象用于处理响应的
      • res.setHeader(); – 设置响应头
      • res.write() – 设置响应体
      • res.end(); – 做出响应

今天所写的js文件都是服务器上的文件。服务器端的js文件由node来执行。

2.4.2 如何对浏览器的请求做出响应

当收到浏览器的请求后，会触发request事件，其实就是触发request事件的处理函数（该函数有两个核心参数 request 和 response）

请求已经能够收到了，现在急需给浏览器的请求做出响应，这里就使用到了处理请求的函数，具体的是使用到了该函数的第二个参数，见下面的代码。

// 代码片段
server.on('request', function (req, res) {
  // 该函数就是处理请求响应的函数
  // 形参res是响应response的简写
})

• 形参res
  • 形参res是response的缩写
  • 响应对象，服务器给浏览器返回的响应内容，可以通过该对象设置
  • res.write() 设置响应体（返回给浏览器的内容）的内容，可以多次调用，但是只调用write不会做出响应，发送响应要调用 end()
  • res.end() 把响应报文（响应行、响应头、响应体）发送给浏览器。意思就是做出响应，否则浏览器一直转
  • res.setHeader() 设置响应头，比如设置响应体的编码
  • statusCode 设置状态码
  • writeHead() 设置响应头

PS：浏览器在请求服务器的时候，默认会请求网站根目录下的 /favicon.ico 网站图标

• 响应代码

  • 响应一句话

  // 1. 加载http模块
  const http = require('http');
  
  // 2. 创建server对象
  const server = http.createServer();
  
  // 3. 监听端口，启动服务
  server.listen(3000, () => console.log('服务器启动了~~'));
  
  // 4. 给server注册request事件，该事件会在浏览器请求的时候触发
  server.on('request', (req, res) => {
      // req，request，意思是请求。它是一个对象，包含了所有和请求相关的信息
      // res，response，意思是响应。它是一个对象，包含所有和响应相关的信息
      /**
       * res.end(响应的内容);  --- 对浏览器的请求做出响应
       * res.statusCode; --- 可以设置响应状态码
       * res.write(响应的内容); --- 只是设置响应的内容，但不会做出响应
       * res.writeHead(); --- 设置响应头
       * res.setHeader(); --- 设置响应头
       */
      res.setHeader('Content-Type', 'text/html; charset=utf-8');
      // res.statusCode = 404;
      // res.write('哈哈哈哈');
      res.end('hello，我是服务器');
  });
  

  • 响应一个HTML文件

  const fs = require('fs');
  
  // 1. 加载http模块
  const http = require('http');
  // 2. 创建server对象
  const server = http.createServer();
  
  // 3. 监听端口，开启服务
  server.listen(3000, () => console.log('又启动了'));
  
  // 4. 注册server的request事件，当浏览器发来请求会触发这个事件
  server.on('request', (req, res) => {
      // 
      res.setHeader('Content-Type', 'text/html; charset=utf-8');
      // res.end('<p>hello</p><p>world</p>');
      // 响应html，必须读取html，将读取的结果响应给浏览器
      fs.readFile('./manager/index.html', 'utf-8', (err, data) => {
          if (err) throw err;
          res.end(data); // data就是读取的html标签
      });
  });
  

实例

02-对浏览器的请求做出响应.js

// 1. 加载http模块
const http = require('http');

// 2. 创建server对象
const server = http.createServer();

// 3. 监听端口，启动服务
server.listen(3000, () => console.log('服务器启动了~~'));

// 4. 给server注册request事件，该事件会在浏览器请求的时候触发
server.on('request', (req, res) => {
    // req，request，意思是请求。它是一个对象，包含了所有和请求相关的信息
    // res，response，意思是响应。它是一个对象，包含所有和响应相关的信息
    /**
     * res.end(响应的内容);  --- 对浏览器的请求做出响应
     * res.statusCode; --- 可以设置响应状态码
     * res.write(响应的内容); --- 只是设置响应的内容，但不会做出响应
     * res.writeHead(); --- 设置响应头
     * res.setHeader(); --- 设置响应头
     */
    res.setHeader('Content-Type', 'text/html; charset=utf-8');  // 不设置，浏览器展示的中文内容会乱码
    // res.statusCode = 404;
    // res.write('哈哈哈哈');  // 没有res.end()，有响应会打转儿，但会一直打转儿不结束
    res.end('hello，我是服务器');
});

打开终端，执行命令

node ./02-对浏览器的请求做出响应.js

显示

设置res.write()，不设置res.end()

    res.setHeader('Content-Type', 'text/html; charset=utf-8');  // 不设置，浏览器展示的中文内容会乱码
    // res.statusCode = 404;
    res.write('哈哈哈哈');  // 没有res.end()，有响应会打转儿，但会一直打转儿不结束
    //res.end('hello，我是服务器');

运行显示效果