node服务器响应静态资源

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了node服务器响应静态资源相关的知识,希望对你有一定的参考价值。

刚接触nodejs,写博客只是记录一下自己的学习心得
我这里的静态资源是指一个包括文字、图片、以及点击会有详情框的页面。需要2个js文件和一个html文件

  • 首先新建一个01.js文件
const http = require(\'http\');
var server = http.createServer();
const fs = require(\'fs\');
server.on(\'request\', function (res, rso) {
      var urls = res.url;
    if (urls == \'/\') {
        rso.setHeader(\'Content-Type\', \'text/html ;charset=utf-8\');//设置编码 防止乱码
        fs.readFile(\'./index.html\', \'utf8\', function (err, data) {
            rso.end(data);
        })
    } else {
        fs.readFile(\'.\'+urls,(err,data)=>{ //因为图片是在当前目录下,而服务其返回的是/img/1.jpg,所以要添加一个“.”
            rso.end(data);
        })
       
    }
});
server.listen(8081, function () {
    console.log(\'Server running at http://127.0.0.1:8081/\');
});
  • 再建一个index.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>
</head>
<body>
    <div>
        <p>shdsjhdjsk</p>
        <p>shdsds</p>
        <img src="./img/1.jpg" alt="">
        <h2>cbxnzbczx</h2>
        <p>fghgfhgfgh</p>
        <i>nm,cnbv,n</i>
        <s>u有风度与辐射</s>
    </div>
</body>
<script src=\'./img/index.js\'></script>//点击效果
</html>
  • 再建一个index.js对应点击详情框效果
document.getElementsByTagName(\'img\')[0].onclick=function () {
    alert(\'好看\');//括号中的img为对应上面index.html的标签,选择img,代表点击图片才有详情框,选择‘p’就要点击第一段文字
    
}

最终效果:

以上是关于node服务器响应静态资源的主要内容,如果未能解决你的问题,请参考以下文章

Node访问服务器端静态资源

Node访问服务器端静态资源

Node-请求响应原理HTTP协议

使用node搭建静态资源服务器

请求node服务的静态资源请求不到

用Netty作http静态资源服务器,类似Nginx这样的,大一点的文件响应不正常怎么回事?