位置: 编程技术 - 正文
推荐整理分享详解Nodejs之静态资源处理(nodejs 静态页面),希望有所帮助,仅作参考,欢迎阅读内容。
文章相关热门搜索词:nodejs静态编译,nodejs生成静态html,node.js静态服务器,node 静态网页,nodejs生成静态html,nodejs生成静态html,nodejs 静态页面,node.js静态服务器,内容如对您有帮助,希望把文章链接给更多的朋友!
前言
刚开始用Nodejs写简单的web服务器的时候,总是感觉少了点什么。
原来,我一直是在页面上输出什么Hello World!啊, It Works.之类的了。还确实没有处理关于CSS, JS这些引用的静态相关的资源。
一开始觉得处理这些东西应该会非常的easy,结果发现不仅仅是这么回事。途中也遇到了一些人们经常可能会犯的想当然的错误。于是我就决定好好的记录一下关于Nodejs中对于静态资源的处理。
着眼于问题
重现问题
先来展示一下目录结构吧。
这样一个web项目的骨架就算是搭建好了。下面简单的使用nodejs的http模块实现一个web服务器。目标就是显示index.html
index.html
index.css
server.js
代码中用到了一个名为__dirname的变量,其值就是当前运行文件的绝对路径。通过它,我们可以组装出我们想要获取的文件的全路径。
运行代码,开启服务器。
发现问题
然后我们打开浏览器,会发现这样的景象。
没有任何效果的页面
不仅是CSS样式没显示出来,就连图片也同样没有正确显示。
然后我们打开浏览器控制台,会发现客户端向服务器发送了3次请求,分别是:
客户端请求内容
localhost: HTML代码页 index.css: 样式文件 1.gif: 图片文件之所以我们没能看到具体的效果,就是因为服务器没有正确返回相关的内容啊。这样一想,一下子就恍然大悟了。所以这颗Silver Bullet就是
针对每一个不同的资源请求,正确的返回相关的内容。
解决问题
我的思路:
剖析request请求地址。分割出文件名,后缀名。 根据后缀补全相关文件在文件系统中的全路径。 根据全路径读取内容,返回给客户端。server.js
然后简单的修改了一下server.js,当然这里也只是简单的做下示意,生产代码可千万不要这么写。
然后重启服务器。
再次访问浏览器
因为没有录屏,所以没体现出GIF图的效果,不过关于静态资源已经足够显示了。
express
还有一个比较好用的web框架,express,其对于静态资源的支持更加方便。属于一个更加高层的封装。
核心
通过express对象的app.use(express.static(folder_path))方法就可以了。方法的参数指定为相关的静态资源文件夹路径即可。
server-express.js
index.html
因为刚才使用了静态资源控制,也就是说我们可以简化HTML页面中对于静态资源的路径拼写。比如:
原来在HTML页面中要这么写:
现在只需要这么写了:
看起来就是少了个 /public, 但是实际上通过这一点就可以表明express 其实帮我们省去了很多枯燥的工作内容。
然后打开浏览器就可以看到具体的静态资源内容了。
那么对于不同的图片类型的支持程度如何呢?
下面修改一下HTML页面:
打开浏览器查看对于gif, png, jpg的支持如何?
标签: nodejs 静态页面
本文链接地址:https://www.jiuchutong.com/biancheng/380835.html 转载请保留说明!友情链接: 武汉网站建设