关闭

Nodejs之静态资源处理

标签: expressnodejs静态资源处理
9743人阅读 评论(0) 收藏 举报
分类:

前言

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


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

一开始觉得处理这些东西应该会非常的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">
    </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">
    </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的支持如何?
针对不同类型图片的支持


总结

经过了这些个尝试,从发现问题,到解决问题的整个过程,其实还是很让人兴奋的。其实,编程也是这么个道理:

要敢于面对它,然后吃掉它。

1
0
查看评论

nodejs使用nodejs创建简单的静态文件服务器

在开始之前,应该好好规划一下项目的文件目录了。我的目录结构如下: assets放置网站的静态文件css,js,img等;common存放项目的配置文件和一些通用文件;server存放服务处理文件,将要创建的静态文件服务就是放在此目录中; tpl放置的是模板文件也就是网页文件。 文件的下载...
  • zxsrendong
  • zxsrendong
  • 2013-11-18 14:59
  • 20845

Node学习入门之一:静态资源服务器搭建

Js的火爆不用多说,且(后端js===Node),Node的优势主要提现在:高性能、事件驱动、异步编程、非阻塞IO、前后端统一,适用于I/O密集型场景,当然js的语法加无需类似前端的兼容也是优势之一 静态资源分离优势为:参考http://www.zhihu.com/question/20534662...
  • out__lier
  • out__lier
  • 2014-12-13 12:26
  • 4155

Nodejs express之静态资源

静态资源包括hml、css、js、jpg等 express也是使用了中间件来处理静态资源,使用也是非常简单: // 导入express模块 var express = require('express'); // 创建app对象 var app = express(); // ...
  • pretent
  • pretent
  • 2015-04-18 00:03
  • 5224

【nodejs】http加载静态文件

问题提出:浏览器向后台发送请求后,后台返回一个html界面。但是在浏览器中没有加载js、css等静态资源,查找愿意后发现是Content-Type的原因。浏览器不知道css、js等文件的文件格式,无法成功加载静态文件。所以,需要设置正确的文件格式。 解决方案一:手动设置Content-Type。...
  • swl979623074
  • swl979623074
  • 2016-11-28 19:55
  • 1743

nodejs访问本地静态资源(进入index.html)

最近用nodejs搭建服务,需要直接访问本地的index.html文件。让别的电脑通过输入IP:/index.html访问 在网上也找到了代码,顺便做个笔记 代码var url = require("url"), fs=require("fs"...
  • yy211zhu
  • yy211zhu
  • 2016-12-09 19:03
  • 3995

node和express分别实现静态文件服务器

1、nodeJS版var http=require('http'); var fs=require('fs'); var url=require('url'); var path=require('path'); var PORT=90...
  • u013830811
  • u013830811
  • 2016-01-23 20:50
  • 5308

nodejs实战:使用原生nodeJs模块实现静态文件及REST请求解析及响应(基于nodejs6.2.0版本,不使用express等webMVC框架 )

一、准备工作 1、安装nodejs 首先你需要安装nodeJs 那么nodejs官网:http://nodejs.cn/,下载相应版本,一步一步安装。 二、使用nodejs开发服务器后台应用 1、创建nodejs应用 直接上代码 var http = require('http');...
  • eguid_1
  • eguid_1
  • 2016-08-11 14:56
  • 1541

Nodejs基础之静态文件托管

静态文件托管const app = express(); app.user('/public', express.static(__dirname + '/public'));// 当用户访问public的路径时,会转到static里面的目录寻找
  • millions_02
  • millions_02
  • 2017-12-26 17:12
  • 94

使用Nodejs快速搭建一个的本地静态文件服务器

如果我们直接打开html文件他是以file:///方式打开的,但这种方式有时会遇到跨域的问题:“cross-origin”,所以我们需要搭建一个简易的本地服务器,Nodejs就可以满足我们这个需求:参考链接: https://segmentfault.com/q/1010000005090969/...
  • u014291497
  • u014291497
  • 2016-10-30 22:21
  • 3819

nodejs中的==、===、!=、!==的区别

当这个逻辑运算符长度为 2 的时候(==, !=),只是判断外在的值是不是一样的,而不会判断类型。如 var a = 1, b = "1"; console.log(a == b); 它输出的结果就是 true。但是如果我...
  • UP19910522
  • UP19910522
  • 2013-10-23 21:35
  • 2372
    个人资料
    • 访问:3239280次
    • 积分:34877
    • 等级:
    • 排名:第148名
    • 原创:357篇
    • 转载:35篇
    • 译文:9篇
    • 评论:734条
    友情链接
    我的偶像
    个人主页
      GitHub
    放松一下
    博客专栏
    最新评论
    版权信息
    去除本页广告
    图片炸弹装填中...

        
    [img=赞一个]http://bpic.588ku.com/element_origin_min_pic/16/12/12/0d96da96cf36505736c09d63832eaac8.jpg[/img]