Node学习（三）02-根据不同url地址处理不同请求——encodeURIComponent()-中文编码、decodeURIComponent()-编码后解码 & request.url-请求路径

viceen

于 2022-08-27 23:31:28 发布

阅读量2.1k

点赞数

分类专栏： node.js基础文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/weixin_44867717/article/details/126564049

版权

node.js基础专栏收录该内容

43 篇文章 9 订阅

订阅专栏

Node学习（三）02-根据不同url地址处理不同请求——encodeURIComponent()-中文编码、decodeURIComponent()-编码后解码 & request.url-请求路径

2.4.3 根据不同 url 地址处理不同请求

前面已经可以对浏览器的请求做出响应了，但是响应的内容总是一样的。能不能根据url的不同，做出合适的响应呢？当然可以，那么首先就需要知道浏览器请求的url是什么。

涉及到和请求相关的信息，都是通过请求响应处理函数的第一个参数完成的。

server.on('request', function (req, res) {  
  // 形参req 是 请求request的意思，所有和请求相关的信息，都在req对象中
})

形参req
- 请求对象，浏览器发送的请求报文中的数据已经被解析到该对象上
- request.url 获取请求行中的路径
- request.method 获取请求行中的请求方法
- request.headers 获取请求头

代码实例

051-响应不同的结果.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.setHeader('Content-Type', 'text/html; charset=utf-8');
    // res.end('<p>hello</p><p>world</p>');
    // 判断，请求的url是什么，然后再做出响应
    console.log(req.url);
    /* if (req.url === '/index.html') {
        fs.readFile('./manager/index.html', 'utf-8', (err, data) => {
            if (err) throw err;
            res.end(data); // data就是读取的html标签
        });
    } else if (req.url === '/images/logo.png') {
        fs.readFile('./manager/images/logo.png', (err, data) => {
            if (err) throw err;
            res.end(data); // data就是图片
        });
    } else {
        fs.readFile(req.url, 'utf-8', (err, data) => {
            if (err) throw err;
            res.end(data); // data就是读取的html标签
        });
    } */
    
    // req.url的路径存在中文字符，浏览器解析会报错，需要decodeURIComponent对编码后的 URI进行解码
    fs.readFile('./manager' + decodeURIComponent(req.url), (err, data) => {
        if (err) throw err;
        res.end(data); // data就是读取的html标签
    });

});

打开终端，执行命令

node ./051-响应不同的结果.js

显示：服务器响应不同的结果

url路径req.url中的中文解码-decodeURIComponent()

在这里插入图片描述

decodeURIComponent()——对编码后的 URI 进行解码，参数为字符串
```
decodeURIComponent('%E4%B8%9C')  // '东'
```
encodeURIComponent()——可把字符串作为URI 组件进行编码，参数为字符串。中文转码
```
encodeURIComponent('东')  // '%E4%B8%9C'  
```

实例1

03-响应一个html文件.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.setHeader('Content-Type', 'text/html; charset=utf-8');
    res.end('<p>hello</p><p>world</p>');  // 显示一：也可以反引号引用html内容
         // 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标签
    });
});

打开终端，执行命令

node ./03-响应一个html文件.js

显示一：响应html

在这里插入图片描述

./manager/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>Document</title>
    <p>hello</p><p>world</p>
</head>
<body>
    
</body>
</html>

显示二，显示效果同上

实例2

服务器端获取请求的信息

04-获取请求信息.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) => {
    // 区分请求的文件是什么，不能总是返回index.html；如果是css，则需要响应css文件....
    // 想要完成上述工作，必须先了解req
    /**
     * req.url --- 请求的url，路径
     * req.method --- 请求的方式  GET POST
     * req.headers --- 请求头
     */
    console.log(req.url);  // 显示一：请求路径  /manager/lib/css/bootstrap.css
    // console.log(req.method);  // 显示二：请求方式  GET
});

打开终端，执行命令

node ./04-获取请求信息.js

显示一：获取请求url的路径信息

在这里插入图片描述

显示二：获取请求方式

在这里插入图片描述

实例3

服务器端获取请求的信息

052-响应不同的结果.js

// 服务器中有2个html文件，分别是index.html 和 test.html
// 根据浏览器发来的不同的请求，分别返回这两个文件的内容

// 根据请求的url，判断请求的是哪个文件，然后做出响应

const fs = require('fs');

const http = require('http');
const server = http.createServer();
server.listen(4000, () => console.log('开启了'));
server.on('request', (req, res) => {
    // 获取请求的url
    // console.log(req.url); // /index.html  /test.html  /abcd.html /getMsg

    // 判断请求的url，然后根据判断的结果，做出响应
    if (req.url === '/index.html') {
        //  xxxx
        fs.readFile('./index.html', (err, data) => {
            // 如果有错误，输出错误，并终止程序执行
            if (err) return console.log(err);
            // 没有错误，将读取的结果响应给浏览器
            res.end(data);
        });
    } else if (req.url === '/test.html') {
        fs.readFile('./test.html', (err, data) => {
            // 如果有错误，输出错误，并终止程序执行
            if (err) return console.log(err);
            // 没有错误，将读取的结果响应给浏览器
            res.end(data);
        });
    }

    // 获取请求的方式
    // console.log(req.method);  // GET  POST

    // 获取请求头
    // console.log(req.headers); // 得到一个JS对象，里面包含了所有请求头的信息
});