初学NODE 学习笔记（二）-常用内置模块

2017-02-24 本文已影响0人史密斯_Du

（二）用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！

差不多就这样，如有异议，欢迎指正；

来碗汤，压压惊~~~

“要得到你必须付出，要付出你还要学会坚持，如果你真的觉得很难，那你就放弃，但是你放弃了就不要抱怨，我觉得人生就是这样，世界真的是平衡的，每个人都是通过自己的努力，去决定自己生活的样子” ---- 何炅

初学NODE 学习笔记（二）-常用内置模块

（二）用node.js内置模块，模拟搭建简单服务器（静态资源文件请求的处理）;

明确：NODE是用来开发后台，服务器端;

用到最基本的三个内置模块：HTTP、URL、FS

HTTP

URL

FS

简单模拟过程

猜你喜欢

热点阅读