快捷導(dǎo)航

進(jìn)階之初探nodeJS

更新時(shí)間：2017年01月24日 10:30:01 作者：猴子

本文主要介紹了nodeJS的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧

一、前言

在"初探nodeJS"隨筆中，我們對(duì)于node有了一個(gè)大致地了解，并在最后也通過(guò)一個(gè)示例，了解了如何快速地開(kāi)啟一個(gè)簡(jiǎn)單的服務(wù)器。

今兒，再次看了該篇隨筆，發(fā)現(xiàn)該隨筆理論知識(shí)稍多，適合初級(jí)入門node，固萌生一個(gè)想法--想在該篇隨筆中，通過(guò)一步步編寫一個(gè)稍大一點(diǎn)的node示例，讓我們?cè)谡w上更加全面地了解node。

so，該篇隨筆是建立在"初探nodeJS"之上的，固取名為"進(jìn)階之初探nodeJS"。

好了，侃了這多，那么我們即將實(shí)現(xiàn)一個(gè)什么樣的示例呢？

示例說(shuō)明，如下：

用戶通過(guò)url之127.0.0.1/login進(jìn)入登入頁(yè)面，待用戶輸入賬戶名后（密碼選項(xiàng)輸不輸都無(wú)所謂，只是為了頁(yè)面合理），點(diǎn)擊提交，進(jìn)入home頁(yè)面。

node服務(wù)端，怎么處理的呢？通過(guò)URL判斷，當(dāng)為/login時(shí)，服務(wù)端讀取login.html的內(nèi)容，并將其傳遞到前端顯示；當(dāng)為/home時(shí)，服務(wù)端讀取home.html的內(nèi)容，并將login.html中提交的賬號(hào)名與home.html中的模板替換，最后將結(jié)果傳遞到前端顯示。

大體流程，如下：

示例最終實(shí)現(xiàn)效果，如下：

好了，了解示例需求，下面我們就一起來(lái)一步一步實(shí)現(xiàn)上述Demo吧。

二、前端文件準(zhǔn)備

要實(shí)現(xiàn)上述效果，我們首先簡(jiǎn)單地準(zhǔn)備兩個(gè)頁(yè)面login.html、home.html以及一張賀歲圖片，顯而易見(jiàn)，供接下來(lái)node讀取它們并將它們呈現(xiàn)到瀏覽器中，使用。

在上述說(shuō)明中，已講過(guò)node服務(wù)器是通過(guò)路由來(lái)判斷，加載哪張頁(yè)面，固我們將login.html中form的action寫作'./home'，以達(dá)到我們的目的，請(qǐng)求方式嘛，使用的當(dāng)然是post咯。

且，因?yàn)槲覀円獙⒃趌ogin.html中填寫的賬戶名動(dòng)態(tài)地與home.html結(jié)合，固home.html中的“稱呼”位置，不能寫死，因此我們利用{name}來(lái)占位，隨后利用node動(dòng)態(tài)替換。

好了，簡(jiǎn)易編寫的login.html、home.html以及賀歲圖，如下：

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <style>
 form {
 text-align:center;
 }
 </style>
</head>
 <body>
 <form action="./home" method="post">
 賬戶：<input type="text" name="name"/><br/>
 密碼：<input type="password" name="password"/><br/>
 <input type="submit" value="提交"/>
 </form> 
 </body>
</html>

login.html

<!DOCTYPE html>
<head>
 <meta charset="utf-8">
 <style>
 body {
 text-align:center;
 }
 span {
 color: blue;
 }
 </style>
</head>
 <body>
 <div>
 <span>{name}</span>,新de一年，一定要開(kāi)心哦~
 </div>
 <img src="./getPic"/> 
 </body>
</html>

home.html

三、編寫node服務(wù)

上述中，我們所需要的前端文件已經(jīng)準(zhǔn)備完畢，接下來(lái)就是通過(guò)node來(lái)編寫服務(wù)，將它們串聯(lián)起來(lái)咯。

首先，我們搭建一個(gè)主文件，取名為main.js吧，作用不言而喻，主入口嘛，如果我們?cè)诖a編寫完畢后，想要啟動(dòng)服務(wù)，就node main.js就OK咯。

如下：

'use strict';
var http = require('http');
var server = http.createServer();
server.on('request',function(req, res){
 //排除favicon.ico請(qǐng)求
 if(req.url != '/favicon.ico'){
 //TODO
 }else{
 res.end();
 }; 
}).listen('80');
console.log('Server running!');

接著，我們就一起來(lái)逐步完善這個(gè)主文件。

在“前言”中我們提過(guò)，當(dāng)一個(gè)請(qǐng)求來(lái)到服務(wù)中，我們采取獲取URL的路徑，來(lái)判斷接下來(lái)的操作，已到達(dá)降低耦合性的目的。

