Node.js中如何处理静态资源

最新推荐文章于 2022-11-10 16:50:00 发布

webchang

最新推荐文章于 2022-11-10 16:50:00 发布

阅读量1.9k

点赞数 4

分类专栏： node 文章标签： nodejs 前端 js

本文链接：https://blog.csdn.net/weixin_43974265/article/details/111761878

版权

node 专栏收录该内容

12 篇文章 4 订阅

订阅专栏

处理静态资源

1、问题描述

浏览器在收到服务器返回的HTML内容之后，就要开始从上到下依次解析,当在解析的过程中，如果发现:

link
script
img
iframe
video
audio

等带有src或者link 的href属性标签的时候，浏览器会自动对这些静态资源发起一个新的请求。我们要对这些新的请求进行处理

2、解决方法

为了方便的统一处理这些静态资源，所以我们约定把所有的静态资源都存放在 public目录，目的是为了统一处理

如果请求路径是以 /public/ 开头的，则服务器认为你要获取 public中的某个资源，所以我们就直接可以把请求路径当作文件路径来直接进行读取

3、代码演示

（1）文件结构

（2）index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>首页</title>
  <link rel="stylesheet" href="/public/lib/bootstrap.css">
  <link rel="stylesheet" href="/public/css/main.css">
</head>
<body>
<h1>灰太狼</h1>
<img src="/public/img/1.jpg">
</body>
</html>

注意：在服务端中，文件中的路径就不要去写相对路径了。因为这个时候所有的资源都是通过url标识来获取的。
服务器开放 /public/ 目录
所以代码中的请求路径都写成：/public/xxx
/ 在这里就是url根路径的意思。
浏览器在真正发请求的时候会最终把url拼接到 http:/ /127.0.0.1:3000上

（3）app.js文件

如果不对那些静态资源进行处理，我们看一下是什么情况

let http = require('http');
let fs = require('fs');

http.createServer(function (request,response) {
  console.log("服务器收到请求");
  let url = request.url;
  if (url === '/') {
    fs.readFile('./views/index.html',function (err,data) {
      if (err) {
        response.end('404');
        return;
      }
      response.end(data)
    })
  }
}).listen(3000,function () {
  console.log('http://127.0.0.1:3000');
})

使用node app.js启动服务器，访问 http://127.0.0.1:3000，打开控制台，结果如图所示。原因就在于我们没有写对这些静态资源进行处理的代码，服务器读取不到它们，也就无法返回给浏览器。下面重新写app.js

（4）app.js（对静态资源进行处理）

//app.js文件

let http = require('http');
let fs = require('fs');

http.createServer(function (request,response) {
  console.log("服务器收到请求");
  let url = request.url;
  if (url === '/') {
    fs.readFile('./views/index.html',function (err,data) {
      if (err) {
        response.end('404');
        return;
      }
      response.end(data)
    })
  } else if (url.indexOf('/public/') !== -1) {
     //此处是关键，当发现请求路径中含有 /public/，我们把请求路径当作文件路径来直接进行读取
    fs.readFile('.' + url,function (err,data) {
      if (err) {
        response.end('404');
        return;
      }
      response.end(data);
    })
  }
}).listen(3000,function () {
  console.log('http://127.0.0.1:3000');
})