Node.js全栈指南:静态资源服务器

news2024/10/6 10:29:18

陈随易

上一章【认识 MIME 和 HTTP】。

我们认识和了解了 MIME 的概念和作用,也简单地学习了通过浏览器控制台查看请求和返回的用法。

通过对不同的 HTML、CSS、JS 文件进行判断,设置不同的 MIME 值,得以让我们的浏览器正正确地接收和显示不同的文件内容,渲染出正确的效果。

但真实场景中,远远不止这三种类型的文件,用成百上千来形容也不为过。

picture 0

上图是一个开源的项目,地址是 https://github.com/jshttp/mime-db。

该项目对所有文件类型的扩展名和 MIME 类型进行了映射。

知道文件扩展名,就能找到对应的 MIME 类型。

知道 MIME 类型,就能知道哪些文件扩展名可以匹配。

但是,也正如它的仓库名字 “mime-db” 所表达的,它是一个映射库。

也就是说,它只是提供了一堆数据,具体如何实现根据扩展名获取 MIME 类型,那得用到另外一个开源项目 https://github.com/jshttp/mime-types。

picture 1

从截图中就能看到相关的文字说明,这个项目依赖了 mime-db 项目。而且,这 2 个项目是同一批作者。

mime-types 提供了多个方法,比较常用的就是 lookup 方法,根据文件扩展名,返回对应的 MIME 值。

目前,这 2 个项目在 npm 平台的周下载量,均在 5 千万次以上,众多知名项目都依赖于这 2 个项目。在 github 上,有 3 千多万个仓库依赖了 mime-types。

而现在,我们的 web 服务器也将使用 mime-types 完成我们今天的主题:静态资源服务器。

实现静态资源服务器

picture 2

在用 mime-types 之前呢,首先要安装这个依赖,请看上图:

在 (1) 处安装,(2) 处的 package.json 文件中就有这个依赖了。

下一步呢,就在我们的项目中用起来。

picture 3

这里涉及到几个步骤,一一说明下。

首先呢,当我们直接在浏览器端输入 http://127.0.0.1:3000 访问的时候,请求的 url 值是 “/”。

没有任何扩展名,也没有文件名,服务器遇到这种情况怎么办呢?总不能什么也不返回吧,那么我们的 WEB 服务器探索之路就到此终止了。

市面上的 WEB 服务器,比如 Apache、Nginx、Caddy、Tomcat。或者 Node.js 中的 Koa、Express、Fastify 等等。一般都会对这种静态文件服务器的 “根” 请求,返回默认的 index.html 文件。

我们这里也不例外,如果是 “根 (/)” 请求,就把请求内容改成 index.html。

其次呢,根据我们请求的资源,通过我们上面说到过的,mime-types 依赖的 lookup 函数,去获取该文件对应的 MIME 值,设置给返回数据的请求头中的 Content-Type 属性。

如果对这个设置头部属性印象模糊了,请看前面章节内容。

最后呢,再通过 readFileSync 文件读取函数,获取对应的请求文件内容,返回给浏览器。

picture 4

那么经过这么一操作,我们的代码量不仅减少了,程序也更健壮了,支持的文件类型也更多了,可以不加多余的代码逻辑,就能显示不同的资源了。

当然,目前的功能,距离真正的流行的 Web 框架还差得远,同时正如前文所说,本小册分为两大部分。

第一大部分,是通过一个 Web 服务器的诞生,来进一步理解其工作流程。

第二大部分,就是通过我们这个 Web 服务器,来写一个全栈的个人博客项目。

这样,我们就能够掌握 Node.js 全栈开发的秘诀,不管是后面使用其他 Web 框架,还是自己写一个前后端一体化的全栈产品,都会更加轻松了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1879817.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2095.删除链表的中间节点

给你一个链表的头节点 head 。删除链表的中间节点 ,并返回修改后的链表的头节点 head。 长度为 n 链表的中间节点是从头数起第 ⌊n / 2⌋ 个节点(下标从 0 开始),其中 ⌊x⌋ 表示小于或等于 x 的最大整数。 对于 n 1、2、3、4 和…

逻辑这回事(七)---- 器件基础

Xilinx FPGA创建了先进的硅模块(ASMBL)架构,以实现FPGA具有针对不同应用程序领域优化的各种功能组合的平台。通过这一创新,Xilinx提供了更多的设备选择,使客户能够为其特定设计选择具有正确的功能和功能组合的FPGA。ASMBL体系结构通过以下方式突破了传统的设计障碍:消除几…

HarmonyOS Next开发学习手册——选项卡 (Tabs)

当页面信息较多时,为了让用户能够聚焦于当前显示的内容,需要对页面内容进行分类,提高页面空间利用率。 Tabs 组件可以在一个页面内快速实现视图内容的切换,一方面提升查找信息的效率,另一方面精简用户单次获取到的信息…

大家都在跳槽,我需要跳槽吗?

文章目录 1. 前言2. 最初的跳槽想法萌芽3. 跳槽想法的再次萌芽4. 我是否需要跳槽呢?5. 那些跳槽的同学怎么样了?6. 小结 1. 前言 两周前,看到研究生同班同学发的一条朋友圈,内容为”下一站 杭州~”,配图是拍的北京开往杭州的列车…

