详解Nodejs之静态资源处理

更新时间：2017年06月05日 11:12:24 作者：纯臻

这篇文章主要介绍了详解Nodejs之静态资源处理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前言

刚开始用Nodejs写简单的web服务器的时候，总是感觉少了点什么。

原来，我一直是在页面上输出什么Hello World！啊， It Works.之类的了。还确实没有处理关于CSS， JS这些引用的静态相关的资源。

一开始觉得处理这些东西应该会非常的easy，结果发现不仅仅是这么回事。途中也遇到了一些人们经常可能会犯的想当然的错误。于是我就决定好好的记录一下关于Nodejs中对于静态资源的处理。

着眼于问题

重现问题

先来展示一下目录结构吧。

E:\CODE\NODEJS\LEARN\WEB\EXPRESS-STATIC
│ server.js
│
├─html
│   index.html
│
└─public
  ├─css
  │   index.css
  │
  ├─imgs
  │   1.gif
  │
  └─js
      index.js

这样一个web项目的骨架就算是搭建好了。下面简单的使用nodejs的http模块实现一个web服务器。目标就是显示index.html

index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>My Index Page</title>
    <link rel="stylesheet" href="/public/css/index.css" rel="external nofollow" >
  </head>
  <body>
    <h1>It Works.</h1>
    <hr>
    <img src="/public/imgs/1.gif" />
  </body>
</html>

index.css

* {
  padding: 0px;
  margin: 0px;
}

h1 {
  color: yellowgreen;
}

body {
  background-color: #2C001E;
}

server.js

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


function handle_request(req, res) {

  // 客户端对服务器的请求，说白了就是对相关文件内容的请求。
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end(get_file_content(__dirname + '\\' + 'html' + '\\' + 'index.html'));
}

function get_file_content(filepath) {
  return fs.readFileSync(filepath);
}

var server = http.createServer(handle_request);
server.listen(8080);

代码中用到了一个名为__dirname的变量，其值就是当前运行文件的绝对路径。通过它，我们可以组装出我们想要获取的文件的全路径。

运行代码，开启服务器。

node server.js

发现问题

然后我们打开浏览器，会发现这样的景象。

没有任何效果的页面

不仅是CSS样式没显示出来，就连图片也同样没有正确显示。

然后我们打开浏览器控制台，会发现客户端向服务器发送了3次请求，分别是:

客户端请求内容

localhost: HTML代码页
index.css：样式文件
1.gif：图片文件

之所以我们没能看到具体的效果，就是因为服务器没有正确返回相关的内容啊。这样一想，一下子就恍然大悟了。所以这颗Silver Bullet就是

针对每一个不同的资源请求，正确的返回相关的内容。

解决问题

我的思路：

剖析request请求地址。分割出文件名，后缀名。
根据后缀补全相关文件在文件系统中的全路径。
根据全路径读取内容，返回给客户端。

server.js

然后简单的修改了一下server.js，当然这里也只是简单的做下示意，生产代码可千万不要这么写。

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


function handle_request(req, res) {

  // 不管是什么请求，对文件的请求的话，应该是针对后缀名进行内容读取发放。
  var suffix = req.url.substr(req.url.length - 4, req.url.length);
  var realpath = __dirname + '\\' + 'public' + '\\';
  var filename = req.url.substr(req.url.length - 9);
  if (suffix === '.css') {
    res.writeHead(200, { 'Content-Type': 'text/css' });
    res.end(get_file_content(realpath + '\\css\\' + filename));
  } else if (suffix === '.gif') {
    res.writeHead(200, {'Content-Type': 'image/gif'});
    res.end(get_file_content(realpath+'\\imgs\\1.gif'));
  } else {
    res.writeHead(200, { 'Content-Type': 'text/html' });
    res.end(get_file_content(__dirname + '\\' + 'html' + '\\' + 'index.html'));
  }
}

function get_file_content(filepath) {
  return fs.readFileSync(filepath);
}

var server = http.createServer(handle_request);
server.listen(8080);

然后重启服务器。

node server.js

再次访问浏览器

http://localhost:8080

如下：

静态资源正确访问

因为没有录屏，所以没体现出GIF图的效果，不过关于静态资源已经足够显示了。

express

还有一个比较好用的web框架，express，其对于静态资源的支持更加方便。属于一个更加高层的封装。

核心

通过express对象的app.use(express.static(folder_path))方法就可以了。方法的参数指定为相关的静态资源文件夹路径即可。

