（二）用node.js内置模块，模拟搭建简单服务器（静态资源文件请求的处理）;
明确：NODE是用来开发后台，服务器端;
首先要知道服务器端都需要处理的事情 (一般可大致分以下四个)
- 在服务器上创建一个服务（监听一个端口号）
- 接收（解析）客户端的请求信息
- 找到客户端需要的资源文件中的源代码
- 把源代码返回
用到最基本的三个内置模块：HTTP、URL、FS
HTTP
这个模块主要用于创建服务、监听端口、接收请求、返回内容的管理
- http.createServer : 创建一个服务，创建出来的服务默认遵循的是HTTP传输协议
- ...
URL
这个模块主要用来解析URL地址的
- url.parse ： 解析一个完整的URL（也可以不完整）中的每一项的
- url...
FS
提供一些方法，供开发者进行I/O的操作
- fs.readFileSync([pathname])：同步读取指定文件中的内容
- fs.readFile([pathname],[callback])：异步读取指定文件中的内容
举个通俗易的例子帮助理解同步读取和异步读取：
例如小明准备开始读一本书《红楼梦》，小明可能分两种方式把这本书读完：
- 在读这本书的时候，小明规定自己不能走神，除了读书什么都不能做，于是三天不吃不喝不睡不上厕所啥也不干的情况下，最后小明终于读完了《红楼梦》，读完一瞬间小明 game over了；
- 在读红楼梦期间，小明决定每天看两个小时，期间正常吃饭睡觉打豆豆，最终花了一个月读完并且能倒背如流，然后准备开始读《三国演义》；
方法**1 就类似是同步读取书中的内容，即 fs.readFileSync([pathname])：
方法2 **就类似是异步读取书中的内容，即
fs.readFile([pathname],[callback])
此处的callback函数 就是读完《红楼梦》开始读《三国》的动作
同步(sync)： 一次就干一件事
异步(async)： 干这件事的期间，下件事可以同时做
简单模拟过程
var http = require('http'),
url = require('url'),
fs = require('fs');
var server = http.createServer(function (req, res) {
console.log('ok');
})
server.listen(8080,function () {
console.log('server is success,listening on 8080 port!');
// 当服务创建成功，并且端口号监听成功后，就会执行这个回调函数，一般会在这里面输出一句话，提示创建成功 （此回调也可以不写）不写便不提示没影响；
})
在浏览器中输入以上地址向服务器发送请求：
在终端中显示回调函数中自定义的语句，并且在浏览器中输入地址发送请求后出现ok ，便说明已经能与服务器建立连接；
建立连接成功后在服务器目录下添加index.html , css/index.css和js/index.js文件， 并在里面随意编写一些内容
需求是浏览器输入地址发送请求后获取到服务器端中的html、css及js文件；
//自行创建：（本例如下）
//index.html
<body>
<div> 一切美好事物从 'Hello World！'开始 </div>
</body>
// css/index.css
body{
color: #fff;
}
// js/index.js
document.body.style.background = 'green';
//服务器端jiao'beserver1.js
var http = require('http'),
url = require('url'),
fs = require('fs');
var server = http.createServer(function (req, res) {
console.log('ok');
var urlObj = url.parse(req.url,true),
pathname = urlObj.pathname,
query = urlObj.query;
if(pathname === '/index.html'){
// 客户端想要请求的就index.html，我们需要获取这个文件中的源代码（I/O），并且把源代码返回
var conFile = fs.readFileSync('./index.html')
res.write(conFile);
res.end();
}
if(pathname === '/css/index.css'){
var conFile = fs.readFileSync('./css/index.css')
res.end(conFile); //可以写一起
}
if(pathname === '/js/index.js'){
var conFile = fs.readFileSync('./js/index.js')
res.end(conFile);
}
})
server.listen(8080,function () {
console.log('server is success,listening on 8080 port!');
})
此时浏览器便会从服务器得到相关数据，浏览器通过引擎渲染后显示以下结果：
但以上的server1.js代码存在以下问题还需要进一步优化：
- 同时需要获取更多个静态资源（100个html）文件时，就不能用if逐个判断了；
- 在客户端向我们的服务发送请求的时候，谷歌浏览器会默认请求一个图片'favicon.ico'，但是我们的服务器上是没有这张图片；如果报错会影响之后的数据请求；
- IE中不能渲染css文件的问题；
优化代码如下：
var http = require('http'),
url = require('url'),
fs = require('fs');
var server = http.createServer(function (req,res) {
var urlObj = url.parse(req.url,true),
pathname = urlObj.pathname,
query = urlObj.query;
/*
* 静态资源文件请求处理（HTML /CSS / JS / IMG / (PNG/JPG/GIF)/TXT...）
* 所有的静态资源文件都有一个共同的特征:都有后缀名，后缀名是由字母和数字组成的
* 分析规律得到，服务器端需要查找文件的路径地址只是在pathname前面加一个点即可；
* 在IE中的问题 ：服务器端返回给客户端的都是字符串格式的数据不管是HTML/CSS/JS/....）,
对于谷歌浏览器来说，它比较智能，会自动识别当前代码是什么类型的代码，然后进行解析和渲染，但是IE这点不算智能，
不能识别具体的文件类型，都当成字符串了；
例：去商店买盐，面粉，苏打 三个白色的 google比较聪明能分辨各自是什么， ie分辨不出来只能在袋子上贴上标签；
* 解决方案： 需要我们在返回数据给客户端的时候，制定当前文件的MIME类型，告诉IE是什么类型即可
* MIME:
* HTML - > text/html
* CSS - > text/css
* JS -> text/javascript
* PNG -> text/png
* .....
* */
var reg = /\.([0-9a-zA-Z]+)/i;
if(reg.test(pathname)){
var conFile = null，
status = 200；
try {
conFile = fs.readFileSync('.'+pathname)
}catch(e){
conFile = 'not found~';
status = 404;
}
// 根据当前请求资源文件的后缀名，计算出文件的MIME类型
var suffix = reg.exec(pathname)[1].toUpperCase(),
suffixMIME = 'text/plain'; //默认是纯字符串文本
switch(suffix){ // 根据具体项目需求添加
case 'HTML':
suffixMIME = 'text/html';
break;
case 'CSS':
suffixMIME = 'text/css';
break;
case 'JS':
suffixMIME = 'text/javascript';
break;
}
//在返回数据内容之前制定MIME类型 （重写响应头）
res.writeHead(status,{
'content-type':suffixMIME + ';charset=utf-8;'
});
res.end(conFile)
}
})
server.listen(8080,function () {
console.log('server is success,lisening on 8080 port!');
});
test：
http://localhost:8080/index.html
http://本机IP:8080/index.html
在PC浏览器中地址栏输入以上test；页面如下说明test ok！
同局域网环境下手机 test Ok！
差不多就这样，如有异议，欢迎指正；
来碗汤，压压惊~~~
“要得到你必须付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界真的是平衡的，每个人都是通过自己的努力，去决定自己生活的样子” ---- 何炅
网友评论