前言

刚开始用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 其实帮我们省去了很多枯燥的工作内容。

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


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

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


总结

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

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

Nodejs之静态资源处理的更多相关文章

  1. NodeJS + express访问html、css、JS等静态资源文件

    原先做前端开发时都是用XAMPP或LAMP,把HTML.CSS.JS等前端资源放到htdocs下,测试自己的前端代码,但有些不方便的地方是,在调用Ajax请求后无法模拟请求返回的数据,最近学了点Nod ...

  2. nodejs监听服务端口并且代理请求与静态资源

    var express = require('express'); const proxy = require('http-proxy-middleware'); const app = expres ...

  3. nodejs 构建本地web测试服务器 以及 解决访问静态资源的问题!

    直接打开html文件,是以file:///方式打开的,这种方式很多时候会遇到跨域的问题,因此我们一般会搭建一个简易的本地服务器,来运行测试页面. 一.构建静态服务器 1.使用express模块 建立个 ...

  4. nodejs使用express中静态资源托管(express.static())时遇到的bug

    如下:将test.html的页面挂载在服务器上, const express= require('express') const fs= require('fs') let app = express ...

  5. nodejs koa2 设置 静态资源目录

    参考这篇文章:https://blog.csdn.net/qq_38262910/article/details/89147571?utm_medium=distribute.pc_relevant_ ...

  6. ch1-使用路由-静态资源-404页面-ejs模板

    1 package.json 项目文件夹根目录创建这个文件 //要依赖的模块 "dependencies": { //dependency 依赖的复数形式 "expres ...

  7. 转转hybrid app web静态资源离线系统实践

    一.前言 目前的转转app是一个典型的hybrid app,采用的是业内主流的做法: 客户端内有大量业务页面使用webview内加载h5页面承载. 其优点是显而易见的,即:web页面上线频度满足快速迭 ...

  8. statik golang 静态资源嵌入二进制文件工具使用(docker 构建)

      将静态资源打包进二进制文件有好多方便的地方 方便客户演示 代码简单加密 运行方便 statik 就是一款在golang 中用的比较多,nodejs 有一款pkg (oclif 就推荐使用此工具) ...

  9. 原生node写一个静态资源服务器

    myanywhere 用原生node做一个简易阉割版的anywhere静态资源服务器,以提升对node与http的理解. 相关知识 es6及es7语法 http的相关网络知识 响应头 缓存相关 压缩相 ...

随机推荐

  1. appium 中部分 api 的使用方法

    使用的语言是java,appium的版本是1.3.4,java-client的版本是java-client-2.1.0,建议多参考java-client-2.1.0-javadoc. 1.使用Andr ...

  2. 模板继承(extend)——(Day68)

    模板继承 (extend) Django模版引擎中最强大也是最复杂的部分就是模版继承了.模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 block ...

  3. input和raw_input的区别

    input会假设用户输入的是合法的Python表达式raw_input会把所有的输入当作原始数据,然后将其放入字符串中. 在最新的版本之中,input可以直接使用,替代了raw_input. 在2.7 ...

  4. LocalReport Print with C# C#打印RDLC

             {             ;                                                      )             {        ...

  5. ado.net(增删改)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. 关于获得MFC窗口其它类指针的方法(csdn)

    转自:http://tieba.baidu.com/p/252804018 访问应用程序的其它类 获得CWinApp: -在CMainFrame,CChildFrame,CDocument,CView ...

  7. Nginx 自定义404、500错误页面跳转

    自定义Nginx错误界面跳转 1.开启Nginx.conf配置文件下的自定义接口参数. http { fastcgi_intercept_errors on; } 2.在Server区域添加自定义的错 ...

  8. 介绍Web项目中用到的几款JS日历日期控件和JS文本编辑框插件

    第一款日历日期控件:layDate 官方网站:http://laydate.layui.com/ 第二款日历日期控件:my97 官方网站:http://www.my97.net/ 第三款 文本编辑器控 ...

  9. HP P420i Smart Array

    http://blog.mpecsinc.ca/2013/02/hp-p420i-smart-array-adding-4-new-disks.html https://techzone.ergon. ...

  10. EF Code-First 学习之旅 EntityTypeConfiguration<TEntity>

    之前我们配置的实体都都在OnModelCreating方法中,如果有很多实体的话,OnModelCreating方法管理很麻烦 我们可以用单独的类来管理配置,继承EntityTypeConfigura ...