a随便写的nodejs学习笔记(3)

最新推荐文章于 2021-12-23 19:45:00 发布

在知识的海洋里奋力狗刨

最新推荐文章于 2021-12-23 19:45:00 发布

阅读量133

点赞数

本文链接：https://blog.csdn.net/nhq2018/article/details/106291449

版权

nodejs搭建简易的静态资源服务器

上面附上大致的文件及路径

其中的index.html文件内容如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <link rel="stylesheet" href="./resource/css/index.css">
</head>
<body>
    <div class="box">这是首页</div>
    <img src="./resource/images/01.gif" alt="">
    <img src="./resource/images/01.jpg" alt="">
    <div>
        <video src="./resource/video.mp4" controls></video>
    </div>
</body>
</html>

nodejs文件内容如下:


// html中所有的外部资源路径都会变成网络请求

//1.导入模块
const http = require('http');
const fs = require('fs');
const path = require('path');

//2.创建服务器
let server = http.createServer((req, res) => {
    console.log(req.url);

    //1.请求
    if (req.url == '/') {
        //2.处理
        fs.readFile(path.join(__dirname, 'www', 'index.html'), (err, data) => {
            if (err) {
                throw err;
            } else {
                //3.响应
                res.end(data)
            }
        });
    } else if (req.url == '/resource/css/index.css') {
        fs.readFile(path.join(__dirname, 'www','resource','css', 'index.css'), (err, data) => {
            if (err) {
                throw err;
            } else {
                //3.响应
                res.end(data)
            }
        });
    }else if (req.url == '/resource/images/01.gif') {
        fs.readFile(path.join(__dirname, 'www','resource','images', '01.gif'), (err, data) => {
            if (err) {
                throw err;
            } else {
                //3.响应
                res.end(data)
            }
        });
    } else if (req.url == '/resource/images/01.jpg') {
        fs.readFile(path.join(__dirname, 'www','resource','images', '01.jpg'), (err, data) => {
            if (err) {
                throw err;
            } else {
                //3.响应
                res.end(data)
            }
        });
    }else if (req.url == '/resource/video.mp4') {
        fs.readFile(path.join(__dirname, 'www','resource','video.mp4'), (err, data) => {
            if (err) {
                throw err;
            } else {
                //3.响应
                res.end(data)
            }
        });
    }else {
        res.end('404 not found')
    }

});

//3.开启服务器
server.listen(3000, () => {
    console.log('success');
});

之后运行js文件, 即可在本地开启静态资源的服务, 浏览器中输入localhost:3000, 即可访问到index页面, 并且页面中的css文件, 图片, 视频也相应地加载到index页面中

将上面的js文件精简一下, 变成下面的样子:


//  html中所有的外部资源路径都会变成网络请求
// 一般静态资源（html文件，css文件，图片，音视频） ，服务器通过url来拼接文件路径

//1.导入模块
const http = require('http');
const fs = require('fs');
const path = require('path');

//2.创建服务器
let server = http.createServer((req, res) => {
    console.log(req.url);

    //1.请求
    if (req.url == '/') {
        //2.处理
        fs.readFile(path.join(__dirname, 'www', 'index.html'), (err, data) => {
            if (err) {
                throw err;
            } else {
                //3.响应
                res.end(data)
            }
        });
    } else if (req.url.indexOf('/resource') == 0) {
        //只要是路径以 /resource 开头，就使用req.url来拼接文件路径
        fs.readFile(path.join(__dirname, 'www',req.url), (err, data) => {
            if (err) {
                throw err;
            } else {
                //3.响应
                res.end(data)
            }
        });
    }else {
        res.end('404 not found')
    }

});

//3.开启服务器
server.listen(3000, () => {
    console.log('success');
});

在知识的海洋里奋力狗刨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a随便写的nodejs学习笔记(3)

nodejs搭建简易的静态资源服务器首先大致的文件及路径如下:其中的index.html文件内容如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-
复制链接

扫一扫