版权声明:本文为原创文章,转载请标明出处
一个简单的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("异步方法执行完毕");
}
}