位置: 编程技术 - 正文

详解Nodejs之静态资源处理(nodejs 静态页面)

编辑:rootadmin

推荐整理分享详解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就是

详解Nodejs之静态资源处理(nodejs 静态页面)

针对每一个不同的资源请求,正确的返回相关的内容。

解决问题

我的思路:

剖析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 转载请保留说明!

上一篇:Node.js开发第三方微信公众平台(node.js web开发)

下一篇:Node.js连接mongodb实例代码(node.js连接mysql数据库的方法有哪些)

  • 计提工资是包含社保吗
  • 社保局的员工是公务员吗
  • 下岗职工可以享受低保吗
  • 增值税采用零税率政策的内容
  • 应收账款折扣怎么计算
  • 注册资本低于实际投资
  • 长期借款转入实收资本
  • 固定资产清理增加记哪一方
  • 法人贷款用于公司经营的分录怎么做
  • 收到美元货款兑换人民币流程
  • 缴纳增值税金税率是多少
  • 进项税发票认证流程
  • 电费专票抵扣需要发票吗
  • 兼营小规模纳税人增值税优惠
  • 个体户开发票要交税吗
  • 服务费的发票
  • 固定资产销售账务处理的例题
  • 银行抵押贷款结清后需要解押吗
  • 开具红字发票后又开了蓝字发票 怎么入账
  • 企业为开发新产品新技术新工艺
  • 公司名下汽车过户给个人
  • php测验
  • rasman.exe - rasman是什么进程 有什么作用
  • Win10 Build 19043.1266(21H1)更新已知问题汇总
  • 金税盘服务费怎么申报抵扣
  • 公司准备上市到真正上市要多久
  • Dardanup郡的小矮人村,澳大利亚 (© Amanda Hughes/Alamy)
  • 公司想减少注册资本
  • 房地产公司土地在资产负债表列入
  • 业务招待费能不能计入销售费用
  • 减免活动怎么做
  • CUDA(10.2)+PyTorch安装加配置 详细完整教程
  • 合同中违约金
  • python中如何读取列表中的指定
  • 公司减持股份是利好还是利空
  • 劳务公司成本怎么算
  • 织梦相关文章调用
  • python struct库
  • 瓶盖再来一次表情包
  • 股份支付的账务如何处理?
  • 财务报表没申报怎么操作呢
  • 零申报步骤
  • 设备融资租赁如何算综合利率
  • 低值易耗品库存
  • 应收账款核算内容
  • 发票怎么跨月作废申请
  • 小规模纳税人不超过10万免增值税
  • 工会发放节日慰问品种类
  • 申报个税劳务报酬按20%扣
  • 制造费用影响什么
  • 一般纳税人购买固定资产进项税可以抵扣吗
  • 暂估怎么冲回
  • 怎么修改注册表的权限
  • 安装windows server 2008 r2
  • win8系统gho
  • ubuntu rar压缩
  • RHCE心得3 基于VSFTP的本地YUM源及光盘YUM源搭建步骤分享
  • 笔记本搜索功能用不了
  • centos安装rz命令
  • win8如何到桌面
  • Ubuntu 14.04 LTS中安装fcitx中文输入法的教程
  • win8系统开机怎么进入桌面
  • perl 删除文件
  • qat开发
  • cmd命令是干嘛的
  • perl处理特殊符号
  • jqueryvalidate验证
  • Android 判断是否打开了微信
  • JavaScript函数中,哪个语句可以返回值
  • 安卓桌面照片插件
  • js正则表达式变量
  • Metaio in Unity3d 教学--- 三. 使用ID Marker作为扫描目标
  • webview设置ua
  • jQuery UI Bootstrap是什么?
  • jquerycuishifeng
  • 河北省税务局云平台运维
  • 陕西国税电子税务局端还可以登录吗
  • 河南税务申报
  • 企业内部清欠的措施和做法
  • 开票系统红色预警情况说明怎么写
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设