server-express.js

/**
 * 使用express来实现对于静态资源的控制。
 */
let express = require('express');
let fs = require('fs');
let path = require('path');


var app = express();

app.use(express.static(path.join(__dirname, './public')));

app.all('/', function(req, res){
  console.log("=======================================");
  console.log("请求路径："+req.url);
  var filename = req.url.split('/')[req.url.split('/').length-1];
  var suffix = req.url.split('.')[req.url.split('.').length-1];
  console.log("文件名：", filename);
  if(req.url==='/'){
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end(get_file_content(path.join(__dirname, 'html', 'index.html')));
  }else if(suffix==='css'){
    res.writeHead(200, {'Content-Type': 'text/css'});
    res.end(get_file_content(path.join(__dirname, 'public', 'css', filename)));
  }else if(suffix in ['gif', 'jpeg', 'jpg', 'png']) {
    res.writeHead(200, {'Content-Type': 'image/'+suffix});
    res.end(get_file_content(path.join(__dirname, 'public', 'images', filename)));
  }
});


function get_file_content(filepath){
  return fs.readFileSync(filepath);
}

app.listen(8080);

index.html

因为刚才使用了静态资源控制，也就是说我们可以简化HTML页面中对于静态资源的路径拼写。比如：

原来在HTML页面中要这么写：

<img src='/public/images/1.gif' />

现在只需要这么写了：

<img src='/images/1.gif' />

看起来就是少了个 /public，但是实际上通过这一点就可以表明express 其实帮我们省去了很多枯燥的工作内容。

然后打开浏览器就可以看到具体的静态资源内容了。

express控制静态资源

那么对于不同的图片类型的支持程度如何呢？

下面修改一下HTML页面：

<html>
  <head>
    <meta charset="UTF-8">
    <title>My Index Page</title>
    <link rel="stylesheet" href="/css/index.css" rel="external nofollow" >
  </head>
  <body>
    <h1>It Works.</h1>
    <hr>
    <img src="/images/1.gif" /><br>
    <img src="/images/2.jpg" alt=""><br>
    <img src="/images/3.png" alt=""><br>
  </body>
</html>

打开浏览器查看对于gif, png, jpg的支持如何？

针对不同类型图片的支持

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

node.js中的fs.fchown方法使用说明
这篇文章主要介绍了node.js中的fs.fchown方法使用说明,本文介绍了fs.fchown方法说明、语法、接收参数、使用实例和实现源码,需要的朋友可以参考下
2014-12-12
NodeJs Express路由使用流程解析
路由路径和请求方法一起定义了请求的端点，它可以是字符串、字符串模式或者正则表达式。后端在获取路由后，可通过一系列类似中间件的函数去执行事务
2023-01-01
node.js如何充分利用多核cpu
这篇文章主要介绍了node.js如何充分利用多核cpu，想了解node.js的同学，可以参考下
2021-04-04
npm镜像源证书过期的问题解决
因为npm官方镜像在国内访问很慢,我们基本上都会选择切换到国内的一些npm镜像,本文主要介绍了npm镜像源证书过期的问题解决,具有一定的参考价值,感兴趣的可以了解一下
2024-07-07
Node.js利用debug模块打印出调试日志的方法
debug日志打印模块主要实现功能是带命名空间（模块名）、时间戳、色彩输出日志；将日志写入文件；浏览器端使用；格式化函数；支持自定义方法。下面这篇文章主要介绍了Node.js利用debug模块打印出调试日志的方法，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-04-04
深入解析Nodejs中的大文件读写
这篇文章主要介绍了深入解析Nodejs中的大文件读写，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
nodejs实现获取某宝商品分类
这篇文章主要介绍了nodejs实现获取某宝商品分类,十分的简单实用，进入后台直接打开控制台，把代码粘进去运行就OK了，有需要的小伙伴可以参考下。
2015-05-05
nodejs 终端打印进度条实例代码
本篇文章主要介绍了nodejs 终端打印进度条实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
npm淘宝镜像过期解决办法
npm 官方镜像在国内访问很慢,很多同学都会选择切换到国内的一些 npm 镜像,本文主要介绍了npm淘宝镜像过期解决办法,感兴趣的可以了解一下
2024-02-02
Node.js 模块的加载逻辑你了解嘛
这篇文章主要为大家介绍了Node.js 模块的加载逻辑，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-01-01

详解Nodejs之静态资源处理

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具