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


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

環境工具為先

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

node --version

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

image

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

會出現如下信息:

image

驗證是否安裝成功:

express –version

image

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

Express版的Hello World

我們通過Express命令創建項目S055:

Express –t ejs S055

image

這里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.

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

啟動Node.js:

node app

啟動成功后,我們再瀏覽器中輸入http://localhost:3000/,意外發生了:

image

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

使用ejs

使用WebMatrix打開網站image,選擇剛才創建的目錄(也可以直接使用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,刷新下瀏覽器:

image

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

image

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

 

總結

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM