Node学习（三）03-处理POST请求、静态资源、404——Postman使用和设置参数&POST请求-浏览器提交数据给服务器&res.statusCode设置状态码&fs.readFile读取文件

Node学习（三）03-处理POST请求、静态资源、404——Postman使用和设置参数&POST请求-浏览器提交数据给服务器&res.statusCode设置状态码&fs.readFile读取文件

2.4.4 处理浏览器POST方式提交的数据

浏览器要发送POST方式的请求比较麻烦，所以这里可以使用POSTMAN软件来模拟请求。

上一节，我们根据不同的url地址，对不同的请求，做出了不同的响应。但这些请求都是GET方式的请求，如果浏览器使用POST方式向服务器发送了一次请求，又该如何处理呢？

POST请求一般会提交数据给服务器，服务器在接收数据的时候也是分块接收的

1、初始结构

1.1、Postman使用界面和设置请求参数

1.2、设置本地node的接口js文件

061-处理POST请求.js

const http = require('http');
const server = http.createServer();
server.listen(3000, () => console.log('启动了'));

// 只要有浏览器发来请求，就会触发下面的事件
server.on('request', (req, res) => {
    console.log('123');
    console.log(req.method); // POST
});

1.3、打开终端，执行命令

node ./061-处理POST请求.js

此时显示，默认请求方式GET

打开Postman使用界面，设置请求参数，点击send按钮

Postman显示上图

node终端显示下图

2、完整结构

062-处理POST请求.js

const http = require('http');
const server = http.createServer();
server.listen(3000, () => console.log('启动了'));

// 只要有浏览器发来请求，就会触发下面的事件
server.on('request', (req, res) => {
    // console.log('123');
    // console.log(req.method); // POST
    // POST请求，意思是浏览器提交数据给服务器
    // 服务器肯定要接收这些数据，并把这些数据保存
    // 如何接收POST提交过来的数据
    /**
     * 1. 给req注册data事件，当有数据提交过来就会触发，事件的作用是接收数据，接收大量数据的时候，是分块接收的
     * 2. 给req注册end事件，当数据全部接收完毕，会触发
     */
    // 先定义一个空字符串，里面准备存放接收到的数据
    let str = '';
    req.on('data', (chunk) => {
        str += chunk; // 把接收到的一块数据拼接到str中
    });
    req.on('end', () => {
        console.log(str); // id=1&name=zs&age=43
    });

});

打开终端，执行命令

node ./062-处理POST请求.js

打开Postman使用界面，设置请求参数，点击send按钮

Postman显示上图

node终端显示下图

2.4.5 处理静态资源

• 静态资源指的是html文件中链接的外部资源，如css、js、image文件等等。
• 如果请求的a.html 文件中链接了外部文件(静态资源)，比如css、images、js文件等，浏览器会自动再次发送请求，向服务器请求这些文件
• 服务器要判断浏览器请求的路径是否是静态资源，如果是静态资源把静态资源的内容返回给浏览器

---

前面已经统一处理了（2.4.3 根据不同 url 地址处理不同请求）。这里不在编写代码。

建议每个响应都告诉客户端我给你发送的 Content-Type 内容类型是什么，这里先保留，不用实现。

为不同的文件类型设置不同的 Content-Type

• .html：text/html
• .css：text/css
• .js：application/javascript
• .jpg：image/jpg

response.setHeader('Content-Type', 'text/css');

浏览器请求了静态资源文件，服务器就得做出响应，而且还要指定响应数据的类型，否则浏览器会把字符串当做纯文本处理。

// 案例中，使用的是index.html
// index.html中引入了index.css和index2.css
// index.html中使用了一张图片

// 下面是服务器接受到请求之后的处理方式
const http = require('http');
const fs = require('fs');

const server = http.createServer();

server.listen(5000, () => console.log('server start'));

server.on('request', (req, res) => {
    // 判断，如果请求的是index.html,则读取文件，并返回内容
    if (req.url === '/index.html') {
        fs.readFile('./index.html', 'utf-8', (err, data) => {
            if (err) {
                return console.log(err);
            }
            res.end(data);
        });
    // } else if (path.extname(req.url) === '.css') {
    } else if (req.url.endsWith('.css')) {
        // 读取css文件，并且返回给浏览器
        fs.readFile('.' + req.url, 'utf-8', (err, data) => {
            if (err) {
                return console.log(err);
            }
            res.end(data);
        });
    } else if (req.url.endsWith('.jpg') || req.url.endsWith('.png')) {
        // 读取图片，并且返回给浏览器
        // 读取图片的时候，不能转换成utf-8
        fs.readFile('.' + req.url, (err, data) => {
            if (err) {
                return console.log(err);
            }
            res.end(data);
        });
    }
});

2.4.6 处理 404

• 404是一个响应状态码，表示请求的资源不存在

• 如果请求未处理的路径，服务器不会做任何的响应，此时浏览器处于等待状态

• 如果浏览器请求未处理的路径，统一设置响应码 404，并做友好提示

  // 设置状态码为404
  response.statusCode = 404;
  response.end('对不起，您请求的页面未找到');
  

• 具体做法：

  • 当有浏览器的请求到达服务器，服务器使用fs.access()判断，判断浏览器请求的文件是否存在
  • 如果请求的文件存在，则读取并返回这个文件；如果请求的文件不存在，则返回404

  // 文件  07-处理404.js
  
  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.end('hello，我是服务器');
  
      // 下面的代码，无论浏览器请求什么，都返回index.html。是不对的
  
      console.log(req.url);
  
      // 先判断浏览器请求的文件存在还是不存在，如果存在，则读取并返回；如果不存在则告诉浏览器404
  
      fs.access('./manager' + decodeURIComponent(req.url), (err) => {
          if (err) {
              // 说明不存在
              res.statusCode = 404;
              res.setHeader('Content-Type', 'text/html; charset=utf-8');
              res.end('小朋友，你走错路了');
          } else {
              // 说明文件存在，则读取文件，并响应给浏览器
              fs.readFile('./manager' + decodeURIComponent(req.url), (err, data) => {
                  if (err) throw err;
                  res.end(data);
              })
          }
      });
      
  });
  

打开终端，执行命令

node ./07-处理404.js

打开Postman使用界面，设置请求参数，点击send按钮

Postman显示