Nodejs之静态资源处理
前言
刚开始用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">
</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之静态资源处理的更多相关文章
- NodeJS + express访问html、css、JS等静态资源文件
原先做前端开发时都是用XAMPP或LAMP,把HTML.CSS.JS等前端资源放到htdocs下,测试自己的前端代码,但有些不方便的地方是,在调用Ajax请求后无法模拟请求返回的数据,最近学了点Nod ...
- nodejs监听服务端口并且代理请求与静态资源
var express = require('express'); const proxy = require('http-proxy-middleware'); const app = expres ...
- nodejs 构建本地web测试服务器 以及 解决访问静态资源的问题!
直接打开html文件,是以file:///方式打开的,这种方式很多时候会遇到跨域的问题,因此我们一般会搭建一个简易的本地服务器,来运行测试页面. 一.构建静态服务器 1.使用express模块 建立个 ...
- nodejs使用express中静态资源托管(express.static())时遇到的bug
如下:将test.html的页面挂载在服务器上, const express= require('express') const fs= require('fs') let app = express ...
- nodejs koa2 设置 静态资源目录
参考这篇文章:https://blog.csdn.net/qq_38262910/article/details/89147571?utm_medium=distribute.pc_relevant_ ...
- ch1-使用路由-静态资源-404页面-ejs模板
1 package.json 项目文件夹根目录创建这个文件 //要依赖的模块 "dependencies": { //dependency 依赖的复数形式 "expres ...
- 转转hybrid app web静态资源离线系统实践
一.前言 目前的转转app是一个典型的hybrid app,采用的是业内主流的做法: 客户端内有大量业务页面使用webview内加载h5页面承载. 其优点是显而易见的,即:web页面上线频度满足快速迭 ...
- statik golang 静态资源嵌入二进制文件工具使用(docker 构建)
将静态资源打包进二进制文件有好多方便的地方 方便客户演示 代码简单加密 运行方便 statik 就是一款在golang 中用的比较多,nodejs 有一款pkg (oclif 就推荐使用此工具) ...
- 原生node写一个静态资源服务器
myanywhere 用原生node做一个简易阉割版的anywhere静态资源服务器,以提升对node与http的理解. 相关知识 es6及es7语法 http的相关网络知识 响应头 缓存相关 压缩相 ...
随机推荐
- appium 中部分 api 的使用方法
使用的语言是java,appium的版本是1.3.4,java-client的版本是java-client-2.1.0,建议多参考java-client-2.1.0-javadoc. 1.使用Andr ...
- 模板继承(extend)——(Day68)
模板继承 (extend) Django模版引擎中最强大也是最复杂的部分就是模版继承了.模版继承可以让您创建一个基本的“骨架”模版,它包含您站点中的全部元素,并且可以定义能够被子模版覆盖的 block ...
- input和raw_input的区别
input会假设用户输入的是合法的Python表达式raw_input会把所有的输入当作原始数据,然后将其放入字符串中. 在最新的版本之中,input可以直接使用,替代了raw_input. 在2.7 ...
- LocalReport Print with C# C#打印RDLC
{ ; ) { ...
- ado.net(增删改)
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 关于获得MFC窗口其它类指针的方法(csdn)
转自:http://tieba.baidu.com/p/252804018 访问应用程序的其它类 获得CWinApp: -在CMainFrame,CChildFrame,CDocument,CView ...
- Nginx 自定义404、500错误页面跳转
自定义Nginx错误界面跳转 1.开启Nginx.conf配置文件下的自定义接口参数. http { fastcgi_intercept_errors on; } 2.在Server区域添加自定义的错 ...
- 介绍Web项目中用到的几款JS日历日期控件和JS文本编辑框插件
第一款日历日期控件:layDate 官方网站:http://laydate.layui.com/ 第二款日历日期控件:my97 官方网站:http://www.my97.net/ 第三款 文本编辑器控 ...
- HP P420i Smart Array
http://blog.mpecsinc.ca/2013/02/hp-p420i-smart-array-adding-4-new-disks.html https://techzone.ergon. ...
- EF Code-First 学习之旅 EntityTypeConfiguration<TEntity>
之前我们配置的实体都都在OnModelCreating方法中,如果有很多实体的话,OnModelCreating方法管理很麻烦 我们可以用单独的类来管理配置,继承EntityTypeConfigura ...