04-node.js中url根据不同的请求路径发送不同的响应结果、如何解决服务器乱码问题、解析html标签、读取html并通过服务器发送给客户端、读取图片等其他文件并通过服务器发送给客户端

最新推荐文章于 2024-04-23 16:55:51 发布

不及你笑靥如花

最新推荐文章于 2024-04-23 16:55:51 发布

阅读量347

点赞数 1

文章标签： js 乱码 node.js

本文链接：https://blog.csdn.net/qq_43775721/article/details/115804010

版权

这是我学习node的整理笔记。是我对各个视频和文档的综合理解，以备我日后复习存储。如果有错误的地方，还请各位大佬多多赐教

一、 request.url根据不同的请求路径发送不同的响应结果

request.url ：可以用来获取客户端请求路径

注意：

request.url 路径必须是相对路径，以 ./ 开头。
可以利用request.url 根据不同的请求路径发送不同的响应结果。

实例如下：

var http = require('http');

var server = http.createServer();

server.on("request", function(req, res) {
    /**
     *  根据不同的请求路径发送不同的响应结果
     *      1、获取请求路径
     *          req.url 获取到的是端口号之后的一部分路径
     *      2、判断路径处理响应
     */
    var url = req.url;

    if (url === '/') {
        res.end('index page');
    } else if (url === '/login') {
        res.end("login page");
    } else {
        res.end("404 Not Found.");
    }
});

server.listen(3300, function() {
    console.log('服务器启动成功了');
});

在这里插入图片描述

二、解决 node 服务器中文乱码问题

当我们出现中文乱码时，可以引入以下代码：

res.setHeader('Content-Type', 'text/plain; charset=utf8');

乱码的原因： 服务器端默认发送的数据是utf8编码的内容。但是浏览器不知道你是utf8编码的内容。浏览器在不知道服务器响应内容编码的情况下会按照当前操作系统默认的编码去解析，中文操作系统默认的是gbk编码内容。解决方法就是正确告诉浏览器我发的编码是什么内容即以上代码。

代码示例：

var http = require('http');

var server = http.createServer();

server.on("request", function(req, res) {
    var url = req.url;
    if (url === '/products') {
        var products = [{
                name: '苹果',
                price: 1.99
            },
            {
                name: '香蕉',
                price: 2.99
            }, {
                name: '黄瓜',
                price: 1.99
            }
        ]
        res.setHeader('Content-Type', 'text/plain; charset=utf8');
        //注意响应的内容只能是二进制数据或字符串
        res.end(JSON.stringify(products, null, 2));
    } else {
        res.end("404 Not Found.");
    }

});

server.listen(3330, function() {
    console.log('服务器启动成功了');
});

在这里插入图片描述

三、node解析html标签

方法一：如果是html页面的中文乱码，我们也可以直接给html加上以下标签

<meta charset="utf-8">

方法二：当我们出现html标签中的内容乱码时，可以引入以下代码：

res.setHeader('Content-Type', 'text/html; charset=utf8');

Content-Type：在 http 协议中，用来告诉浏览器我给你发送的数据类型。
text/html：是用来告诉浏览器我给你发送html文本的
text/plain：是用来告诉浏览器我给你发送普通文本的

代码示例：


var http = require('http');

var server = http.createServer();

server.on('request', function(req, res) {
    var url = req.url;

    if (url === '/plain') {
        res.setHeader('Content-Type', 'text/plain; charset=utf8');
        res.end('<p>hello!<a>你好！</a></p>');
    } else if (url === '/html') {
        res.setHeader('Content-Type', 'text/html; charset=utf8');
        res.end('<p>hello!<a>你好！</a></p>');
    }

});

server.listen(3000, function() {
    console.log('服务器启动成功，可以访问了！');
});

在这里插入图片描述

四、node读取html并通过服务器发送给客户端

要想通过node读取html并通过服务器发送给客户端，我们需要以下两步

搭建服务器
读取html文件并发数给客户端
需要注意加上以下代码，防止读取文件时乱码

 res.setHeader('Content-Type', 'text/html; charset=utf8');

