進階之初探nodeJS

来源:http://www.cnblogs.com/giggle/archive/2017/01/24/6287931.html
-Advertisement-
Play Games

在"初探nodeJS"隨筆中，我們對於node有了一個大致地瞭解，併在最後也通過一個示例，瞭解瞭如何快速地開啟一個簡單的伺服器。今兒，再次看了該篇隨筆，發現該隨筆理論知識稍多，適合初級入門node，固萌生一個想法--想在該篇隨筆中，通過一步步編寫一個稍大一點的node示例，讓我們在整體上更加全面地了... ...


一、前言

在"初探nodeJS"隨筆中，我們對於node有了一個大致地瞭解，併在最後也通過一個示例，瞭解瞭如何快速地開啟一個簡單的伺服器。

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

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

好了，侃了這多，那麼我們即將實現一個什麼樣的示例呢？

示例說明，如下：

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

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

大體流程，如下：

 

示例最終實現效果，如下：

好了，瞭解示例需求，下麵我們就一起來一步一步實現上述Demo吧。

二、前端文件準備

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

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

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

好了，簡易編寫的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

newYear.png

三、編寫node服務

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

首先，我們搭建一個主文件，取名為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;

 且，我們發現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是採用的監聽'data'來接收post方法實體信息，通過'end'來監聽接收信息完畢事件。

而，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.

最後，祝大家新年快樂~

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 《游戲編程模式》（6）
    Chapter 14 組件模式 允許一個單一的實體跨越多個不同域而不會導致耦合。 為實現兩個類之間的代碼共用，應該讓他們擁有同一個類的實例，而不是繼承同一個類。 使用情境： 分割不同的域： 1 class InputComponent 2 { 3 4 public: 5 void update(Bj ...
  • 微信小程式教程（第四篇）
    小程式開發基本框架及其限制與優化 開發基本框架（MINA框架） 開發基本框架（MINA框架） └─ Project-folder/ ·································· 項目所在目錄 ├─ pages/ ·· ...
  • 安裝使用python工具
    一、python的安裝調試 首先安裝python，在安裝過程中基本上可以一路下一步，但在安裝結束後要勾選覆選框“add python to path”，主要目的是為了讓系統自動添加環境變數。 安裝完成後，win+R打開運行命令（或者在開始菜單，點擊運行），輸入cmd，進入dos視窗，在dos視窗下輸 ...
  • 觀察者模式（12）
    今天我們來講一下觀察者模式。還是老樣子，給大家一個案例。 一、案例 在我們懷念的學生時代，我們會有這麼一個現象，當在教室里上自習的時候，讓一個同學把風，我們在教室里玩，當老師來的時候，讓那個同學給我們說一聲。 好，下麵我們就用簡單的控制台應用程式來實現上述的場景（一個把風的同學，兩個玩耍的同學） 客 ...
  • 微信小程式教程（第三篇）
    小程式的架構及實現機制，通道服務及會話管理 小程式架構及實現機制 小程式並不是 H5 應用，而是更偏向於傳統的 CS 架構，它是基於數據驅動的模式，一切皆組件（視圖組件）。所以建議在開發小程式時不要以web app的開發思維去思考。小程式開發語言是獨立的一整套開發語言體系，既與Html+CSS+Ja ...
  • 自製圖片放大鏡
    註釋： small img size：600x400 big img size：1200x800 原理： 問題： 居中理解太差： absolute ,left ,top,right,bottom,margin 放大縮小問題： 起初： transform： scale() 縮放 利用 transiti ...
  • JS的animate-queue和step-animate
    Step-animate: 分為3部分：{配置},{step:function(){...},duration:1000} 通過 queue刪除動畫 隊列， 用 dequeue繼續動畫 ...
  • 圖片上傳之FileAPI與NodeJs
    HTML5之fileAPI HTML5之fileAPI使得我們處理圖片上傳更加簡單。 實例 html代碼 效果: 這裡我們可以通過 來獲取到圖片的信息。 這裡有 ,`size type`這幾個我們常用的屬性。 實現預覽 選擇好圖片後，我們都希望會有個預覽功能。這個html5也為我們想到了。 他提供了 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類