Node Web学习笔记(12)-完整的一次练习

在前面的一系列学习笔记中,分别学习以及记录了Node的异步机制、事件驱动、模块与包、Get访问、Post访问、路由转发等等内容。今天就前面的内容做一个简单完整的练习,会包含前面所有的知识点。

首先来完成上次留下的那1%内容,把handle对象移走,放在路由器里怪别扭的,放哪里呢,放服务器里不合适吧,好吧,那就只能放到这里了。

1
2
3
4
5
6
7
8
9
10
11
12
13
//app.js
var server = require("./server.js");
var router = require("./router.js");
var reqHandler = require("./reqHandler.js");
var reqHandle = new reqHandler();
handle = {};
handle["/"] = reqHandle.start;
handle["/index"] = reqHandle.start;
handle["/show"] = reqHandle.show;
handle["/form"] = reqHandle.form;
handle["/post"] = reqHandle.post;
handle["404"] = reqHandle._404;
server.startServer(router.route,handle);

放哪也不合适,就只能放到启动文件了,正好也说明了一点,那就是事先我就申明了我有哪些资源可以让你访问。把handle对象放到了这里,并将它当做参数传出,从这段内容,就基本能看出,这里有哪些页面或是功能。

路由器模块以及服务器模块基本上不动(这就是之前一直想要剥离他们的好处),贴上代码,不做多解释。

1
2
3
4
5
6
7
8
9
//server.js
var http = require('http');
function startServer(route,handle){
http.createServer(function(req,res){
route(handle,req,res);
}).listen(8888);
console.log("Your server is start@port 8888");
}
exports.startServer = startServer;


1
2
3
4
5
6
7
8
9
10
11
//router.js
var url = require('url');
function route(handle,req,res){
var pathname = url.parse(req.url).pathname;
if(typeof handle[pathname] == 'function'){
return handle[pathname](res,req); //这里较之前多传了一个req对象,原因是后面的页面有用到该对象的缘故
}else{
return handle["404"](res);
}
}
exports.route = route;

路由器模块和服务器模块代码基本上就没有变动,这就是模块话编程的好处。主要页面的显示以及功能的实现全部交给了处理请求函数,既有展示页面又有服务请求,功能较之之前要多,但是基本上是之前笔记里存在的。

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//reqHandler.js
var fs = require('fs');
var querystring = require('querystring');
function reqHandler(res,req){
this.start = function (res){
var pageContent = fs.readFileSync("index.html","utf8");
res.writeHead(200,{"Content-Type":"text/html"});
res.end(pageContent);
}
this.show = function(res){
fs.readFile("./111.jpg", "binary" , function (error,file) {
if(error){
res.writeHead(500 , {"Content-Type":"text/html"});
res.write(error + "\n");
res.end();
}else{
res.writeHead(200 , {"Content-Type":"image/jpg"});
res.write(file,'binary');
res.end();
}
});
}
this.form = function(res){
var pageContent = fs.readFileSync("form.html","utf8");
res.writeHead(200,{"Content-Type":"text/html"});
res.end(pageContent);
}
this.post = function(res,req){
var post = '';
req.on("data",function(chunk){
post+= chunk;
});
req.on("end",function(){
var name = querystring.parse(post).name;
var email = querystring.parse(post).email;
var address = querystring.parse(post).address;
res.writeHead(200,{"Content-Type":"text/html"});
res.write("<meta charset=\"utf-8\"/>");
res.write("<h3 style=\"color:red\">你提交的信息如下:<h3/>");
res.write("Your name is : "+ name + "<br/>");
res.write("Your email is : "+ email+ "<br/>");
res.write("Your address is : "+ address+ "<br/>");
res.end();
});
}
this._404 = function(res){
res.writeHead(200,{"Content-Type":"text/html"});
res.end("404 Not Found");
}
}
module.exports = reqHandler;

虽然功能都在这里实现,但是这里的代码却非常的工整,也正是前面服务器和路由器的存在才使这里变得如此工整,各个页面或者功能一目了然,一个一个排列着,但是这并不是最好的实现方式,因为页面view依然很乱,并且这里没有模型Model,所以接下来要学习的内容就是MVC框架了。

这里放上代码里的两个简单页面吧,可以将源代码拷贝下来做练习,美女照片也一并贴上。

index.htmlform.html照片