HTTP实现一个简单网站

HTTP实现一个简单网站

我们要实现的的网站功能有:

  • 提供图片访问服务
  • 首页提供当前目录的文件

啊喂…就这样么?…没错,就这么简单
看完这节后再用中间件来对比一下就知道不用中间件实现的蛋疼了..

建立路由

这也算是一个路由了,这里对req.url进行了解码 因为如果你访问带中文的图片浏览器提交的时候会转码 所以这里要解码成中文
比如访问127.0.0.1/img/233.jpg
req.url=>/img/233.jpg

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var http=require("http");
var fs=require("fs");
var server=http.createServer(function(req,res){
var cdurl=decodeURIComponent(req.url)
//访问首页路由
if(req.method=="GET"&&cdurl=="/"){
})
//访问的是图片资源..并且是以jpg结尾的 图片路由
}else if(req.method=="GET"&&cdurl.substr(0,4)=="/img"&&cdurl.substr(-4)==".jpg"){
//其他的返回404
}else{
res.writeHead(404);
res.end("404没找到")
}
})

首页路由处理

这里利用了一个 fs.readdir来读取img目录下的所有文件
并且返回一个a标签给浏览器

1
2
3
4
5
6
7
fs.readdir(__dirname+"/img",function(err,arr){
console.log(arr)
arr.forEach(function(elem,index){
console.log(index)
res.write("<a href='http://127.0.0.1:3100/img/"+elem+"'>"+elem+"</a> </br>")
})
res.end()

图片路由处理

fs.exists用来判断文件是否存在 如果存在则设置一下返回头为jpg
fs.createReadStream创建一个文件读取流
.pipe建立一个管道给res
首先我们知道res有data事件和end事件
createReadStream也有data事件和end事件
这段代码相当于

1
2
3
4
5
fs.createReadStream(path)
.on("data",function(data){
res.write(data)
})
.on("end",function(){res.end()})

readStream是一个池子
res也是一个池子
中间用pipe(管道)连接起来 这样就实现了水的传输.
…当然..你用上面的代码写效果完全一样只是麻烦了点.

1
2
3
4
5
6
7
8
9
fs.exists(__dirname+cdurl,function(files){
if(files){
res.writeHead(200,{"Contenct-Type":"application/jpg"})
fs.createReadStream(__dirname+cdurl).pipe(res)
}else{
res.writeHead(404);
res.end("404没找到")
}
})

最终的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
var http=require("http");
var fs=require("fs");

var server=http.createServer(function(req,res){
var cdurl=decodeURIComponent(req.url)
//访问首页
if(req.method=="GET"&&cdurl=="/"){
fs.readdir(__dirname+"/img",function(err,arr){
console.log(arr)
arr.forEach(function(elem,index){
console.log(index)
res.write("<a href='http://127.0.0.1:3100/img/"+elem+"'>"+elem+"</a> </br>")
})
res.end()
})
//访问的是图片资源..并且是以jpg结尾的
}else if(req.method=="GET"&&cdurl.substr(0,4)=="/img"&&cdurl.substr(-4)==".jpg"){
fs.exists(__dirname+cdurl,function(files){
if(files){
res.writeHead(200,{"Contenct-Type":"application/jpg"})
fs.createReadStream(__dirname+cdurl).pipe(res)
}else{
res.writeHead(404);
res.end("404没找到")
}
})
//其他的返回404
}else{
res.writeHead(404);
res.end("404没找到")
}
})
server.listen(3100)