当前位置: 首页 > news >正文

mime插件 node_【Node.js基础篇】(五)使用mime模块来响应css、js文件的请求

1.概述

上一篇中我们实现了客户端的路由请求,包括直接使用js返回内容响应和使用html文件响应,但上一篇中最后的显示结果只是一个很普通的html文件,不能使用css样式和js文件,今天我们就通过设置响应文件的mime类型来实现不同文件的响应。

文章会先介绍什么是mime类型,然后介绍两种设置mime类型的方法,第一种是通过后缀名判断文件类型,从而进行响应;第二种是使用第三方mime模块进行响应。

示例是在上一篇的基础上扩展的。

2.mime类型简介

MIME(Multipurpose Internet Mail Extensions)多用途互联网邮件扩展类型。是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开。多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式。(百度百科)

简单点说,mime是一个互联网标准,通过设定它就可以设定文件在浏览器的打开方式。(有兴趣的话,可以试一下用css打开方式打开html文件,更助于理解)

3.两种设定mime类型方法

1.直接提取文件后缀名设定mime类型

代码是基于上一篇的代码,只改动了Response这一个函数,如下:

//函数Response,将HTML、css、js等文件响应给客户端

var Response = function(res,filePath){

//读取文件,读取完成后给客户端响应

fs.readFile(filePath,function(err,data){

if(err){ //如果失败,就返回错误文件

if(filePath != error) //如果失败的不是错误文件,才返回错误文件

Response(res,error);

}else{

//获取后缀名

var i = filePath.lastIndexOf(‘.‘);

var suffix = filePath.substr( i+1, filePath.length);

res.writeHead(200,{ //响应客户端,将文件内容发回去

‘Content-type‘:"text/"+suffix}); //通过后缀名指定mime类型

res.end(data);

}

});

};

代码很容易,只是使用js的字符串操作就提取了后缀名,然后在WrietHead里设定Content-type为text/加上后缀名就行了,

然后我们在chunxiao.html里加上一个css样式,chunxiao.html的代码如下:

春晓

春晓

春眠不觉晓

处处闻啼鸟

夜来风雨声

花落知多少

index.css的代码如下:

body{

background-color:#222222;

}

nav {

color:#cc0000;

font-weight:bold;

font-size:2em;

}

#value{

color:#cc0000;

font-size:2.1em;

}

启动服务器,访问网页时可见:

d43bb96081fa8879adb6734f12b91115.png

第一种方法其实就是mime模块实现的基础。如前所述,mime是设定文件类型的,css,html文件的类型归类是“text/”,但是视频文件3gp等是“video/”,图片文件jpeg是”image/”,······ 互联网上还有很多很多的格式,而我们又必须它们一个一个都实现,这才有了统一又方便可重用的mime模块。

2.使用mime模块设定文件类型

要使用mime模块,我们就必须先学会npm工具。npm是一个包管理和分发工具,现在它已经成为了非官方的发布node模块(包)的标准。有了npm,我们就可以很快的找到特定服务要使用的包,进行下载、安装以及管理已经安装的包。

安装了node.js,一般就已经安装了npm,可直接在cmd里使用。下面就开始使用npm安装mine模块。

首先我们要进入我们的项目文件夹里面,然后使用npm安装mime,图示如下:

836852ab25f02d5b4f0032e065a70244.png

划横线的就是我项目的文件夹,方框就是npm的install命令,安装成功后,在项目文件夹里会出现一个npm_install文件夹,里面就有一个mime文件夹,现在的项目文件结构如下:

1f171c0e9506f7392892d8c503385510.png

然后就是使用mime模块了,首先我们要使用一个变量获取mime模块,在Luyou.js文件的开头获取mime模块:

//获取mime模块

var mime = require("mime");

然后在Response函数里使用mime变量来获取文件的mime类型

//函数Response,将HTML、css、js等文件响应给客户端

