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

相关推荐
患得患失9492 分钟前
【前端】【高德地图WebJs】【知识体系搭建】面要素知识点——>多边形,圆形, 矩形,图形编辑器
前端·编辑器·高德地图·amap
歪歪1005 分钟前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js
歪歪1009 分钟前
如何配置Webpack以实现按需加载模块?
开发语言·前端·webpack·node.js
面向星辰3 小时前
html各种常用标签
前端·javascript·html
梦6503 小时前
HTML新属性
前端
东风西巷5 小时前
PDFgear:免费全能的PDF处理工具
前端·pdf·软件需求
森之鸟6 小时前
Mac电脑上如何打印出字体图标
前端·javascript·macos
mCell6 小时前
GSAP 入门指南
前端·javascript·动效
gnip6 小时前
组件循环引用依赖问题处理
前端·javascript