欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

進階之初探nodeJS

 更新時間:2017年01月24日 10:30:01   作者:猴子  
本文主要介紹了nodeJS的相關知識。具有很好的參考價值,下面跟著小編一起來看下吧

一、前言

在"初探nodeJS"隨筆中,我們對于node有了一個大致地了解,并在最后也通過一個示例,了解了如何快速地開啟一個簡單的服務器。

今兒,再次看了該篇隨筆,發(fā)現(xiàn)該隨筆理論知識稍多,適合初級入門node,固萌生一個想法--想在該篇隨筆中,通過一步步編寫一個稍大一點的node示例,讓我們在整體上更加全面地了解node。

so,該篇隨筆是建立在"初探nodeJS"之上的,固取名為"進階之初探nodeJS"。

好了,侃了這多,那么我們即將實現(xiàn)一個什么樣的示例呢?

示例說明,如下:

用戶通過url之127.0.0.1/login進入登入頁面,待用戶輸入賬戶名后(密碼選項輸不輸都無所謂,只是為了頁面合理),點擊提交,進入home頁面。

node服務端,怎么處理的呢?通過URL判斷,當為/login時,服務端讀取login.html的內容,并將其傳遞到前端顯示;當為/home時,服務端讀取home.html的內容,并將login.html中提交的賬號名與home.html中的模板替換,最后將結果傳遞到前端顯示。

大體流程,如下:

示例最終實現(xiàn)效果,如下:

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

二、前端文件準備

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

在上述說明中,已講過node服務器是通過路由來判斷,加載哪張頁面,固我們將login.html中form的action寫作'./home',以達到我們的目的,請求方式嘛,使用的當然是post咯。

且,因為我們要將在login.html中填寫的賬戶名動態(tài)地與home.html結合,固home.html中的“稱呼”位置,不能寫死,因此我們利用{name}來占位,隨后利用node動態(tài)替換。

好了,簡易編寫的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一年,一定要開心哦~
 </div>
 <img src="./getPic"/> 
 </body>
</html>

home.html

三、編寫node服務

上述中,我們所需要的前端文件已經準備完畢,接下來就是通過node來編寫服務,將它們串聯(lián)起來咯。

首先,我們搭建一個主文件,取名為main.js吧,作用不言而喻,主入口嘛,如果我們在代碼編寫完畢后,想要啟動服務,就node main.js就OK咯。

如下:

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

接著,我們就一起來逐步完善這個主文件。

在“前言”中我們提過,當一個請求來到服務中,我們采取獲取URL的路徑,來判斷接下來的操作,已到達降低耦合性的目的。

所以,在主程序中,我們得利用url這個模塊,來獲得url中的相關路徑,并通過正則來得到第一個路徑名,通過接下來的路由模塊,處理。

如下:

'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!');

好了,接下來,我們就一起來編寫router這個模塊吧。

在我們示例中,router無外乎就是處理login、home以及圖片請求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這三個操作,有很多共通之處,如都會讀取服務端本地文件,以及將讀取的文件,寫入響應體中,固我們將這些操作提取出來,作為operation模塊。

在operation模塊中,我們需要使用到node內置'fs'這個模塊來讀取文件,'fs'模塊我們將會用到如下方法:

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

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

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

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

需要注意的是,讀取圖片也就使用的fs.readFileSync/fs.readFile,不過就是第二個參數還需加上'binary',二進制嘛。

'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模塊

另外,我們在login.html中提交表單時,使用到了post請求,那么在node服務中應該怎么接收傳來的實體呢?

node是采用的監(jiān)聽'data'來接收post方法實體信息,通過'end'來監(jiān)聽接收信息完畢事件。

而,node接收get請求參數就沒這么復雜,直接獲取url后的查詢字符串即可。

好了,我們將獲取post、get請求參數,也寫為一個模塊,取名為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方法,因為是處理的圖片,所以響應頭得寫成'image/jpeg',如下:

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

好了,大致思路已理清,詳細代碼請見github.

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關文章

  • 在Node.js中實現(xiàn)關注列表和粉絲列表的方法示例

    在Node.js中實現(xiàn)關注列表和粉絲列表的方法示例

    在社交網絡或者任何需要用戶交互的應用中,實現(xiàn)關注和被關注的功能是非常常見的需求,本文將通過一個簡單的例子,展示如何在Node.js環(huán)境下實現(xiàn)用戶的關注列表和粉絲列表,需要的朋友可以參考下
    2024-04-04
  • 基于nodejs的雪碧圖制作工具的示例代碼

    基于nodejs的雪碧圖制作工具的示例代碼

    雪碧圖就是把很多小圖標合并為一張圖片,這篇文章主要介紹了基于nodejs的雪碧圖制作工具的示例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-11-11
  • NodeJS 創(chuàng)建目錄和文件的方法實例分析

    NodeJS 創(chuàng)建目錄和文件的方法實例分析

    這篇文章主要介紹了NodeJS 創(chuàng)建目錄和文件的方法,涉及node.js中fs模塊mkdir、writeFile及目錄判斷existsSync等方法的功能與相關使用技巧,需要的朋友可以參考下
    2023-04-04
  • Node.js的Web模板引擎ejs的入門使用教程

    Node.js的Web模板引擎ejs的入門使用教程

    ejs是Node世界的開源模板引擎中比較有人氣的一個,而且并不只是在Express框架中才可以使用,今天為大家?guī)鞱ode.js的Web模板引擎ejs的入門學習教程,其中側重于ejs的layout頁面布局放面
    2016-06-06
  • node.js中的fs.chmod方法使用說明

    node.js中的fs.chmod方法使用說明

    這篇文章主要介紹了node.js中的fs.chmod方法使用說明,本文介紹了fs.chmod方法說明、語法、接收參數、使用實例和實現(xiàn)源碼,需要的朋友可以參考下
    2014-12-12
  • 究竟什么是Node.js?Node.js有什么好處?

    究竟什么是Node.js?Node.js有什么好處?

    這篇文章主要介紹了究竟什么是Node.js?Node.js有什么好處?,為試圖解釋什么是 Node.js,本文將簡要介紹一些背景信息:它要解決的問題,它如何工作,如何運行一個簡單應用程序,最后,Node 在什么情況下是一個好的解決方案,需要的朋友可以參考下
    2015-05-05
  • 在Ubuntu系統(tǒng)上安裝Ghost博客平臺的教程

    在Ubuntu系統(tǒng)上安裝Ghost博客平臺的教程

    這篇文章主要介紹了在Ubuntu系統(tǒng)上安裝Ghost博客平臺的教程,Ghost博客平臺以Node.js寫成,需要的朋友可以參考下
    2015-06-06
  • Nodejs實現(xiàn)的一個簡單udp廣播服務器、客戶端

    Nodejs實現(xiàn)的一個簡單udp廣播服務器、客戶端

    這篇文章主要介紹了Nodejs實現(xiàn)的一個簡單udp廣播服務器、客戶端,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下
    2014-09-09
  • nodejs+express最簡易的連接數據庫的方法

    nodejs+express最簡易的連接數據庫的方法

    這篇文章主要介紹了nodejs+express 最簡易的連接數據庫,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-12-12
  • Win7系統(tǒng)中如何安裝高版本的NodeJS(親測有效!)

    Win7系統(tǒng)中如何安裝高版本的NodeJS(親測有效!)

    Node.js是基于Chrome V8引擎的JavaScript運行環(huán)境,能夠使JavaScript在服務器端運行,這篇文章主要給大家介紹了關于Win7系統(tǒng)中如何安裝高版本的NodeJS的相關資料,需要的朋友可以參考下
    2023-12-12

最新評論