http模块 服务器端如何响应(获取)静态资源?

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

(1)静态资源

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

(2)动态资源

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

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

我的目录:

01.css文件:

css 复制代码
h1{
    color: red;
    font-size: 30px;
}

01.js文件:

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

01.html文件:

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文件 :

javascript 复制代码
// 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来进行总体拼接,以简化后续代码
    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('服务已启动...');
})

服务器运行结果显示 :

当我想获取01.html里面的代码时:在端口号后接/01.html

当我想获取01.js里面的代码时:在端口号后接/js/01.js

相关推荐
创小匠41 分钟前
创客匠人:创始人 IP 变现,从 “单点尝试” 到 “生态赋能” 的跨越
网络·网络协议·tcp/ip
Fireworkitte3 小时前
gRPC和http长轮询
网络·网络协议·http
LuLaLuLaLeLLLLLL4 小时前
RPC 框架学习笔记
网络·网络协议·rpc
冰橙子id4 小时前
linux-远程访问管理(sshd,scp,sftp)
linux·网络·ssh
brzhang6 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止7 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms7 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登7 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
橘子在努力7 小时前
【橘子分布式】Thrift RPC(理论篇)
分布式·网络协议·rpc
Lin Hsüeh-ch'in7 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome