node.js/express.js新手快速入門及搭建MVC項目

node.js作爲服務器端強大的後臺語言,怎樣牛逼我就不多說了,其他博客上面有。本文作爲一篇入門級學習總結,供沒有node.js基礎的同學們學習,不足之處歡迎指正。另外在學node.js之前我幾乎是完全不懂啥叫MVC,搭建了一個項目之後豁然開朗。在此寫一篇博客以幫助後來的人快速學習。

首先是需要vs2013,編譯環境任選,不過照目前來看vs2013作爲ide最方便。然後需要下載的東西,由於比較零散不好找,我就放在百度雲了,當然你也可以根據文件名去找找最新版。點此下載

其中x86和x64只下載一個就行了。安裝步驟:

1、下載node-xxx.msi,安裝。步驟簡單,不多說。

2、執行cmd命令:node --version,顯示版本號就表示安裝成功。

3、下載Git_for_Windows_1.9.5.zip,安裝。這個是github的windows客戶端,git高手可以忽略。

4、執行以下5條命令:

git clone --recursive git://github.com/isaacs/npm.git
cd npm
node cli.js install npm -gf
npm install underscore
npm install express

上面代碼意思是,安裝npm(這個相當於ruby的gem,可以方便下載共享的擴展包,然後通過gem安裝underscore和express)如果有哪條執行失敗,我也不造如何解決,自行bing吧委屈

5、安裝NTVS 1.0 VS 2013.msi,不用vs2013的到此爲止吧。後面的基於vs2013

6、新建項目


然後彈出一個全英文的對話框,點是就行了。

在此項目建完了,可以直接點運行。然後我們來一步一步分析源代碼。

1、網頁佈局

找到views目錄下的layout.jade,打開。上面的代碼對於有HTML基礎的人來說一看就懂。只不過不是XHTML,而是類似於python的縮進。

第一行doctype html,這個就是網頁的第一行,解析器會在左邊加上<!,右邊加上>,就完了。在此我們將它改成HTML4的:

DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
從第二行開始,關鍵來了,同志們注意!!第二行默認html,解析器會將其解析爲<html></html>。假如需要添加屬性,比如<html xmlns="http://www.w3.org/1999/xhtml"></html>這樣,咋搞?簡單,第二行改爲:

html(xmlns="http://www.w3.org/1999/xhtml")
解析器會將括號中的內容解析爲XHTML屬性,假如有多個可以 html(xx="xx" yy="yy") 這樣,就ok了。

第三行不多說。第四行,title= 這句話的意思是後面引用了一個變量,名爲title,解析器將會解析爲<title>變量的值</title>。變量名隨意。這行還有一種寫法:

title #{title}
含義同上。建議新同學們統一寫成  #{變量名} 這樣的形式,這樣更清晰直觀。
第五、六行不解釋。第七行:block content。這句話的意思是新建一個代碼擴展塊,通過其他jade文件中包含layout.jade,即可定義將什麼內容放在代碼擴展塊中。

然後,基礎的佈局介紹的差不多了,我們接來下看看index.jade:

第一行的意思是從layout.jade中擴展布局,簡單粗暴的理解是:自動複製layout.jade中的佈局。

第三行,定義塊中的內容。

重點說的差不多了,說說這個縮進。我不太喜歡兩個空格縮進,我於是試了下改成tab縮進也可以正常解析。


2、如何處理請求

處理頁面:

index.jade並不是創建好文件就可以使用了,還需要在node.js中引用。找到routes目錄下的index.js。

第六行:exports代表一個node.js對象,聲明的函數可以直接供外部模塊調用。這裏定義了一個index函數。兩個參數req與res,其實就是所謂的request與response。

第七行:意思就是路由一個頁面index.jade,然後傳入參數title,值爲Express。發現什麼了嘛?對了,就是上面的title #{title}。將這個東替換爲傳入的值。

直接輸出:

找到routes目錄下的user.js,這兒沒有調用網頁了,而是直接輸出。

第七行:這兒就是服務器直接向前臺輸出一串字符串。如果不嫌麻煩可以試試輸出<html><body><p>啥的啥的


3、處理關聯

打開解決方案管理器中項目根目錄下的app.js,找到第七、八行 var routes = require('./routes');   var user = require('./routes/user'); 這兩行的意思就是引用剛纔的兩個js文件,其中引用的如果是index.js那麼可以簡寫。

引用了之後,如何調用呢?找到第32、33行,兩個app.get。分別傳入了兩個參數,前一個表示url請求的路徑,後一個表示如何處理,就是上面的兩個js文件啦。


以上的express.js搭建服務器基礎介紹完畢。估計有朋友還不清楚node.js、express.js、io.js等等的區別,我簡要說說:

node.js就是一個服務器端用javascript寫後臺語言的一個庫,大多功能都基於此的。

express.js爲node.js中的一個包,可以簡化node.js項目開發。以上代碼都是express.js,如果用純node.js不知道要麻煩到哪去。不過聽說express.js作者棄用node.js轉而使用go語言了,不知道爲啥。但作爲node.js中使用最廣泛的庫,這個還是可以玩玩的。

io.js是一個從node.js中分離出來的。由於node.js由企業管制,導致項目進度緩慢,5個核心開發者中有4個轉而參與io.js項目開發。io.js與node.js同根,express.js等庫可以完全兼容使用,唯一的區別爲io.js關注最新技術,使用最新javascript引擎,可以支持什麼什麼最新版本的javascript語法,速度上貌似也有一定優勢,但可能不太穩定。node.js成熟穩定,就是項目推進的有點慢。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章