详解Nodejs之静态资源处理


Posted in NodeJs onJune 05, 2017

前言

刚开始用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

发现问题

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

详解Nodejs之静态资源处理

没有任何效果的页面

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

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

详解Nodejs之静态资源处理

客户端请求内容

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

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

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

解决问题

我的思路:

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

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

如下:

详解Nodejs之静态资源处理

因为没有录屏,所以没体现出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 其实帮我们省去了很多枯燥的工作内容。

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

详解Nodejs之静态资源处理

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

下面修改一下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的支持如何?

详解Nodejs之静态资源处理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
nodejs微信公众号支付开发
Sep 19 NodeJs
详解Nodejs的timers模块
Dec 22 NodeJs
详解nodeJS中读写文件方法的区别
Mar 06 NodeJs
详解nodejs微信公众号开发——4.自动回复各种消息
Apr 11 NodeJs
nodeJS实现路由功能实例代码
Jun 08 NodeJs
手把手教你把nodejs部署到linux上跑出hello world
Jun 19 NodeJs
nodejs实现简单的gulp打包
Dec 21 NodeJs
Nodejs下使用gm圆形裁剪并合成图片的示例
Feb 22 NodeJs
nodejs 使用 js 模块的方法实例详解
Dec 04 NodeJs
nodeJS进程管理器pm2的使用
Jan 09 NodeJs
详解nodejs 开发企业微信第三方应用入门教程
Mar 12 NodeJs
浅谈Node的内存泄露问题
May 06 NodeJs
nodejs集成sqlite使用示例
Jun 05 #NodeJs
详解nodeJS之二进制buffer对象
Jun 03 #NodeJs
深入理解Nodejs Global 模块
Jun 03 #NodeJs
nodejs socket实现的服务端和客户端功能示例
Jun 02 #NodeJs
NodeJs使用Mysql模块实现事务处理实例
May 31 #NodeJs
基于nodejs 的多页面爬虫实例代码
May 31 #NodeJs
详解nodeJS之路径PATH模块
May 31 #NodeJs
You might like
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP Error与Logging函数的深入理解
2013/06/03 PHP
深入php多态的实现详解
2013/06/09 PHP
php批量上传的实现代码
2013/06/09 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
jQuery数组处理代码详解(含实例演示)
2012/02/03 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
无刷新上传文件并返回自定义值
2015/06/11 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
2016/08/24 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
jQuery+PHP+Mysql实现抽奖程序
2020/04/12 jQuery
jQuery模拟实现天猫购物车动画效果实例代码
2017/05/25 jQuery
input file样式修改以及图片预览删除功能详细概括(推荐)
2017/08/17 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
angular多语言配置详解
2019/05/16 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
Python实现的随机森林算法与简单总结
2018/01/30 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
django数据模型(Model)的字段类型解析
2019/12/25 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
世界上最好的帽子:Tilley
2016/11/27 全球购物
大学生水文观测实习自我鉴定
2013/09/29 职场文书
计算机专业学生的自我评价
2013/12/15 职场文书
工商治理实习生的自我评价分享
2014/02/20 职场文书
初中作文评语大全
2014/04/23 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
公证书格式
2015/01/23 职场文书
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
关于EntityWrapper的in用法
2022/03/22 Java/Android