Node Web学习笔记(2)-异步读取,返回页面

上次我们将html页面嵌入到了代码中,大家都知道这种方式非常的不便。今天的内容就是要将html页面从代码中分离出来,这样就涉及了文件的读写模块,在Node中称之为fs模块。下面先对fs模块做一个简单的学习,还是以代码为主。

1
2
3
4
5
var fs = require('fs'); //引入模块
var data = fs.readFileSync('text.txt', 'utf8'); //读取文件内容赋予变量data
//自行在当前目录建立text.txt文件
console.log(data);
console.log("test,test,test,test,test");

上面就是fs模块最简单的应用,读取一个文件,然后打印到终端上。打印出来的效果应该如下图所示。

接着看下面的代码,同样是读取文件内容,然后打印在终端。

1
2
3
4
5
6
7
8
9
var fs = require('fs');
fs.readFile('text.txt', 'utf8',function(err, data){
if(err){
console.log(err);
}else{
console.log(data);
}
});
console.log("test,test,test,test,test");

咋一看没有什么区别嘛,运行一下,结果如下:

区别出来了,为什么明明test,test,test,test,test的打印语句在后面,而实际上却跑到前面去了,奇怪就对了,这就是Node的最重要的特性之一,也是它独特的魅力。

仔细看这段代码,是不是跟前面http.createServer()有相似的感觉,他们都使用了回调函数的异步机制。何为异步? 说白了,就是程序执行到这里,并不是要等着它执行完,再执行后面的程序,主程序接着往下走,在这里它读取文件,等文件读完了,通过触发事件,调用回调函数。说得比较白话啊,总之记住:Node是基于事件驱动、异步机制、单线程的服务器端编程语言。

在后面的学习中再慢慢理解,现在回到正题,在这里我要把html页面单独出来,然后通过fs模块读取,返回到页面上,那么整个程序的代码就应该是这样的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//Server.js
var http = require("http");
var fs = require("fs");
var server = http.createServer(function(req , res){
var htmlPage = fs.readFile("index.html", "utf8",function(err , data){
if (err) {
console.log(err);
}else{
res.writeHead(200 , {"Content-Type" : "text/html"});
res.end(data);
}
});
});
server.listen(8888);
console.log("Your server is started @ http://localhost:8888");

下面附上index.html,当然这不是重点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!--index.html-->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>My Test Page</title>
<style>
body{background-color: grey;text-align: center;}
</style>
</head>
<body>
<h2>我的表单</h2>
<form name="index" action="/post" method="post">
用户名:
<input type="text" name="username"></br>
密码:
<input type="text" name="password"></br>
邮箱:
<input type="text" name="email"></br>
<input type="submit" value="提交">
<input type="reset" value="取消">
</form>
</body>
</html>

下次主要内容为『事件驱动』