【Node.js基础篇】(五)使用mime模块来响应css、js文件的请求
来源:互联网 发布:牛学教育 知乎 编辑:程序博客网 时间:2024/06/06 14:21
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的代码如下:
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>春晓</title> <link href="./stylesheets/index.css" rel="stylesheet" type="text/css"></head><body><nav>春晓</nav><div id="value"> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p></div></body></html>
index.css的代码如下:
body{ background-color:#222222;}nav { color:#cc0000; font-weight:bold; font-size:2em;}#value{ color:#cc0000; font-size:2.1em;}
启动服务器,访问网页时可见:
第一种方法其实就是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,图示如下:
划横线的就是我项目的文件夹,方框就是npm的install命令,安装成功后,在项目文件夹里会出现一个npm_install文件夹,里面就有一个mime文件夹,现在的项目文件结构如下:
然后就是使用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); } });
效果图与前述一致。
- 【Node.js基础篇】(五)使用mime模块来响应css、js文件的请求
- 【Node.js基础篇】(二)Node模块的使用
- 【Node.js基础篇】(九)使用readline模块实现Node.js的输入输出
- Node.js入门小记(五)Api之Http(1)http请求及响应流程
- 【Node.js基础篇】(十)使用net模块和Readline模块实现Socket通信
- Node.js:使用request模块下载文件
- JavaScript基础之Node.js的模块
- Node.js响应Ajax的POST请求并保存为JSON文件
- node js 基础 创建模块
- node的mime模块
- node.js+android http请求响应
- node.js+android http请求响应
- node.js+Android http请求响应
- node.js+Android http请求响应
- Node.js http模块 设置响应头
- node.js学习(五、基础js语法)
- node.js中使用http模块发送请求时的一个小错误
- 用C/C++来实现 Node.js 的模块(上)
- GitHub无法访问或访问缓慢解决办法
- Linux grep命令详解
- 克鲁斯卡尔算法 模板题hdu 1233
- 题目1061:成绩排序
- 【产品-Tools】如何使用项目管理工具SmartSheet和TeamGannt
- 【Node.js基础篇】(五)使用mime模块来响应css、js文件的请求
- 精美UI界面欣赏[1]
- 百度Android开发面试题
- ondraw() 和dispatchdraw()的区别
- 开篇第一博!
- Android AsyncHttpClient登录保存cookie和读写cookie
- 使用JSONP跨域请求数据
- linux下tomcat开机启动方法
- 黑马程序员_日记14_Java多线程(四)