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

相关推荐
excel28 分钟前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着40 分钟前
全栈框架next.js入手指南
前端·next.js
你的人类朋友2 小时前
什么是API签名?
前端·后端·安全
会豪4 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子4 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶4 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子4 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_5 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23335 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin5 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js