【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的代码如下:

<!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);

        }
    });

效果图与前述一致。

时间: 2024-11-07 04:33:56

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

Python基础篇(五)

bool用于判断布尔值的结果是True还是False >>> bool("a") True >>> bool(3) True >>> bool("") False >>> bool(0) False Python中的elif类似于Java中的elseif >>> number = (int)(input("input a number: ")) input

JS基础篇--HTML DOM classList 属性

页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加类(add) document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类: document.getElementById("myDIV").cla

【Node.js基础篇】(十)使用net模块和Readline模块实现Socket通信

Node.js的socket通信和C++.Java的非常相像,学过这两种语言的socket通信的同学可以很快就掌握好Node.js的socket通信.下面我们以实现一个Echo服务器的服务端和客户端为目的,学习一下Node.js的socket通信. 所谓的Echo服务器指的是这样一种服务器:客户端发送一条消息给服务端,服务端就把这条消息原封不动地返回给客户端. 服务端 服务端的实现分为三步: - 通过createServer创建一个server服务端 - 使用server的listen方法监听指

Python基础-第五天-常用模块

本篇内容: 1.sys模块 2.os模块 3.time模块和datetime模块 4.random模块和string模块 5.shutil模块 6.json模块和pickle模块 7.shelve模块 8.hashlib模块和hmac模块 9.logging模块 10.re模块 一.sys模块 1.sys模块简介 sys模块是Python标准库中自带了一个模块,sys模块负责程序与python解释器的交互,提供了一系列的函数和变量,用于操控python的运行时环境 2.sys模块的使用 ①pyt

Vue.js基础篇实战--一个ToDoList小应用

距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 主要功能就是把一天要做的事情记录下来,还实现了: 标记完成事件 删除已完成事件 各种排序 仅显示未完成的项目 本地保存 截图看这里 用时一周,14次commits,把心中的构想基本实现了.详情请看:这里 整个过程下来,收获还是很多的, 1.对mvvm有了进一步的理解, 2.对css布局有了更多的了解. 3.更进一步理解了Vue的事件和组件机制.这些机制将应用解耦,每一部分都隔离出来

js 基础篇(点击事件轮播图的实现)

轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首先,我们可以在body中添加一个div并且将宽度设置成百分比(自适应页面),比例具体是相对谁的百分比的话按需求来做,在这里不多说.将图片放入到div 中. 其次,样式部分将img标签全部设置成absolute:以方便定位 最后,js部分说说逻辑,定义两个空数组,第一个数组用来保存初始的显示在页面的图

js基础篇——call/apply、arguments、undefined/null

a.call和apply方法详解 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj. apply方法: 语法:apply([thisObj[,ar

JS基础篇

                                                  JS基础 使用JS的三种方法 1,在HTML标签中,直接内嵌JS(不提倡使用) <button onclick="alert('你真点啊')">点我啊!!!</button>      >>>不符合W3C内容与行为分离的要求!!! 2.在HTML页面中,使用<script></script>包裹JS代码:   <sc

js活jQuery实现动态添加、移除css/js文件

下面是在项目中用到的,直接封装好的函数,拿去在js中直接调用就可以实现css.js文件的动态引入与删除.代码如下 动态加载,移除,替换css/js文件 // 动态添加css文件 function addCss(filename){ var creatHead = $('head'); creatHead.append('<link rel="stylesheet" href="'+filename+'">') } // 移除css/js文件 functi