node.js读取图文页面，同时读取文字，图片 

版权声明：本文为原创文章，转载请标明出处

 

一个简单的html页面：

login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    登录页面login
    <img src="./showimg" />
</body>
</html>

在这里将通过路由的方式来读取图片和文字。

test8.js:

var http = require('http');
var url = require('url');
var router = require('./router')
http.createServer(function(request,response){
    // response.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
    if(request.url!="/favicon.ico"){  //清除2次访问
        var pathname = url.parse(request.url).pathname;
        pathname = pathname.replace(/\//,'');//替换掉前面的/
        console.log(pathname);
        router[pathname](request,response);
    }
}).listen(8000);
console.log("is running")

逻辑是这样的：在浏览器输入127.0.0.1:8000/login，通过路由识别出login后，调用router.js中login的方法，在这里面去读取login.html，然后再把内容发送回给客户端。当客户端识别到<img src=" "/>时，又会再次发送一个请求到server（服务端），将src里的路由提交到router.js里，服务端接着去读取图片，将图片以二进制流的方式发送给浏览器。

router.js:

var optfile = require('./optfile');
function getRecall(req,res){
    res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});
    function recall(data){
            res.write(data);
            res.end('');
    }
    return recall;
}
module.exports={
    login:function(req,res){
        // function recall(data){
        //     res.write(data);
        //     res.end('');
        // }
        recall = getRecall(req,res);
        optfile.readfile('./views/login.html',recall);
    },
    
    showimg:function(req,res){
        res.writeHead(200,{'Content-Type':'image/jpeg'});
        optfile.readImg('./imgs/scenery.png',res);
    }
}

"./views/login.html"就是上面的login页面

optfile.js:

var fs = require('fs');
var url = require('url');
module.exports={ 
    readImg:function(path,res){
        fs.readFile(path,'binary',function(err,file){  //binary指二进制流文件
            if(err){
                console.log(err);
            }else{
                res.write(file,'binary');
                res.end();
            }
        });
        console.log("异步方法执行完毕");
    }
}

 

posted @ 2017-05-05 18:38  陈陈chenchen  阅读(2061)  评论(0)  编辑  收藏  举报