nodejs从服务器返回静态文件,详解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
My Index Page
It Works.
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页面中要这么写:
现在只需要这么写了:
看起来就是少了个 /public, 但是实际上通过这一点就可以表明express 其实帮我们省去了很多枯燥的工作内容。
然后打开浏览器就可以看到具体的静态资源内容了。
那么对于不同的图片类型的支持程度如何呢?
下面修改一下HTML页面:
My Index Page
It Works.
打开浏览器查看对于gif, png, jpg的支持如何?
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
nodejs从服务器返回静态文件,详解Nodejs之静态资源处理相关推荐
- 服务器server.cfg文件详解,配合L4D使用
服务器server.cfg文件详解,配合L6D使用,未知或错误参数说明希望XD补全和修正 该设置文件针对用srcds.exe开服务器并使用LXD插件的情况,用MAP方式开图会无效 文件内容如下: // ...
- NodeJS+Express+mySQL服务端开发详解
NodeJS+Express+mySQL服务端开发详解 随着NodeJS的发展,现在已经被很多人熟知,NodeJS已经成为了前端开发人员必备的技能.本文不会对NodeJS过多介绍 如果你感兴趣可以访问 ...
- vue-cli生成的模板各个文件详解(转)
vue-cli脚手架中webpack配置基础文件详解 一.前言 原文:https://segmentfault.com/a/1190000014804826 vue-cli是构建vue单页应用的脚手架 ...
- vue-cli脚手架配置基础文件详解/新手入门必看
vue-cli 脚手架中webpack 配置基础文件详解 需要Word版本 的小伙伴可以发我邮件2445478193@qq.com 一.前言 vue-cli是构建vue单页应用的脚手架,输入一串指定的 ...
- 网站服务器怎么组件,网站服务器搭建与配置详解!
原标题:网站服务器搭建与配置详解! 服务器大家经常会听说,但是可能大家对个中概念还有些不明白,这里跟大家说说网站服务器的搭建与配置. 网站服务器概念 网站服务器是网络应用的基础硬件设施,简言之即存放网 ...
- 创建三个并发进程linux,Linux下几种并发服务器的实现模式(详解)
1>单线程或者单进程 相当于短链接,当accept之后,就开始数据的接收和数据的发送,不接受新的连接,即一个server,一个client 不存在并发. 2>循环服务器和并发服务器 1.循 ...
- php读取大文件详解【OK】
在php中,对于文件的读取时,最快捷的方式莫过于使用一些诸如file.file_get_contents之类的函数,简简单单的几行代码就能很漂亮 的完成我们所需要的功能.但当所操作的文件是一个比较大的 ...
- 1 linux下tcp并发服务器的几种设计的模式套路,Linux下几种并发服务器的实现模式(详解)...
1>单线程或者单进程 相当于短链接,当accept之后,就开始数据的接收和数据的发送,不接受新的连接,即一个server,一个client 不存在并发. 2>循环服务器和并发服务器 1.循 ...
- Redis配置文件redis.conf文件详解
Redis配置文件redis.conf文件详解 唠嗑 这里面的意思只要看得差不多其实就是已经对redis有熟悉的感觉,就比如 推塔已经推到别人家的大门~~~~~~~~废话不多说直接开始了 知道大家都不 ...
最新文章
- cPanel之EasyApache (Apache Update)的使用
- -i 可以编译添加多个_C语言的编译过程
- ubuntu samba重启 mount命令
- 四川大学计算机网络_四川大学20考研情况
- 【收藏】史上最全推荐系统传统算法合集
- linux三剑客之awk
- Linux下的目录简介
- iphone流量 信息服务器,iphone几个功能必须关闭,别再让流量不够用
- java考勤表导出_考勤表如何导出?
- Delphi JSON总结
- 程序员常用英文名参考
- python图片换脸_无需PS,200 行 Python 代码实现简单图片人像识别换脸
- (详细)Windows10系统自动修复方法
- CAS单点登录-密码管理(十三)
- UnrealEngine蓝图进阶学习笔记(六):按波次生成敌人
- 钟南山:越晚“阳”,症状或越轻
- 安装CAD缺少html,Win10系统安装CAD2007失败缺少.NET组件如何解决
- 大连北站到大连计算机学校体育馆,大连北站到圣亚海洋世界怎么走
- Tone Mapping Correction
- 元宇宙六大技术全景图