Nodejs初体验之静态文件服务器

  • 什么是静态文件服务器?
    •  个人理解就是网页上没有动态数据的变化,只有文件I/O操作在服务器
  • 怎么样?或者说原理?

    •  首先,用户从客户端输入文件地址,服务器端根据这个地址进行解析,所以 第一步应该是解析路由 ;
    •    拿到路由之后就可以确定文件在磁盘的具体位置,就可以读取文件流,所以 第二步是读取文件流输出到客户端 。
  • 那么,就先来做一个小demo:

  1.首先,我们的项目目录:

  |-FirstNodeJs

    |-node_moudles

    |-public

      |-----静态资源(html,css,js,img,video..)

    |-routers

      |-routes.js

    |-views

    |-app.js

    |-package.json

 

  2.  接着我们在 app.js  写上我们需要调用的方法:

// common.js 标准  使用的是require.js的管理客户端模块
//     "use strict"
//第一步获取http协议
const myhttp = require("http");

const routes = require("./routes/routes.js")
//引入路由模块,以便在route层做分工

// 第二步 通过http协议创建服务器
const myserver = myhttp.createServer(function (req,res) {
    //响应浏览器
    // console.log(request.url);
    var myPath = req.url;
    // console.log(myPath)
    var myNewPath = myPath.split(".");
    // console.log(myNewPath[1]);
      if(myNewPath[1]=="html"||myNewPath[1]=="css"||myNewPath[1]=="gif"||myNewPath[1]=="png"||myNewPath[1]=="jpg"||myNewPath[1]=="js"){
        //这里做的是对静态资源请求的拦截。
        routes.sendInfo(res,myPath,myNewPath[1])
    }
})   
// 第三步 监听服务器

myserver.listen(8070,function () {
    console.log("服务器已经启动")
})


3. 在解析到这个路由过后,那么就可以文件流进行响应了,但是这里我们遇见一个问题即不同文件它的解析方式是不同的,比如js 它的解析就是text/javascript;而img请求呢

它将会是以图片img/+图片的类型进行解析 等;

  所以我们就要考虑对代码的封装,因为他们的共同点都是返回给客户端信息,不同点就只是它们的解析方式不同。那么我们应该考虑到npm 里有没有朋友对这个进行过封装呢?答案是有的,它就是--mime;

  routers 文件路由层:

 const myfs = require("fs")    //// 该函数使用了fs这一文件模块,用于提取文件里面的内容, 提取出来的内容(或错误)都会在回调函数传回来,这也就是Node.js非阻塞I/O事件编程思想的体现

const mime = require("mime");   // 使用第三方mime模块进行响应。

exports.sendInfo = function (res,myPath,myNewPath) {
    myfs.readFile("public"+myPath,function (err,data) {
        res.writeHead(200,{"content-type":mime.lookup(myNewPath)}) //这里就是我们想要的解析方式
        res.write(data)
        res.end();
    })
}

 

  


 

 

  以上,就是我们的简单方法即使用第三方插件mime,下面就写一下一个便于理解的方法

 


 

  1.app.js

const myhttp = require("http");

const routes = require("./routes/routes.js")

// 第二步 通过http协议创建服务器
var myserver = myhttp.createServer(function (req,res) {
  
    var myPath = req.url;
 
    var myNewPath = myPath.split(".");

    if(myNewPath[1]=="html"){
        routes.sendHtml(res,myPath,myNewPath[1])
        // myfs.readFile("public"+myPath,"utf-8",function (err,data) {   //下面注释的代码,其实就是没有用routers这个模块来进行拆分,是可以独立运行的//
        //     respones.writeHead(200,{"content-type":"text/html;charset=utf-8"})
        //     // console.log(data)
        //     respones.write(data)
        //     respones.end();
        // })
    }
    else if(myNewPath[1]=="css"){
        routes.sendCss(res,myPath,myNewPath[1])
   
        // myfs.readFile("public"+myPath,"utf-8",function (err,data) {
        //     respones.writeHead(200,{"content-type":"text/css;charset=utf-8"})
        //     // console.log(data)
        //     respones.write(data)
        //     respones.end();
        // })
    }
    else if(myNewPath[1]=="gif"||myNewPath[1]=="png"||myNewPath[1]=="jpg"){
        routes.sendImg(res,myPath,myNewPath[1])
        // myfs.readFile("public"+myPath,function (err,data) {
        //     respones.writeHead(200,{"content-type":"img/"+myNewPath[1]})
        //     // console.log(data)
        //     respones.write(data)
        //     respones.end();
        // })
    }
    else if(myNewPath[1]=="js"){
        routes.sendJs(res,myPath,myNewPath[1])
        // myfs.readFile("public"+myPath,"utf-8",function (err,data) {
        //     respones.writeHead(200,{"content-type":"text/javascript;charset=utf-8"})
        //     respones.write(data)
        //     respones.end();
        // })
    }
})

myserver.listen(8070,function () {
    console.log("服务器已经启动")
})

 

  2.routers 路由模块文件

const myfs = require("fs")
const mime = require("mime");


exports.sendHtml = function (res,myPath,myNewPath) {
    myfs.readFile("public"+myPath,"utf-8",function (err,data) {
        res.writeHead(200,{"content-type":"text/html;charset=utf-8"})
        res.write(data)
        res.end();
    })
}
exports.sendJs = function (res,myPath,myNewPath) {
    myfs.readFile("public"+myPath,"utf-8",function (err,data) {
        res.writeHead(200,{"content-type":"text/javascript;charset=utf-8"})
        res.write(data)
        res.end();
    })
}
exports.sendCss = function (res,myPath,myNewPath) {
    myfs.readFile("public"+myPath,"utf-8",function (err,data) {
        res.writeHead(200,{"content-type":"text/css;charset=utf-8"})
        res.write(data)
        res.end();
    })
}
exports.sendImg = function (res,myPath,myNewPath) {
    myfs.readFile("public"+myPath,function (err,data) {
        res.writeHead(200,{"content-type":"img/"+myNewPath})
        res.write(data)
        res.end();
    })
}

 

 


 

总结,第一点,要清楚代码流程,在app,js 那三步即1.先引入http 协议2.利用nodejs创建http服务器;3.监听端口;

   第二点,在实现demo时遇到的问题,文件的地址报错就是在readfile()出错;

        引用文件时注意路径;

   第三点,时刻要分清楚app.js/routers.js数据流的走向,谁请求谁响应。

 

posted on 2017-03-28 00:52  最菜的就是你  阅读(2760)  评论(0编辑  收藏  举报

导航