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結構之後,再去解決它。