http模块服务器端如何响应（获取）静态资源？

news2024/10/6 1:41:03

一、静态资源与动态资源介绍：

（1）静态资源

内容长时间不改变的资源。eg：图片、视频、css js html文件、字体文件...

（2）动态资源

内容经常更新的资源。eg：百度首页、淘宝搜索列表...

二、服务器端如何获取静态资源的代码？

我的目录：

01.css文件：

h1{
    color: red;
    font-size: 30px;
}

01.js文件：

var button=document.getElementById('button1');
button.onclick=function(){
    this.style.backgroundColor="yellow";
}

01.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/01.css">
</head>
<body>
    <h1>静态资源</h1>
    <button id="button1">请点击我</button>
</body>
<script src="./js/01.js"></script>
</html>

serve.js文件：

// 1.导入http模块
const http = require('http');
const fs = require('fs');
// 2.创建服务对象
const server = http.createServer((request, response) => {
    // 获取请求url路径
    let { pathname } = new URL(request.url, 'http://127.0.0.1');
    // 拼接文件路径 以我的目录为例子，我所有的文件都是在pages这个文件夹里面的。所以定义一个变量filePath来进行总体拼接，以简化后续代码
    // 注意：如果我不单单想局限于读取pages文件夹下的内容，若我想读取我的大文件夹my下的任何文件，就将filePath设置为let filePath=__dirname+pathname; 注意，读取的文件名不能以中文命名。否则会报错
    let filePath=__dirname+'/pages'+pathname;
    // 读取文件 fs异步API
    fs.readFile(filePath,(err,data)=>{
        if(err){
            response.end("文件读取失败,失败原因是:"+err.message);
            return;
        }
        response.end(data);
    })
})
// eg：服务器端响应出01.css静态资源，即打开浏览器输入http://127.0.0.1/css/01.css即可显示其代码内容
// 3.监听端口，启动服务
server.listen(9000, () => {
    console.log('服务已启动...');
})