朝向前端工程師之路 - 我的第一個Nodejs服務器
上有單元我們實作了Hello world程式，本身程式沒什麼太大意義，主要告訴大家，nodejs如何執行，這單元我們開始實作一些有意義的功能。
node js 可以讓你在5分鐘內寫出一個web服務器
什麼？五分鐘內？
不需要懷疑，可以很快速的實現一些基本功能這正是nodejs的魅力之一!
不知道什麼是web服務器？那麼架站赫赫有名的Apache俗稱 阿帕奇 的軟體應該聽過吧! 我們要實作一個類似的服務。
Npm 套件 - 挑選你的輪子
開始之前先來談件事，當你在製作網頁時，如果你需要做元件互動，你可能會優先考慮在你的html頁面上加掛 jquery ，儘管你知道這些東西都可以自己寫原生js，但是你依然會使用它，這是為了加快程式開發的速度，你不需再再去開發所謂的”輪子”功能，而會直接拿現的輪子裝上去。(當然大前提是輪子是優秀且情境適用的狀況下)
Nodejs其中一個迷人的地方的地方，就是他擁有一個開放又成熟的第三方函式庫社群
這裡面有數以萬計的輪子與各種套件提供你使用，你可以很方便的搜尋到你需要的功能，且快速的安裝他。
你可以嘗試在搜尋框內搜尋你要的功能，比方你可以搜尋你常用的jquery這個套件，套件頁面一般都會有簡單的說明，與安裝使用方法。
使用 npm 安裝套件
安裝套件的方式很簡單，nodejs提供簡單的方法讓你安裝你需要的套件。
首先你可以在c槽根目錄下，新建立一個叫做myapp目錄(選c槽根目錄只是為了讓你切換路徑方便，當然你也可以直接在桌面上開新資料夾)，開啟cmd模式，把路徑切換到myapp裡面。
cmd模式下輸入
cd c:/
cd myapp你的cmd提示路徑應該是c:/myapp>這代表目前工作路徑在myapp裡面。
我們試著在這裡安裝你所熟悉的jquery套件，請輸入以下命令
npm install jquery之後你的cmd應該會出現一大串安裝訊息，安裝完成後，你的myapp資料夾裡會出現一個node資料夾，npm的組件安裝都會放在這裡面，點進去看你會看到你安裝的jquery套件。
nodejs 專案都是以資料夾為主，意思就是，今後myapp資料夾就會是node專案的根目錄，往後要備份或是給人家就直接給這一整個資料夾。(直接給資料夾不是最好的做法，這個之後再提)。
使用npm下載的套件
如果在html中使用jquery的方式，你應該會在html文件中加掛
<script src="jquery.js"></script>但是nodejs中可沒有html標籤讓你使用，如果你要在專案中引用jquery，必須使用require方法。
var $ = require('jquery');require 會自動幫你載入套件，對應的正確的npm套件資料夾
上述用jquery舉例只是，讓你了解差異，實際上nodejs中沒有dom可以操作，所以jquery並沒有什麼用途(原諒我這個無聊的例子XD)
實作你的第一個Nodejs服務
到此相信你對nodejs使用上應該有一點心得了，接下來開始進入正題，我們要實作一個web服務器。
首先開啟一個資料夾，(要在哪裡開或者資料夾叫什麼名字，還是真的很懶繼續使用剛剛的myapp都無所謂，只要你確定可以在cmd中正確的路徑下執行就可以)，接著開一隻新的js寫下你的程式。(js檔名要取什麼名字都無所謂，大部分的人會習慣以app. js當作入口)
首先安裝一個叫做express的套件(記得要在該安裝的資料夾中安裝喔)
npm install express開啟一支js檔案，輸入以下程式
var express = require('express');
var app = express();
app.use(express.static('www'));
app.listen(80);好了之後存js檔，別吃驚，只要短短4號程式，這就是 web服務器。
解釋一下code，第一行的var express = require('express'); 很明顯就是取用剛剛安裝的套件，我們把它取出並設為express變數(變數名是不是叫做express一樣不會有人管你，一般慣例說了方便辨認，變數名稱都會取跟套件一樣的名字)
第二行的var app = express();，常很多新手忘記作，取出的express是一個函數(function)，我們必須要執行他才會取回執行結果，這行的意思是請exptess開個服務器給你，我們把它放在app變數裡。
既然作個web服務器，總是要開個資料夾來放你的html文件與css，image資源，第三行的app.use(express.static('www'));意思是，我們要把www資料夾當成網站的根目錄。
第四行的app.listen(80);是開叫server開啟80port去作連線服務，就是所謂的http服務。
執行前記得在你的專案資料夾建立一個www的目錄，並把你的 index. html還有相關素材放進去。
最後一個步驟，執行它!!
node app.js畫面上應該沒有反應，很正常，因為我們沒有console. log任何訊息。
這時候你可以很開心的開啟你的瀏覽器，網站輸入http://127.0.0.1/，如果你有在www資料夾中放入你的index. html，你應該可以看到你的首頁。
恭喜你!你可以寫自己的web服務器了！
沒有留言:
張貼留言