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这一个函数，如下：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2var Response = function(res,filePath){
3 //读取文件，读取完成后给客户端响应
4 fs.readFile(filePath,function(err,data){
5 if(err){ //如果失败，就返回错误文件
6 if(filePath != error) //如果失败的不是错误文件，才返回错误文件
7 Response(res,error);
8 }else{
9 //获取后缀名
10 var i = filePath.lastIndexOf('.');
11 var suffix = filePath.substr( i+1, filePath.length);
12 res.writeHead(200,{ //响应客户端，将文件内容发回去
13 'Content-type':"text/"+suffix}); //通过后缀名指定mime类型
14 res.end(data);
15 }
16 });
17};
18
代码很容易，只是使用js的字符串操作就提取了后缀名，然后在WrietHead里设定Content-type为text/加上后缀名就行了，
然后我们在chunxiao.html里加上一个css样式，chunxiao.html的代码如下：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2<html>
3<head>
4 <meta charset="UTF-8">
5 <title>春晓</title>
6 <link href="./stylesheets/index.css" rel="stylesheet" type="text/css">
7</head>
8<body>
9<nav>春晓</nav>
10<div id="value">
11 <p>春眠不觉晓</p>
12 <p>处处闻啼鸟</p>
13 <p>夜来风雨声</p>
14 <p>花落知多少</p>
15</div>
16</body>
17</html>
18
index.css的代码如下：
2
3
4
5
6
7
8
9
10
11
12
13
2 background-color:#222222;
3}
4nav {
5 color:#cc0000;
6 font-weight:bold;
7 font-size:2em;
8}
9#value{
10 color:#cc0000;
11 font-size:2.1em;
12}
13
启动服务器，访问网页时可见：
第一种方法其实就是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模块：
2
3
2var mime = require("mime");
3
然后在Response函数里使用mime变量来获取文件的mime类型
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2var Response = function(res,filePath){
3 //读取文件，读取完成后给客户端响应
4 fs.readFile(filePath,function(err,data){
5 if(err){ //如果失败，就返回错误文件
6 if(filePath != error) //如果失败的不是错误文件，才返回错误文件
7 Response(res,error);
8 }else{
9 /**
10 * 第二种方法：通过使用mime模块设定mime类型
11 */
12 res.writeHead(200,{ //响应客户端，将文件内容发回去
13 'Content-type':mime.lookup(filePath)}); //通过后缀名指定mime类型
14 res.end(data);
15
16 }
17 });
18
效果图与前述一致。
