node创建web静态服务

在上一篇中，用了http模块和fs模块来让html页面呈现出来，但是这样做有缺点，比如我们来看一个例子，例如我现在手上有一个前端写好了的静态文件夹，我想吧它部署在node的静态服务上，你将会发现，如果用原生node，这会是一个十分麻烦和复杂的事情。话不多说，我们先来看一个简单的例子

看上述文件夹结构，test文件夹下面有xixi.html和haha.html ,我现在想让用户当输入127.0.0.1/xixi 的时候显示xixi.html 用户输入127.0.0.1：3000/haha的时候，页面展示haha.html的内容,这里就涉及到了路由的概念

我们在node demo文件夹下新建一个app.js文件，app.js是程序的入口文件

我们首先以file协议的方式在浏览器中浏览xixi.html 和 haha.html

 

 

 

好，我们就是要在node中也实现这样的效果，让用户可以以http的形式来访问这两个页面，话不多说，就是开干，上代码（app.js）

var http = require('http');
var fs = require('fs');

var server = http.createServer(function(req,res){
	res.writeHead(200,{'Content-type':'text/html;charset=utf-8'});
	if(req.url=='/xixi'){
		//用户访问的是xixi
		fs.readFile('./test/xixi.html',function(err,data){
			if(err){
				//读取失败
				res.end();
				return;
			}
			res.end(data);
		})
	}
	if(req.url == '/haha'){
		fs.readFile('./test/haha.html',function(err,data){
			if(err){
				res.end();
				return;
			}
			res.end(data);
		})
	}

})

server.listen(3000,'127.0.0.1',function(){
	console.log('127.0.0.1:3000 服务已开启');
})

　开启node，在浏览器中访问

 

　

 

访问xixi正常，因为xixi中没有去请求任何其他的外部文件，而访问haha的时候页面就一直不出来，最后图片也不出来，查看network发现它请求了一个图片文件127.0.0.0:3000/0.jpg

 

 

 请求了127.0.0.1：3000/0.jpg  因为我们在app.js中没写对这个路由的处理，所以页面就出错了，解决办法

var http = require('http');
var fs = require('fs');

var server = http.createServer(function(req,res){
	
	console.log(req.url)
	if(req.url=='/xixi'){
		//用户访问的是xixi
		fs.readFile('./test/xixi.html',function(err,data){
			res.writeHead(200,{'Content-type':'text/html;charset=utf-8'});
			if(err){
				//读取失败
				res.end();
				return;
			}
			res.end(data);
		})
	}
	if(req.url == '/haha'){
		fs.readFile('./test/haha.html',function(err,data){
			res.writeHead(200,{'Content-type':'text/html;charset=utf-8'});
			if(err){
				res.end();
				return;
			}
			res.end(data);
		})
	}
	if(req.url == '/0.jpg'){
		fs.readFile('./test/0.jpg',function(err,data){
			res.writeHead(200,{'Content-type':'image/jpg'});
			if(err){
				res.end();
				return;
			}
			res.end(data);
		})
	}

})

server.listen(3000,'127.0.0.1',function(){
	console.log('127.0.0.1:3000 服务已开启');
})

　　

 

 这下访问就好了，从我们这 个很小的demo中可以看到，node如果想对静态文件进行处理，是一件很麻烦的事前，因为你要为这个写很多路由，而且你永远也不知道到底每个文件下面又去外链了多少文件，这样写下来，将是一个十分复杂的事前，而且你还要考虑返回文件的mime类型，还有包括缓存问题等，所以这将是一个非常头疼的是，我自己尝试写过一个静态服务的模块，发现虽然可以用，但是通用性不高，而且也没对缓存进行处理，所以node和IIS，appache不一样，哪些老派的服务器，自带静态资源的解析服务，那么在node中有没有非常nb的工具了，肯定是有的，node的社区这么活跃，有一个非常出名觉得框架 express大名鼎鼎，express和node的关系就如同jquery和原生js一样，当然，并不是很恰当，可以这么理解下，关于穿件静态服务在express中就很简单了，只需要一个中间件，一行代码就搞定 app.use(express.static('./test')),这样test下面的资源就可以被访问了，就创建了一个test文件夹下面的静态服务