开发者学堂课程【Node.js 入门与实战:模拟Apache服务器】学习笔记,与课程紧密联系,让用户快速学习知识
课程地址:https://developer.aliyun.com/learning/course/588/detail/8264
模拟Apache服务器
只是一个index.html带了一个图片跟一个css,如果每一个文件都带很多个图片跟css,按照之前的方式写,服务器很耗时。
所以说要解决这个问题,这个问题就是网页中带了一堆静态资源,可以用简单的方式使用,无论是css,图片都是静态资源,只要是静态资源可以放在同一个目录之下,或者放在几个目录之下也是可以。
在网站目录下建一个public文件夹,这些静态资源例如css、图片、js文件放在这个目录之下,只要用户访问这个目录下任何一个资源,直接根据你找这个资源的路径,访问什么资源,直接拼上这个路径,在磁盘上直接返回这个文件,省去了一些复杂的判断,直接用请求,请求css下的index.css,就用网站当前目录下的pubilc目录,所有的静态资源放在这个目录,用这个目录拼上请求资源的路径,比如拼上css下的.css,刚好这个路径找到对应的文件,找到之后,直接返回,这样就省去了一堆if else的判断,要实现这个需求就得使用到Apache,模拟Apache服务器,发现,启动Apache,把所有的静态资源放到同一个目录之下,就会自动返回。
打开inedx.html文件的源代码,文件里有链入css文件,anoceanofsky.css这个css文件里有图片,
模拟Apache服务器步骤
App.js
模拟服务器
// 加载 http模块
var http = require( ‘http’);
var http = require( ‘path’);
var
fs
=require(‘fs’);
var mime = require(‘mime’);
// 创建服务
http.createServer(function (req, res) {
// 所有的静态资源都是在public这个目录下
// 1.获取用户请求的路径
/
/ req.url
/
/ /css/index.css
/
/ /images/index.png
// 2.获取pubilc目录的完整路径
v
ar
publicDir = path.join(__dirname,
‘
public’);
// apache这个目录
// 3.根据public 的路径和用户请求的路径,最终计算出用户的静态资源的完整路径 Apache\public\abc\xxx\css\index.css,跟publi拼起来,就是完整的路径,
var filename=path.join(pubicDir,req.url);
// Console.log(filename);
//启动这个服务,当访问根目录的时候,
// 4.根据文件的完整路径去读取该文件 ,如果读取到了,则把文件返回给用户,如果读取不到,则返回404
fs.readFile(filename,function(argument) {
// body...
if (err) {
res.end
(‘文件不存在404‘);
}
else {
// 通过第三方模块mine,来判断不同的资源对应的Contnet-Type的类型
res.setHeader(‘Contnet-Type’,mime.getType(filename));
//根据请求路径,跟public拼接一下,如果找到了,就读取返回,如果没找到就404返回,这样还是存在问题,用户请求的可能是css,可能是图片,可能是index这个静态文件,什么文件都有可能,返回文件要设置contnet-type,如果读取的是图片,图片也分png,jpg,或者说是word文件,当用户请求不同的资源的时候,根据用户请求文件的后缀名称获取对应的contnet-type类型,mine这个模块怎么使用,首先 npm install mine,安装完毕之后加载这个模块get type就可以了,以前是lookup方法,或者可以反过来,给contnet-type,对应的类型是什么,两个方法都有
安装成功以后,在代码里加载这个模块,安装完成之后多了一个noed_modules,在这个文件夹下面就有mine模块,
// 如果找到了用户要读取的文件,那么直接把该文件返回给用户
res.end(data);
}
}
);
// res.end(‘over’);
}).listen(9090, function () {
console.log( ‘http://localhost:9090');
});
测试执行代码,public目录下,有index.html,浏览器输入http://localhost:9090/index.html正常显示, 首先index.html的status值是200,里面又访问css文件,stylesheet并且这个css文件也返回了,还有一个背景图片,这样就实现了静态资源的访问.