详解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 开发微信公众号(三)微信事件交互实例
Mar 02 NodeJs
NodeJs——入门必看攻略
Jun 27 NodeJs
详解nodejs 文本操作模块-fs模块(二)
Dec 22 NodeJs
Highcharts+NodeJS搭建数据可视化平台示例
Jan 01 NodeJs
初探nodeJS
Jan 24 NodeJs
NodeJS处理Express中异步错误
Mar 26 NodeJs
初识NodeJS服务端开发入门(Express+MySQL)
Apr 07 NodeJs
解析NodeJS异步I/O的实现
Apr 13 NodeJs
详解nodejs模板引擎制作
Jun 14 NodeJs
Nodejs 复制文件/文件夹的方法
Aug 24 NodeJs
详解nodejs通过代理(proxy)发送http请求(request)
Sep 22 NodeJs
Mac下通过brew安装指定版本的nodejs教程
May 17 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
javascript OFFICE控件测试代码
2009/12/08 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
AngularJs导出数据到Excel的示例代码
2017/08/11 Javascript
微信小程序 scroll-view实现锚点滑动的示例
2017/12/06 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Windows下安装python2和python3多版本教程
2017/03/30 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python mock测试的示例
2020/10/19 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
Python利用imshow制作自定义渐变填充柱状图(colorbar)
2020/12/10 Python
python爬虫实现爬取同一个网站的多页数据的实例讲解
2021/01/18 Python
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
Farfetch美国:奢侈品牌时尚购物平台
2019/05/02 全球购物
销售文员岗位职责
2013/11/29 职场文书
太太口服液广告词
2014/03/20 职场文书
安全生产责任书范本
2014/04/15 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
孟佩杰观后感
2015/06/17 职场文书
个人欠条范本
2015/07/03 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
Python3 如何开启自带http服务
2021/05/18 Python