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

陈随易

上一章【认识 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 框架,还是自己写一个前后端一体化的全栈产品,都会更加轻松了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

还不知道工业以太网和现场总线区别???

工业以太网 工业以太网是一种专为工业环境设计的网络通信技术,它基于标准的以太网技术,但针对工业应用进行了优化。工业以太网能够适应高温、低温、防尘等恶劣工业环境,采用TCP/IP协议,与IEEE 802.3标准兼容,并在应用层…

【C++】string基本用法(常用接口介绍)

文章目录 一、string介绍二、string类对象的创建(常见构造)三、string类对象的容量操作1.size()和length()2.capacity()3.empty()4.clear()5.reserve()6.resize() 四、string类对象的遍历与访问1.operator[ ]2.正向迭代器begin()和end()3.反向迭代器rbeg…

分治精炼宝库-----快速排序运用(⌯꒪꒫꒪)੭

目录 一.基本概念: 一.颜色分类: 二.排序数组: 三.数组中的第k个最大元素: 解法一:快速选择算法 解法二:简单粗暴优先级队列 四.库存管理Ⅲ: 解法一:快速选择 解法二:简单粗…

linux ls文件排序

linux可以使用ls命令结合一些选项来按照文件大小对文件和目录进行排序。以下是一些常用的方法: 1、这里,-l 选项表示长格式输出(包括文件权限、所有者、大小等),-S 选项表示按照文件大小排序,-h 选项表示以…

docker -run hello-world超时

主要原因就是尝试拉取库的时候没有从阿里云镜像里拉&#xff0c;所以设置一下就好了 这里使用的是ubuntu系统&#xff08;命令行下逐行敲就行了&#xff09; sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF {"registry-mirrors": [&quo…

MSPM0G3507——定时器例程讲解4——timx_timer_mode_periodic

以下示例以周期模式配置TimerG并切换LED。周期从500ms开始&#xff0c;每次切换减少50ms&#xff0c;直到周期为100ms&#xff0c;然后重复。设备在等待中断时保持待机模式 #include "ti_msp_dl_config.h"/* ((32KHz / (321)) * 0.5s) 45 - 1 495 due to N1 ticks …

FastGPT 调用Qwen 测试Hello world

Ubuntu 安装Qwen/FastGPT_fastgpt message: core.chat.chat api is error or u-CSDN博客 参考上面文档 安装FastGPT后 登录&#xff0c; 点击右上角的 新建 点击 这里&#xff0c;配置AI使用本地 ollama跑的qwen模型 问题&#xff1a;树上有3只鸟&#xff0c;开了一枪&#…

基于YOLOv9的PCB板缺陷检测

数据集 PCB缺陷检测&#xff0c;我们直接采用北京大学智能机器人开放实验室数据提供的数据集&#xff0c; 共六类缺陷 漏孔、鼠咬、开路、短路、杂散、杂铜 已经对数据进行了数据增强处理&#xff0c;同时按照YOLO格式配置好&#xff0c;数据内容如下 模型训练 ​ 采用YOLO…

Sping源码(九)—— Bean的初始化(非懒加载)— Bean的创建方式(构造器方法)

序言 前面几篇文章介绍了Spring中几种方式下Bean对象的实例化的过程&#xff0c;那如果之前的几种都不满足&#xff0c;按照Spring中正常Bean的实例化步骤&#xff0c;该如何创建这个Bean对象呢&#xff1f; 测试类 我们先创建几个debug中用到的栗子。 Person 以一个平平无…

文章浮现之单细胞VDJ的柱状图

应各位老师的需求复现一篇文章的中的某个图 具体复现图5的整个思路图&#xff0c;这里没有原始数据&#xff0c;所以我使用虚拟生产的metadata进行画图 不废话直接上代码&#xff0c;先上python的代码的结果图 import matplotlib.pyplot as plt import numpy as np# 数据&#…

Linux 交叉编译工具链格式 sqlite3编译示例

1、交叉编译工具链 1.1 定义 交叉编译工具链是一个由编译器、连接器和解释器组成的综合开发工具集&#xff0c;它允许开发者在一个平台上&#xff08;例如高性能的PC或服务器&#xff09;编译生成另一个平台&#xff08;例如嵌入式系统或不同的操作系统和硬件架构&#xff09…

spring boot初始化的几个总结

spring intializr File->New->Project 注意&#xff1a;Spring Initializer中 Java版本选择模块已经不支持1.8了。 Spring Boot 3.x要求 Java最低版本为17&#xff0c; 最新的SpringBoot版本已经要求Java22了 所以&#xff0c;你可以升级Java版本&#xff0c;使用Spri…

自定义指令directive

一、在src目录下创建一个directive文件夹 test.ts文件存放创建的自定义指令&#xff0c;index.ts用于接收所有指令进行统一处理 二、编写自定义指令 // test.ts文件 export default {// 写个自定义指令mounted(el: any, binding: any) {console.log(el, binding, "&qu…

JVM相关总结

JVM的些许问题 1.JVM内存区域划分 2.JVM类加载过程 3.JVM的垃圾回收机制 1.JVM的内存区域划分 一个运行起来的Java进程就是一个JVM虚拟机,需要从操作系统申请一大片内存,就会把内存划分成几个区域,每个区域都有不同的作用 常见的面试题 2.JVM类加载过程 熟练背诵 ! ! !…

Winform使用Flurl调用WebApi的基本用法

微信公众号“CSharp编程大全"的文章《.NET超简单轻量级的HTTP请求组件Flurl》介绍了便捷构建URL及创建HTTP请求的.NET模块Flurl。与HttpClient相比,Flurl封装的更简捷易用&#xff0c;代码量更少。本文学习并测试基于Fluri调用WebApi的基本用法。   基于Fluri调用WebApi…

怎么找python的运行路径

1.命令行中执行&#xff1a; import sys print(sys.argv[0]) 执行后为空。 2. import os os.path.abspath(os.curdir) 3. import os os.getcwd()

LeetCode-213. 打家劫舍 II【数组 动态规划】

LeetCode-213. 打家劫舍 II【数组 动态规划】 题目描述&#xff1a;解题思路一&#xff1a;分三种情况&#xff0c;一&#xff1a;不考虑头尾&#xff1b;二&#xff1a;考虑头不考虑尾&#xff1b;三&#xff1a;考虑尾不考虑头。解题思路二&#xff1a;优化空间解题思路三&am…

如何利用python画出AHP-SWOT的战略四边形(四象限图)

在企业或产业发展的相关论文分析中&#xff0c;常用到AHP-SWOT法进行定量分析&#xff0c;形成判断矩阵后&#xff0c;如何构造整洁的战略四边形是分析的最后一个环节&#xff0c;本文现将相关代码发布如下&#xff1a; import mpl_toolkits.axisartist as axisartist import …

java之命令执行审计思路

1 漏洞原理 因用户输入未过滤或净化不完全&#xff0c;导致Web应用程序接收用户输入&#xff0c;拼接到要执行的系统命令中执行。一旦攻击者可以在目标服务器中执行任意系统命令&#xff0c;就意味着服务器已被非法控制。 2 审计中常用函数 一旦攻击者可以在目标服务器中执行…

【AIGC】AnimateAnyone:AI赋予静态照片生命力的魔法

摘要&#xff1a; 在人工智能技术的不断进步中&#xff0c;AnimateAnyone项目以其创新性和易用性脱颖而出&#xff0c;成为GitHub上备受瞩目的AI项目之一。由阿里巴巴智能计算研究院开发的这一技术&#xff0c;允许用户通过提供一张静态照片&#xff0c;快速生成动态角色。本文…