示例如下，这是我的文件存储目录
在这里插入图片描述
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>2022年考研倒计时</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        html,
        body {
            width: 100wh;
            height: 100vh;
            position: relative;
        }
        
        #countdown {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 50rem;
            text-align: center;
            font-size: 70px;
            font-weight: bolder;
        }
        
        #countdown span {
            display: block;
            color: red;
        }
    </style>
</head>

<body>
    <div id="countdown">
        距离2022年考研倒计时
        <span></span>
    </div>
    <script>
        //gex为考研时间
        let countdown = document.querySelector("#countdown span"),
            gex = new Date("2021/12/25");

        function gexTime() {
            //距离考研倒计时秒（相对于1970年1月1日00时0分0秒0毫秒）
            //天 时 分 秒
            let time = gex - Date.now(),
                ss = addZero(Math.floor((time / 1000) % 60)),
                mm = addZero(Math.floor((time / 60000) % 60)),
                hh = addZero(Math.floor((time / 3600000) % 24)),
                DD = Math.floor(time / 86400000);
            countdown.innerHTML = `${DD}天${hh}时${mm}分${ss}秒`;
        }

        function addZero(n) {
            return n < 10 ? "0" + n : n + "";
        }
        gexTime();
        setInterval(gexTime, 1000);
    </script>
</body>

</html>

node.js部分：

var fs = require('fs');
var http = require('http');

var server = http.createServer();

server.on('request', function(req, res) {
    var url = req.url;

    if (url === '/index') {
        fs.readFile('../index.html', function(error, data) {
            if (error) {
                res.setHeader('Content-Type', 'text/html; charset=utf8');
                console.log("文件读取失败，请稍后再试！");
            } else {
                res.setHeader('Content-Type', 'text/html; charset=utf8');
                res.end(data);
            }
        });
    }
});

server.listen(3000, function() {
    console.log("服务器启动成功!");
})

运行结果：
在这里插入图片描述

五、node读取图片等其他文件并通过服务器发送给客户端

要想通过node读取图片等其他文件并通过服务器发送给客户端，我们需要以下两步

搭建服务器
读取图片等其他文件并发数给客户端

注意：当我们读取其他文件的时候，为保证不会出现错误，我们必须加上以下代码，其中’Content-Type’后跟的是文件类型，不同文件的类型不一样 。jpg 图片的是 image/jpeg 。更多类型详情

res.setHeader('Content-Type', 'image/jpeg');

示例如下，这是我的文件存储目录：
在这里插入图片描述

node.js部分：

var fs = require('fs');
var http = require('http');

var server = http.createServer();

server.on('request', function(req, res) {
    var url = req.url;

    if (url === '/img') {
        fs.readFile('../img/1.jpg', function(error, data) {
            if (error) {
                res.setHeader('Content-Type', 'image/jpeg');
                console.log("图片读取失败，请稍后再试！");
            } else {
                //图片就不需要指定字符编码了，我们说的字符编码是字符
                res.setHeader('Content-Type', 'image/jpeg');
                res.end(data);
            }
        });
    }
});

server.listen(3000, function() {
    console.log("服务器启动成功!");
})

运行结果：
在这里插入图片描述

不及你笑靥如花

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
04-node.js中url根据不同的请求路径发送不同的响应结果、如何解决服务器乱码问题、解析html标签、读取html并通过服务器发送给客户端、读取图片等其他文件并通过服务器发送给客户端

这是我学习node的整理笔记。是我对各个视频和文档的综合理解，以备我日后复习存储。如果有错误的地方，还请各位大佬多多赐教node.js中 request.url 详解以及如何解决 node 乱码问题一、 request.url根据不同的请求路径发送不同的响应结果二、解决 node 服务器中文乱码问题三、node解析html标签一、 request.url根据不同的请求路径发送不同的响应结果request.url ：可以用来获取客户端请求路径注意：request.url 路径必须是相对路.
复制链接

扫一扫