详细说明Nodejs的静态资源处理

序

当我第一次开始用Nodejs编写一个简单的web服务器时，我总觉得少了点什么。

原来我总是在页面上输出Hello World！啊，它工作等等。真的没有处理CSS和JS引用的静态相关资源。

起初我以为处理这些事情会很容易，但我发现不止如此。在路上，我也遇到了一些人们经常认为理所当然的错误。所以我决定好好记录一下Nodejs中静态资源的处理。

专注于问题

重现问题

让我们先展示一下目录结构。

e : \ code \ nodejs \ learn \ web \ express-staticserver . jshtmlindex.html公共 CSS index.css imgs 1.gif 以下简单使用nodejs的http模块实现一个web服务器。目标是展示index.html

index.html

html head meta charset=' UTF-8 ' title my Index Page/title link rel='样式表' href='/public/CSS/Index . CSS ' rel='外部nofollow'/head body h1It Works。/h1 HR img src=' http :/public/imgs/1 . gif '/body/html index . CSS

* { padding: 0pxmargin: 0px}h1 { color:黄绿色；}车身{背景色-color : # 2C 001 E；}server.js

var http=require(' http ')；var fs=require(' fs ')；函数handle _ request (req，RES){//客户端对服务器的请求，说白了就是对相关文件内容的请求。res.writeHead(200，{ ' Content-Type ' : ' text/html ' })；RES . end(get _ file _ content(_ _ dir name ' \ \ ' ' html ' ' \ \ ' ' index . html ')；}函数get_file_content(文件路径){ return fs.readFileSync(文件路径)；} var server=http . CreateServer(handle _ request)；server . listen(8080)；代码中使用了一个名为__dirname的变量，其值是当前运行文件的绝对路径。通过它，我们可以组装我们想要获取的文件的完整路径。

运行代码以打开服务器。

Node server.js发现一个问题

然后，当我们打开浏览器的时候，就会发现这个场景。

没有任何效果的页面

不仅CSS样式不显示，图片也显示不正确。

然后我们打开浏览器控制台，发现客户端已经向服务器发送了三个请求，分别是：

客户端请求内容

Localhost: HTML代码index.css: style file1.gif:之所以看不到图片文件的具体效果，是因为服务器没有正确返回相关内容。我突然有了这样的想法。所以这个银弹是

对于每个不同的资源请求，请正确返回相关内容。

解决问题

我的思路：

解析请求地址。分离出文件名和后缀。根据后缀完成文件系统中相关文件的完整路径。根据完整路径读取内容并将其返回给客户端。server.js

然后简单修改server.js，当然这里只是简单的说明，生产代码绝对不应该这样写。

var http=require(' http ')；var fs=require(' fs ')；函数handle_request(req，res) { //不管是什么请求，对文件的请求的话，应该是针对后缀名进行内容读取发放。定义变量后缀=请求。网址。substr(请求。网址。长度-4，请求。网址。长度)；var真实路径=_ _ dirname ' \ \ ' ' public ' ' \ \var文件名=请求。网址。substr(请求。网址。长度-9)；如果(后缀==='。css') { res.writeHead(200，{ ' Content-Type ' : ' text/CSS ' })；RES . end(get _ file _ content(真实路径' \ \ CSS \ \ '文件名));} else if(后缀==='。gif') { res.writeHead(200，{ ' Content-Type ' : ' image/gif ' })；RES . end(get _ file _ content(真实路径' \ \ imgs \ \ 1。gif ')；} else { res.writeHead(200，{ ' Content-Type ' : ' text/html ' })；RES . end(get _ file _ content(_ dir名称' \ \ ' ' html ' ' \ \ ')索引。html ')；} }函数get_file_content(文件路径){ return fs.readFileSync(文件路径);} var服务器=http。CreateServer(handle _ request)；服务器。听(8080)；然后重启服务器。

node server.js再次访问浏览器

http://localhost:8080

如下：

因为没有录屏，所以没体现出GIF格式格式图的效果，不过关于静态资源已经足够显示了。

表达

还有一个比较好用的网框架，快递，其对于静态资源的支持更加方便。属于一个更加高层的封装。

核心

通过表达对象的app。使用(快递。静态(文件夹路径))方法就可以了。方法的参数指定为相关的静态资源文件夹路径即可。

server-express.js

/** * 使用表达来实现对于静态资源的控制*/let express=require(' express ')；让fs=require(' fs ')；让path=require(' path ')；var app=express()；app。使用(快递。静态(路径。join(_ _ dirname，')./public ')))；app.all('/')，function(req，RES){ console。日志('===============================================================')；console.log('请求路径：'请求。网址)；var文件名=请求。网址。split('/')[req。网址。拆分('/').长度-1];定义变量后缀=req.url.split(' . ')[req.url.split(' . ').长度-1];console.log('文件名：',文件名);如果(请求。URL==='/'){ RES . write head(200，{ ' Content-Type ' : ' text/html ' })；RES . end(get _ file _ content(路径。join(_ _ dirname，' html '，' index。html ')))；}else if(后缀==='css'){ res.writeHead(200，{ ' Content-Type ' : ' text/CSS ' })；RES . end(get _ file _ content(路径。join(_ dirname，' public '，' css '，filename))；}else if(后缀在[“gif”、“jpeg”、“jpg”、“png”]中){ res.writeHead(200，{'Content-Type': 'image/'后缀});RES . end(get _ file _ content(路径。join(_ dirname，' public '，' images '，filename))；}});函数get_file_content(文件路径){ return fs.readFileSync(文件路径);} app。听(8080)；index.html

因为刚才使用了静态资源控制，也就是说我们可以简化超文本标记语言页面中对于静态资源的路径拼写。比如：

原来在超文本标记语言页面中要这么写：

img src='/public/images/1.gif' /现在只需要这么写了：

img src='/images/1.gif' /看起来就是少了个/公共，但是实际上通过这一点就可以表明表达其实帮我们省去了很多枯燥的工作内容。

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

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

下面修改一下超文本标记语言页面：

html标题元字符集=' UTF-8 '标题我的索引页/标题链接rel='样式表href='/css/index.css' rel='外部no follow/head body h1It work ./h1 HR img src=' http :/images/1。gif '/br img src=' http :/images/2。jpg ' alt=' br img src=' http :/images/3。png ' alt=' br/body/html打开浏览器查看对于gif、png、jpg的支持如何？

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。