var Response = function(res,filePath){

//读取文件,读取完成后给客户端响应

fs.readFile(filePath,function(err,data){

if(err){ //如果失败,就返回错误文件

if(filePath != error) //如果失败的不是错误文件,才返回错误文件

Response(res,error);

}else{

/**

* 第二种方法:通过使用mime模块设定mime类型

*/

res.writeHead(200,{ //响应客户端,将文件内容发回去

‘Content-type‘:mime.lookup(filePath)}); //通过后缀名指定mime类型

res.end(data);

}

});

效果图与前述一致。

相关文章:

  • react前端封装接口弹出错误_在react项目中用es6封装ajax请求,组件中调用总是报错,求解?...
  • mysql5.7不能存储中文_解决Mysql5.7中文乱码的问题
  • mysql取字段中间字符串_sql 如何截取一个字段里某一字符串中间的字符?
  • mysql分区技术_高性能的MySQL(7)分区技术
  • mysql7.6.8安装教程_Centos7安装mysql8教程
  • rhel8安装配置mysql_Linux下Mysql8.0.19安装配置图文详解(Redhat centos 6.8)
  • mybatis中 if test 写在select后面_手写一个简易版的Mybatis,带你深入领略它的魅力...
  • anaconda版本与python版本不同_anaconda版本与python关系是什么
  • android 输入法更换_关于Android输入法切换的问题
  • centos gem mysql_CentOS 安装 MySQL
  • 后台怎样获得xmlhttprequest通过post上传的二进制数据_第一阶段,java核心技术开发:Ajax异步XMLHttpRequest对象...
  • 合法的数组定义是_关于运行时异常(Runtime Expection)和自定义异常
  • mysql 图像数据类型_mysql常用的数据类型
  • oracle_sqlserver_mysql_Oracle、SqlServer、MySql临时表总结
  • linux怎么使用mysql存储过程_linux下mysql的操作与存储过程
  • Django 博客开发教程 16 - 统计文章阅读量
  • Effective Java 笔记(一)
  • Golang-长连接-状态推送
  • HTML5新特性总结
  • JavaScript 基本功--面试宝典
  • JavaScript服务器推送技术之 WebSocket
  • JS基础篇--通过JS生成由字母与数字组合的随机字符串
  • 道格拉斯-普克 抽稀算法 附javascript实现
  • 对话:中国为什么有前途/ 写给中国的经济学
  • 官方新出的 Kotlin 扩展库 KTX,到底帮你干了什么?
  • 如何将自己的网站分享到QQ空间,微信,微博等等
  • 如何邀请好友注册您的网站(模拟百度网盘)
  • ionic异常记录
  • MPAndroidChart 教程:Y轴 YAxis
  • # 深度解析 Socket 与 WebSocket:原理、区别与应用
  • (java版)排序算法----【冒泡,选择,插入,希尔,快速排序,归并排序,基数排序】超详细~~
  • (大众金融)SQL server面试题(1)-总销售量最少的3个型号的车及其总销售量
  • (翻译)Quartz官方教程——第一课:Quartz入门
  • (附源码)php投票系统 毕业设计 121500
  • (附源码)ssm经济信息门户网站 毕业设计 141634
  • (教学思路 C#之类三)方法参数类型(ref、out、parmas)
  • (力扣题库)跳跃游戏II(c++)
  • (七)Knockout 创建自定义绑定
  • (三)uboot源码分析
  • (提供数据集下载)基于大语言模型LangChain与ChatGLM3-6B本地知识库调优:数据集优化、参数调整、Prompt提示词优化实战
  • (译)2019年前端性能优化清单 — 下篇
  • .Net - 类的介绍
  • .net mvc 获取url中controller和action
  • .NET 指南:抽象化实现的基类
  • .Net 中的反射(动态创建类型实例) - Part.4(转自http://www.tracefact.net/CLR-and-Framework/Reflection-Part4.aspx)...
  • .NET/C# 编译期能确定的字符串会在字符串暂存池中不会被 GC 垃圾回收掉
  • .Net6支持的操作系统版本(.net8已来,你还在用.netframework4.5吗)
  • .Net的C#语言取月份数值对应的MonthName值
  • .net的socket示例
  • .sdf和.msp文件读取
  • /bin/bash^M: bad interpreter: No such file ordirectory
  • [ 隧道技术 ] 反弹shell的集中常见方式(四)python反弹shell
  • [ARC066F]Contest with Drinks Hard
  • [AutoSar]BSW_Memory_Stack_004 创建一个简单NV block并调试
  • [BZOJ4337][BJOI2015]树的同构(树的最小表示法)