首页
所有分类
TAGS
文字工具 EMOJI BIBLE
服务器 NodeJs

详解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之静态资源处理

- Author -

纯臻

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

NodeJs 相关文章推荐
NodeJs的fs读写删除移动监听
Apr 28 NodeJs
nodejs6下使用koa2框架实例
May 18 NodeJs
详解Nodejs之npm&amp;package.json
Jun 15 NodeJs
浅谈nodejs中的类定义和继承的套路
Jul 26 NodeJs
理解nodejs的stream和pipe机制的原理和实现
Aug 12 NodeJs
nodejs判断文件、文件夹是否存在及删除的方法
Nov 10 NodeJs
NodeJs入门教程之定时器和队列
Mar 08 NodeJs
NodeJs生成sitemap站点地图的方法示例
Jun 11 NodeJs
nodejs实现UDP组播示例方法
Nov 04 NodeJs
Nodejs封装类似express框架的路由实例详解
Jan 05 NodeJs
Nodejs 微信小程序消息推送的实现
Jan 20 NodeJs
node快速搭建后台的实现步骤
Feb 18 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
OutputStream(1) persistedstate(1) Set接口(1) Vue(10) axios(1) vuex(1) InputStream(1) HashSet集合(1) 本地化存储(1) Storage(1)
You might like
echo(),print(),print_r()之间的区别？
2006/11/19 PHP
php 在线打包_支持子目录
2008/06/28 PHP
PHP页面输出时js设置input框的选中值
2016/09/30 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
event.srcElement+表格应用
2006/08/29 Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
2010/05/26 Javascript
基于jquery的滑动样例代码
2010/11/20 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
基于jquery异步传输json数据格式实例代码
2013/11/23 Javascript
jquery easyui使用心得
2014/07/07 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
初识Node.js
2015/03/20 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
js实现贪吃蛇小游戏（容易理解）
2017/01/22 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
vue-cli配置文件——config篇
2018/01/04 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
python连接字符串的方法小结
2015/07/13 Python
selenium+python实现自动登录脚本
2018/04/22 Python
对django xadmin自定义菜单的实例详解
2019/01/03 Python
使用tensorflow显示pb模型的所有网络结点方式
2020/01/23 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
如何使用python socket模块实现简单的文件下载
2020/09/04 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
硕士研究生自我鉴定
2013/11/08 职场文书
刑事起诉书范文
2015/05/19 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书
一行代码python实现文件共享服务器
2021/04/22 Python
JS函数式编程实现XDM一
2022/06/16 Javascript