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

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

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

相关文章

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

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

英英词典(汇编实验)

功能要求: 1.单词及其英文解释的录入、修改和删除 (1 ) 录入新单词,把它插入到相应的位置(按词典顺序),其后跟英文解释、同义词、反义词;(此功能要求在文件中完成,其它功能可以将单词放在数据段中&#xf…

数据库原理之数据库基本概念

目录 前言 基本概念 数据库完整性 前言 今天我们来看看数据库的基本概念,帮助大家对数据库有一点点最基本的了解 基本概念 4个基本概念 数据data:描述事物的符号,数据库中存储的基本对象。 数据库Database:长期存储在计算机…

山东大学多核并行2024年回忆版

2024.6.13回忆版 矩阵向量乘不可整除代码 集合通信与点对点通信的区别 块划分、循环划分、循环块划分(14个向量,4个进程) 按行访问还是按列访问快 SISD系统问题 循环依赖问题 问题:为什么不能对这个循环并行化&#xff0…

Python逻辑控制语句 之 综合案例

需求: 1. 提示⽤户输⼊登录系统的⽤户名和密码 2. 校验⽤户名和密码是否正确(正确的⽤户名:admin、密码:123456) 3. 如果⽤户名和密码都正确,打印“登录成功!”,并结束程序 4. 如果⽤户名或密码错误,打印“⽤户名或密码错误!”…

Django 对模型创建的两表插入数据

1,添加模型 Test/app8/models.py from django.db import modelsclass User(models.Model):username models.CharField(max_length50, uniqueTrue)email models.EmailField(uniqueTrue)password models.CharField(max_length128) # 使用哈希存储密码first_name …

DM 的断点续传测试

作者: 大鱼海棠 原文来源: https://tidb.net/blog/4540ae34 一、概述 DM有all、full、incremental三种数据迁移同步方式(task-mode),在all同步模式下,因一些特殊情况,需要变更上游MySQL的数…

LDO产品的基础知识解析

低压降稳压器 (LDO)是一种用于调节较高电压输入产生的输出电压的简单方法。在大多数情况下,低压降稳压器都易于设计和使用。然而,如今的现代应用都包括各种各样的模拟和数字系统,而有些系统和工作条件将决定哪种LDO最适合相关电路&#xff0c…

springboot的特点是什么?

Spring Boot是一个基于Spring框架的开源项目,它旨在简化Spring应用的初始搭建和开发过程。以下是Spring Boot的一些主要特点: 快速开发: Spring Boot提供了许多默认配置,使得开发者可以更快地开始开发应用程序,而无需…

秋招突击——6/28、6.29——复习{数位DP——度的数量}——新作{}

文章目录 引言复习数位DP——度的数量个人实现参考实现 总结 引言 头一次产生了那么强烈的动摇,对于未来没有任何的感觉的,不知道将会往哪里走,不知道怎么办。可能还是因为实习吧,再加上最近复习也没有什么进展,并不知…

如何借助 LLM 设计和实现任务型对话 Agent

1 引言 在人工智能的快速发展中,任务型对话 Agent 正成为提升用户体验和工作效率的关键技术。这类系统通过自然语言交互,专注于高效执行特定任务,如预订酒店或查询天气。尽管市场上的开源框架如 Rasa 和 Microsoft Bot Framework 在对话理解…

揭秘多年免费听音乐、直播、影视的自用方案:手机、电视、电脑多平台0成本实现媒体自由(内含相关资源)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 多媒体自由 📒🎧 音乐资源📱安卓平台🍎 苹果平台💻 PC平台🎥 影视资源📱 安卓平台🍎 苹果平台📺 电视盒子💻 PC平台📥 电影下载📺 直播资源📱 手机平台💻 PC平台📺 电视盒子⚓️ 相关链接 ⚓️�…

ISS检测原理

ISS(Intrinsic Shape Signatures)是由Yu Zhong于2009年提出的一种三维形状描述子,用于描述局部或半局部区域的点云,局部区域可以理解为以一个点云中某点为球心,以一定半径构成的可以包含多个内点的球形区域,半局部则是半个球形区域。ISS可用于不同视角点云的配准、快速姿…

Nuxt3 的生命周期和钩子函数(六)

title: Nuxt3 的生命周期和钩子函数(六) date: 2024/6/30 updated: 2024/6/30 author: cmdragon excerpt: 摘要:本文深入解析了Nuxt3框架中的多个核心生命周期钩子和组件注册功能,包括imports:sources、imports:extend、import…

刷代码随想录有感(121):贪心算法——买卖股票的最佳时机III

题干&#xff1a; 代码&#xff1a; class Solution { public:int maxProfit(vector<int>& prices) {if (prices.size() < 2) return 0;int buy1 prices[0];int buy2 prices[0];int sell1 0, sell2 0;for (int i 1; i < prices.size(); i) {buy1 min(bu…

dsp入门

安装环境 安装 ccs5.5安装 BIOS-MCSDK 多核软件开发包安装 仿真器驱动 工程创建与导入工程 创建工程 创建工程填信息添加.cmd文件&#xff0c;配置内存编译 导入工程 导入 配置工程 选择properties 环境变量 头文件 库文件 仿真器 添加仿真器 先调出仿真器界面创建仿…

rtthread stm32h743的使用(十二)spi设备fal驱动的使用

我们要在rtthread studio 开发环境中建立stm32h743xih6芯片的工程。我们使用一块stm32h743及fpga的核心板完成相关实验&#xff0c;核心板如图&#xff1a; fal驱动的使用是建立在sfud驱动之上的&#xff0c;所以我们在上一节使用的工程基础上继续实验。 1.在上一节工程的基础…

SpringCloud Alibaba Seata2.0基础入门与安装

官网地址&#xff1a;https://seata.apache.org/zh-cn/ GitHub下载地址&#xff1a;https://github.com/apache/incubator-seata/releases 本文这里下载的是seata2.0.0版本。 【1】概述 ① Seata是什么 Simple Extensible Autonomous Transaction Architecture&#xff0c…

vue3 全局引入 onMounted, reactive, ref 的插件全局引入

webpack 的引入 npm install -D unplugin-auto-import const AutoImport require(unplugin-auto-import/webpack).default;configureWebpack: {devtool: source-map,module: {rules: [{test: /\.mjs$/,include: /node_modules/,type: javascript/auto}],}, plugins: [Aut…