進(jìn)階之初探nodeJS
一、前言
在"初探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í)也希望多多支持腳本之家!
- 簡(jiǎn)單實(shí)現(xiàn)nodejs上傳功能
- 基于NodeJS+MongoDB+AngularJS+Bootstrap開(kāi)發(fā)書店案例分析
- nodejs實(shí)例解析(輸出hello world)
- Highcharts+NodeJS搭建數(shù)據(jù)可視化平臺(tái)示例
- nodejs利用http模塊實(shí)現(xiàn)銀行卡所屬銀行查詢和騷擾電話驗(yàn)證示例
- nodeJS刪除文件方法示例
- 學(xué)習(xí) NodeJS 第八天:Socket 通訊實(shí)例
- 詳解Nodejs基于mongoose模塊的增刪改查的操作
- nodejs連接mongodb數(shù)據(jù)庫(kù)實(shí)現(xiàn)增刪改查
- Nodejs 搭建簡(jiǎn)單的Web服務(wù)器詳解及實(shí)例
- NodeJS實(shí)現(xiàn)客戶端js加密
- 詳解NodeJs支付寶移動(dòng)支付簽名及驗(yàn)簽
相關(guān)文章
在Node.js中實(shí)現(xiàn)關(guān)注列表和粉絲列表的方法示例
在社交網(wǎng)絡(luò)或者任何需要用戶交互的應(yīng)用中,實(shí)現(xiàn)關(guān)注和被關(guān)注的功能是非常常見(jiàn)的需求,本文將通過(guò)一個(gè)簡(jiǎn)單的例子,展示如何在Node.js環(huán)境下實(shí)現(xiàn)用戶的關(guān)注列表和粉絲列表,需要的朋友可以參考下2024-04-04NodeJS 創(chuàng)建目錄和文件的方法實(shí)例分析
這篇文章主要介紹了NodeJS 創(chuàng)建目錄和文件的方法,涉及node.js中fs模塊mkdir、writeFile及目錄判斷existsSync等方法的功能與相關(guān)使用技巧,需要的朋友可以參考下2023-04-04在Ubuntu系統(tǒng)上安裝Ghost博客平臺(tái)的教程
這篇文章主要介紹了在Ubuntu系統(tǒng)上安裝Ghost博客平臺(tái)的教程,Ghost博客平臺(tái)以Node.js寫成,需要的朋友可以參考下2015-06-06Nodejs實(shí)現(xiàn)的一個(gè)簡(jiǎn)單udp廣播服務(wù)器、客戶端
這篇文章主要介紹了Nodejs實(shí)現(xiàn)的一個(gè)簡(jiǎn)單udp廣播服務(wù)器、客戶端,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-09-09nodejs+express最簡(jiǎn)易的連接數(shù)據(jù)庫(kù)的方法
這篇文章主要介紹了nodejs+express 最簡(jiǎn)易的連接數(shù)據(jù)庫(kù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12Win7系統(tǒng)中如何安裝高版本的NodeJS(親測(cè)有效!)
Node.js是基于Chrome V8引擎的JavaScript運(yùn)行環(huán)境,能夠使JavaScript在服務(wù)器端運(yùn)行,這篇文章主要給大家介紹了關(guān)于Win7系統(tǒng)中如何安裝高版本的NodeJS的相關(guān)資料,需要的朋友可以參考下2023-12-12