跳到主要內容區塊

ntuccepaper2019

技術論壇

利用NPM快速建置Node.js網路應用框架
  • 卷期:v0034
  • 出版日期:2015-09-20

作者:何宗諭 / 臺灣大學計算機及資訊網路中心程式設計組幹事


Node.js是一個基於Google V8 JavaScript 引擎所開發出來的Web應用框架(Web application framework),其輕量與高效能的技術,逐漸成為後端平台開發的主流。Node.js可以讓JavaScript程式不再與瀏覽器綁定,並獨立執行於後端伺服器,其輕量的架構更有利於運用在嵌入式系統。最重要的是,透過NPM(Node Package Manager)官網上的大量模組,可快速建構需求目標,大大減少開發的時程,本文將以一個簡單的實作例子,介紹如何應用NPM開發網路框架。

 


圖一 Node.js標誌(https://nodejs.org)

 

前言

早期受限於網路頻寬的限制,為了節省頻寬,一個可以在瀏覽器直接執行的語言JavaScript就此被設計出來,因此我們一般認為JavaScript必定只能在瀏覽器上執行,雖然JavaScript普遍被應用在前端的互動式網頁開發,但事實上它仍可支援後端伺服器的開發。隨著網路資料量的大幅增加,網頁的前後端設計也逐漸分工,為了處理大量的資料運算,後端的網路設計是相當重要,Node.js就是一個基於JavaScript語法,用於開發後端網路伺服器的語言。

 

與其說Node.js是一個後端程式語言,倒不如把Node.js想像是一種基礎框架,在這基礎框架上,透過結合開放原始碼(Open Source)的資源,讓Node.js變成網路資源的資料庫中心,以便快速建置網路應用程式。對於已熟悉JavaScript的開發者來說,因為語法相似,Node.js可以快速上手,即便是從來沒學過JavaScript的初學者,透過套件管理NPM(Node Package Manager),也可以快速打造網路應用程式,礙於篇幅有限,本文不探討細部的技術,關於Node.js的語法,網路上有不少資源[7],可以自行學習參考,本文是假設從來沒有學過JavaScript,也能以實際的例子,一步一步建構其目標網頁。

Node.js與NPM簡介

Node.js開發者Ryan Dahl 最早稱之為web.js,顧名思義就是用以開發Web伺服器的JavaScript套件,之所以後來命名為Node,可以想像一個大型的網路應用必是由許多函式所以組成,若把這些通訊協定應用程式(比如說,http、cookies、Database)都當成一個獨立的節點(node),而Node.js就是將這些應用程式節點,所集結而成的大型框架。比如說,若要開發一個線上影音串流伺服器,其實並不須瞭解細部的網路通訊協定,也不用去瞭解複雜的影音格式,只要用別人現成已開發的模組,即可完成網路應用程式,當然以上是假設你已經熟悉Node.js與JavaScript的語法。

 

即便是初學者,在不熟Node.js的情況下,仍可用現成的開發模組,完成簡單的建置,因為Node.js有龐大的套件資源,因此Node.js社群提供了一個套件管理NPM,NPM主要是幫助程式開發者安裝相依的套件,Node.js的其中一個特色是輕量化與可搬移性,因此可以用最小的資源打造屬於自己的環境,並接著使用NPM在local端完成所有相依的套件。

 

以下介紹如何安裝Node.js以及NPM。
- Windows系統
1. 請至https://nodejs.org/ 官網,下載*.msi檔,並執行安裝。

 


圖二 Node.js官網

 

2.此安裝檔也會同時將npm管理套件也安裝好,要查看是否正確安裝,請在Windows的程式集,Node.js目錄下執行Node.js command prompt (這邊請稍微注意,不是Node.js執行檔),並進入command line模式。

 


圖三 Node.js command line 啟動

 

3.執行以下指令node -v和npm -v,即可以看到目前已安裝的版本。
直接執行node,則進入Node.js shell,可執行JavaScript語法,輸入console.log(“Hello World!”);

 


圖四 Node.js 環境啟動

 

-Linux系統(以Ubuntu為例)
1.使用app-get 來安裝,若是CentOS則用yum install
$ sudo apt-get install nodejs
$ sudo apt-get install npm

 


圖五 NPM安裝

 

2.Linux上node已被更名為nodejs,可用ln -s 指令來連結node為執行檔
$ sudo ln -s /usr/bin/nodejs /usr/local/bin/node
使用node -v 和npm -v 確認是否已安裝成功。
因為apt-get 安裝比較穩定版本,若要最新版本可自行抓原始碼來編譯。 https://github.com/joyent/node.git

Express 網頁框架

到目前為止,我們已安裝好Node.js和NPM,接下來則是要利用NPM開始建構一個新的網頁。我們當然可以用JavaScript語法來打造一個全新網頁,但既然NPM提供了相當多的資源模組,最簡單的方法當然就是利用這些現成的套件,快速建構網頁,其中目前的主流框架為Express和Koa,本文就以Express作為例子來討論。

 

1. 首先開啟Node.js command promp,建立一個空的目錄,進入後接著安裝express。
$ mkdir sample
$ cd sample
$ npm install express

 

2. 於是就會在此專案下自動產生一個node_modules的目錄,這個目錄都是放此專案將來會使用到的套件。

 


圖六 Node.js 主機端套件安裝

 

3. 接著開啟一個空白記事本,輸入以下程式碼,並存成app.js放在sample專案下。

 


圖七 第一個Node.js程式

 

4. 其中require(‘express’)表示載入express模組,然後定義app為其一物件,並使用app.get 定義收到http get的動作,最後在打開port 8000等待,並在command line執行:
$ node app.js

 


圖八 啟動Node.js程式

 

5. 最後打開瀏覽器,輸入 localhost:8000 此網址,就完成了第一個簡單網頁。

 


圖九 第一個Node.js網頁

 

Express-Generator 快速建置網頁

以上是一個簡單的例子,說明即使我們不瞭解http的通訊協定,我們仍然可以透過express建置一個Web伺服器。事實上還有更便利的方法可以幫助我們快速建構網頁,以下用express-generator的套件來說明。

 

1. 首先先用npm來安裝,其中 -g 表示此為全域安裝,不會安裝在local端。
$ npm install -g express-generator

 

2. 安裝好express-generator後,即可快速建置網頁,本文以建置一個sample2為例,其中install .(包含一個句點,別忘了)是在目錄檔安裝所有相依的套件(定義在package.json檔裡)。
$ express sample2
$ cd sample2
$ npm install .

 


圖十 安裝express-generator

 

3. 目前此範例,我們完全沒有寫入任何一行程式碼,但整個網頁應程式已經完成了。如圖所示,在sample2專案下已經有完整的程式碼了。

 


圖十一 已建立的專案

 

4. 接著在command line輸入
$ npm start

 


圖十二 已建立的專案

 

就可以順利運行網頁 localhost:3000 (預設port 3000)

 


圖十三 自動化產生Express

 

建置與資料庫連結的應用

用express-generator的工具可以快速建置一個express的框架,然而這只是基礎框架,為了設計出一個能處理大量資料的應用程式,就必須搭配資料庫的應用,一般Node.js主流為MongoDB,因為MongoDB是使用JavaScript為腳本所開發的儲存資料JSON,這意謂著MongoDB與Node.js之間不需要額外的資料轉換即可達成資料交換。以剛剛實作的sample2為例,其檔案目錄下的package.json即是JSON的格式,如圖所示。

 


圖十四 JSON檔標示套件資訊

 

此package.json以樹狀的方式提供本應用程式的相關資訊,這種儲存方式被非關聯式資料庫NoSQL所應用,適合大量的資料存取,在效能上有顯著的提升。
在NPM的套件上,為了能便利存取MongoDB,一般推薦mongoose套件,可以利用npm install mongoose安裝此套件,並在程式裡宣告使用var mongoose = require (‘mongoose’),以下為一個簡單操作MongoDB的範例,可把範例程式儲存成app.js,然後用node app.js來執行,一般如果有錯誤發生,表示可能需要用npm來安裝所需的套件。

 

//載入Mongoose套件
var mongoose = require('mongoose');

//連接資料庫,資料表的名稱為Student
mongoose.connect('mongodb://localhost/student');

// 定義Student資料表的模式
var Student = mongoose.model('Student', {
    name: String,
    score: Number
});

// 建立新的資料
var insert = new Student({ name: 'Apple', score: 60 });

// 定義存入到MongoDB規則
insert.save(function (err) {
    // 存入失敗
    if (err) {
       
        console.log('Failed');
        return;
    }
    // 存入成功
    console.log('Saved');
});

// 指向新的物件
var insert = new Student();
insert.name = 'banana';
insert.score = 80;
insert.save();

//定義查詢資料
Student.find(function(err, students) {

    for (var index in students) {
        var stu = student[index];
        console.log(stu.name);
    }
});

Student.find({ name: 'apple' }, function(err, students) {

    for (var index in students) {
        var stu = student[index];
        console.log(stu.name);
    }
});

// 尋找分數大於60
Studnet.find({ score: { $gte: 60 } }, function(err, students) {
       for (var index in students) {
        var stu = student[index];
        console.log(stu.name);
    }

});

// 尋找學生的姓名資料
Student.find({ name: 'apple' }, function(err, students) {
       for (var index in students) {
        var stu = student[index];
        console.log(stu.score);
    }
});

Student.remove({ name: 'banana' }, function(err) {
    if (err)
        console.log('Delete Failed ');
    else
        console.log('Deleted');
});

 

如程式碼所示,利用mongoose.model的定義,就可以容易的操作save和find的方法,在資料庫裡存取資料,然後用remove 就可以移除資料庫的與法,與一般SQL語法不同的是,在Node.js底下,只要搭配Mongoose套件,即可以使用JavaScript對資料庫操作。由於MongoDB的安裝隨系統的不同有些許的不同,甚至會遇到蠻多問題,都必須花上篇幅才能解釋,因此請自行上網搜尋如何安裝MongoDB,在配合本範例進行資料庫的操作。

結論

礙於篇幅限制,本文僅能簡單的介紹Node.js的基本原理與套件管理NPM的安裝,從一個簡單的例子為出發點,可以看出其精神在於藉由豐富的模組資源,如同節點般組合成一個大型網站,也同時減少開發時程。本文僅用express來介紹如何快速建構網頁平台,事實上在NPM官網[2]中可以找到數十萬套的模組,如何有效的利用模組,打造強大的後端伺服器,才是Node.js的開發精神,在開放原始碼的精神下,期許能用Node.js和JavaScript完成所有的事。

參考資料

[1] Node.js 官網
https://nodejs.org/
[2] NPM 官網
https://www.npmjs.com/
[3] Node.js source code
https://github.com/joyent/node
[4] JSON 格式
https://en.wikipedia.org/wiki/JSON
[5]不一樣的Node.js:用JavaScript打造高效能的前後台網頁程式, 錢逢祥, 蔡政崇, 林政毅, ISBN:9789572242827
[6] Node.js模組參考手冊, 錢逢祥, 蔡政崇, 楊傑文, ISBN:9789572243893
[7] 用 Node.js 學 JavaScript 語言(1)簡介與安裝, 陳鍾誠
http://www.codedata.com.tw/javascript/using-nodejs-to-learn-javascript