所以，在主程序中，我們得利用url這個(gè)模塊，來(lái)獲得url中的相關(guān)路徑，并通過(guò)正則來(lái)得到第一個(gè)路徑名，通過(guò)接下來(lái)的路由模塊，處理。

如下：

'use strict';
var http = require('http');
var url = require('url');
var server = http.createServer();
server.on('request',function(req, res){
 if(req.url != '/favicon.ico'){
 //獲取路徑
 let pathname = url.parse(req.url).pathname;
 pathname = pathname.match(/\w+/)[0];
 //router具體，待寫...
 router[pathname](req, res);
 }else{
 res.end();
 }; 
}).listen('80');
console.log('Server running!');

好了，接下來(lái)，我們就一起來(lái)編寫router這個(gè)模塊吧。

在我們示例中，router無(wú)外乎就是處理login、home以及圖片請(qǐng)求getPic，所以，我們將router模塊基本骨架，暫定如下：

'use strict';
var router = {
 login: function(req, res){
 //TODO 
 },
 home: function(req, res){
 //TODO
 },
 getPic: function(req, res){
 //TODO
 }
};
module.exports = router;

且，我們發(fā)現(xiàn)login、home以及getPic這三個(gè)操作，有很多共通之處，如都會(huì)讀取服務(wù)端本地文件，以及將讀取的文件，寫入響應(yīng)體中，固我們將這些操作提取出來(lái)，作為operation模塊。

在operation模塊中，我們需要使用到node內(nèi)置'fs'這個(gè)模塊來(lái)讀取文件，'fs'模塊我們將會(huì)用到如下方法：

1、fs.readFileSync--同步讀取文件

2、fs.readFile--異步讀取文件

3、fs.writeFileSync--同步寫入文件

4、fs.writeFile--異步寫入文件

需要注意的是，讀取圖片也就使用的fs.readFileSync/fs.readFile，不過(guò)就是第二個(gè)參數(shù)還需加上'binary'，二進(jìn)制嘛。

'use strict';
var fs = require('fs');
var operationFile = {
 readFileSync: function(path, callback){//同步讀取文件
 let data = fs.readFileSync(path, 'utf-8');
 syncOperation(callback, data, '同步讀取文件完畢');
 },
 readFileAsync: function(path, callback){//異步讀取文件
 fs.readFile(path, function(err, data){
 asyncOperation(err, callback, data, '異步讀取文件成功');
 }); 
 },
 writeFileSync: function(path, data, callback){//同步寫入文件
 fs.writeFileSync(path, data);
 syncOperation(callback, null, '同步寫入文件完畢'); 
 },
 writeFile: function(path, data, callback){//異步寫入文件
 fs.writeFile(path, data, function(err){
 asyncOperation(err, callback, null, '異步寫入文件完畢');
 });
 },
 readImg: function(path, callback){//異步讀取圖片
 fs.readFile(path, 'binary', function(err, file){
 asyncOperation(err, callback, file, '異步讀取圖片完畢');
 });
 } 
};
function syncOperation(callback, data, msg='操作成功'){
 if(typeof callback === 'function'){
 callback(data);
 }else{
 console.log(msg);
 } 
}
function asyncOperation(err, callback, data, msg='操作成功'){
 if(err){
 console.log(err);
 }else if(typeof callback === 'function'){
 callback(data);
 }else{
 console.log(msg);
 } 
}
module.exports = operationFile;

operation模塊

另外，我們?cè)趌ogin.html中提交表單時(shí)，使用到了post請(qǐng)求，那么在node服務(wù)中應(yīng)該怎么接收傳來(lái)的實(shí)體呢？

node是采用的監(jiān)聽(tīng)'data'來(lái)接收post方法實(shí)體信息，通過(guò)'end'來(lái)監(jiān)聽(tīng)接收信息完畢事件。

而，node接收get請(qǐng)求參數(shù)就沒(méi)這么復(fù)雜，直接獲取url后的查詢字符串即可。

好了，我們將獲取post、get請(qǐng)求參數(shù)，也寫為一個(gè)模塊，取名為getQuery，如下：

'use strict';
var url = require('url');
var querystring = require('querystring');
module.exports = {
 fromGet: function(req, res, callback){
 var data = url.parse(req.url, true).query;
 callback(data); 
 },
 fromPost: function(req, res, callback){
 var data = '';
 req.on('data', function(chunk){
 data += chunk;
 });
 req.on('end', function(){
 data = querystring.parse(data);
 callback(data);
 });
 }
};

getQuery模塊

最后，就是在router模塊中，引入operation、getQuery模塊，完善login、home以及getPic方法咯。

在這里需要注意的是getPic方法，因?yàn)槭翘幚淼膱D片，所以響應(yīng)頭得寫成'image/jpeg'，如下：

res.writeHead(200, {'Content-Type':'image/jpeg'});

好了，大致思路已理清，詳細(xì)代碼請(qǐng)見(jiàn)github.

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: