1. 程式人生 > >Node.js Web開發(一)從零開始

Node.js Web開發(一)從零開始

Node.js不必介紹,已經太火爆了。簡單說是用Javascript開發Web服務端,基於Google V8引擎,單執行緒。不多說從零開始Windows平臺下的Node.js的開發之旅。

環境工具為先

首先到Node.js的官方網站上 下載 安裝包,一步步安裝,現在最新版本為V0.8.12。安裝完成後,驗證下安裝是否成功:開啟命令列視窗輸入:

node --version

獲得如下提示,表示安裝成功。

Windows下我使用微軟的WebMatrix作為開發工具,WebMatrix提供了Node.js開發時的幾種模板,使用跟Visual Studio很接近,非常方便。另外提供了一些擴充套件的工具,比如Git的擴充套件工具等等。剛使用時,我還是使用node的命令進行一些操作,不直接使用WebMatrix,WebMatrix只作為編寫工具,這樣更容易理解。

安裝Express

我們通過使用Node.js裡面的‘http’模組進行http請求、響應的操作,來實現自己的Web框架,這裡就不自己造輪子了(自己也沒那個水平),使用Node.js比較流行的Web框架“Express”。Node.js提供了很好的包的管理器“npm”,方便的進行包的安裝、解除安裝、更新。

安裝Express:

npm install –g express

會出現如下資訊:

驗證是否安裝成功:

express –version

這裡簡單說下npm,上面的-g代表是全域性的,預設npm是進行本地安裝。本地安裝時,npm會將包安裝到當前目錄的node_modules目錄中,一般情況不可以直接在命令列中使用;全域性安裝時會將包安裝到系統目錄中,這樣我們就可以在命令列中到處使用。

Express版的Hello World

我們通過Express命令建立專案S055:

Express –t ejs S055

這裡Express提示我們要進入S005裡面進行安裝專案的依賴項,我們開啟package.json:

{
  "name": "application-name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app"
  },
  "dependencies": {
    "express": "3.0.0rc5",
    "jade": "*"
  }
}

奇怪的是,我發現依賴項裡面有“jade”,而我希望使用的ejs來建立的,不知道為什麼還是使用了jade(知道的朋友指點下我 

 ).

jade是一種View引擎,我更喜歡使用ejs,方便,簡單,這裡修改成ejs.

執行npm install.

會提示我們:,ejs跟express安裝完成。

啟動Node.js:

node app

提示找不到jade模組,不管他了,把它修改成使用ejs.

使用ejs

使用WebMatrix開啟網站,選擇剛才建立的目錄(也可以直接使用WebMatrix建立Express站點),WebMatrix會自動幫我們檢測到是Node.js站點。

1)開啟app.js,修改下檢視引擎:

app.configure(function(){
  app.set('port', process.env.PORT || 3000);
  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.favicon());
  app.use(express.logger('dev'));
  app.use(express.bodyParser());
  app.use(express.methodOverride());
  app.use(app.router);
  app.use(express.static(path.join(__dirname, 'public')));
});

將‘View engine’修改成‘ejs’。

2)刪除layout.jade、index.jade,建立layout.ejs、index.ejs.

layout.ejs:

<!DOCTYPE html>
<html>
    <head>
        <title><%=title%></title>
        <link rel="stylesheet" href="/stylesheets/style.css">
    </head>
    <body>
        <%-body%>
</body>
</html>

index.ejs:

<h1><%=title%></h1>
<p>Welcome to <%=title%></p>

這裡只是把剛才的jade翻譯成了ejs引擎的表現方式,其實大家可以猜下layout.ejs的作用,應該是想作為站點的模板。重新啟動下Node.js,重新整理下瀏覽器:

好像成功了,但是我們檢視源,發現不對,沒使用模板:

這裡就不繼續下去了,留到下一節的瞭解Express結構後,去解決它。

總結

本小節,初步使用了Node.js的Express框架成功建立了站點,但是檢視模板還沒使用成功,我們在下一節裡面初步瞭解了Express結構之後,再去解決它。