软件框架(Framework)是什么?

可实例化的、部分完成的软件系统或子系统,它为一组系统或子系统定义了统一的体系结构(architecture),并提供了构造系统的基本构造块(building blocks),还为实现具体功能定义了扩展点(extending points)。 框架实现了体系结构级别的复用。 其…

八爪鱼现金流-031,宽带到期记一笔负债

到期了,新弄的网络,记录一下负债包。 八爪鱼现金流 八爪鱼

昇思25天学习打卡营第4天|函数式自动微分

学习目标: 重温高数知识,回顾导数、微分、偏导数‘全微分、方向导数、梯度;斜率、切线、切平面,法相平面、法线的知识’ 函数微分与导数的含义 多元函数偏导数、全微分 函数式自动微分应用实践 昇思大模型 ,mindspor…

STM32第十三课:DMA多通道采集光照烟雾

文章目录 需求一、DMA(直接存储器存取)二、实现流程1.时钟使能2.设置外设寄存器地址3.设置存储器地址4.设置要传输的数据量5.设置通道优先级6.设置传输方向7.使通道和ADC转换 三、数据处理四、需求实现总结 需求 通过DMA实现光照强度和烟雾浓度的多通道…

JAVA期末速成库(12)第十三章

一、习题介绍 第十三章 Check Point:P501 13.3,13.17,13.28,13.29 Programming Exercise:13.1,13.6,13.11 二、习题及答案 Check Point: 13.3 True or false? a. An abst…

【做一道算一道】太平洋大西洋水流问题

太平洋大西洋水流问题 有一个 m n 的矩形岛屿,与 太平洋 和 大西洋 相邻。 “太平洋” 处于大陆的左边界和上边界,而 “大西洋” 处于大陆的右边界和下边界。 这个岛被分割成一个由若干方形单元格组成的网格。给定一个 m x n 的整数矩阵 heights &…

零基础开始学习鸿蒙开发-读书app简单的设计与开发

目录 1.首页设计 2.发现页面的设计 3.设置页面的设计 4.导航页设计 5.总结: 6.最终的效果 1.首页设计 Entry Component export struct home {State message: string 首页build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.B…

Golang-map理解

golang-map语雀笔记整理 map的底层实现hmapbmap map是如何做到O(1)的复杂度的?map扩容策略 师兄问题回答 map的底层实现 hmap hmap的结构体核心字段有:buckets 桶数组地址, B 定位值,桶的数目是2^B个, count 当前map的…

Java基础(三)——类和对象、构造方法

个人简介 👀个人主页: 前端杂货铺 ⚡开源项目: rich-vue3 (基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL) 🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展 &#x1…

Vue-cli项目及Element UI 环境搭建 保姆级教程

一、Vue-cli介绍及其作用 什么是Vue-cli手脚架 vue-cli 官方提供的一个脚手架,用于快速生成一个 vue 的项目模板;预先定义 好的目录结构及基础代码,就好比咱们在创建 Maven 项目时可以选择创建一个 骨架项目,这个骨架项目就是脚…

环回接口处理 IP 数据报的过程及 Loopback 接口的主要作用

环回接口处理 IP 数据报的过程 IPv4 中 传给环回地址(127.0.0.1)的任何数据均作为 IP 输入,直接送到环回接口(环回:IP 输入队列)。 传给广播地址或多播地址的数据报,会复制一份传给环回接口&…

MySQL高阶:事务和并发

事务和并发 1. 事务创建事务 2. 并发和锁定并发问题 3. 事务隔离等级3.1 读取未提交隔离级别3.2 读取已提交隔离级别3.3 重复读取隔离级别3.4 序列化隔离级别 4. 死锁 1. 事务 事务(trasaction)是完成一个完整事件的一系列SQL语句。这一组SQL语句是一条…

昇思25天学习打卡营第02天 | 快速入门

昇思25天学习打卡营第02天 | 快速入门 文章目录 昇思25天学习打卡营第02天 | 快速入门数据准备网络构建模型训练模型测试迭代数据集模型保存加载模型总结打卡 数据准备 MindSpore通过Dataset和Transforms实现高效的数据预处理 使用download下载数据,并创建数据集对…

Qt项目天气预报(8) - 绘制温度曲线 + 回车搜索(最终篇)

全部内容在专栏: Qt项目 天气预报_mx_jun的博客-CSDN博客 目录 绘制温度曲线 事件过滤器在子控件上绘图 子控件下载事件过滤器 事件过滤器进行绘图 - eventFilter 画初步高温曲线 画初步低温曲线 效果演示 画低温曲线 画高温曲线 效果演示 按下回车搜索: …

LDM论文解读

论文名称:High-Resolution Image Synthesis with Latent Diffusion Models 发表时间:CVPR2022 作者及组织:Robin Rombach, Andreas Blattmann, Dominik Lorenz,Patrick Esser和 Bjorn Ommer, 来自Ludwig Maximilian University of Munich &a…

AI奏响未来乐章:音乐界的革命性变革

AI在创造还是毁掉音乐 引言 随着科技的飞速发展,人工智能(AI)正在逐渐渗透到我们生活的每一个角落,音乐领域也不例外。AI技术的引入,不仅为音乐创作、教育、体验带来了革命性的变革,更为整个音乐产业注入了…