nodejs學習篇 (1)webstorm建立nodejs + express + jade 的web 項目

    以前簡單瞭解過nodejs，以爲用nodejs來作個網站也太麻煩了，要本身拼html的字符串返回，這能作網站嘛？

最近看到使用jade模板來開發，以爲挺新奇的，因而試了一把，也瞭解了一些特性，算是個新的開始吧。

一、首先下載webstorm，百度一下，有綠色版。

二、下載express模塊和jade模塊，就不詳細說了。而後新建一個項目，選擇nodejs express app

而後點擊建立便可，一個能夠運行的小栗子就誕生了。

 

接下來就看看express和jade是怎麼相愛的吧。

1 var express = require('express');
2 var app = express();
3 // view engine setup
4 app.set('views', path.join(__dirname, 'views'));
5 app.set('view engine', 'jade');

第一行代碼加載express模塊，而後執行，賦值給app變量

第四行代碼設置試圖的物理路徑

第五行代碼設置視圖引擎爲jade

 

而後看看路由相關的設置

var routes = require('./routes/index');
app.use('/', routes);

這兩行代碼設置了默認首頁的路由，即訪問地址：localhost:3000/時怎麼處理請求

 

接下來就看 routes文件夾下的index.js是怎麼處理這個請求的

1 var express = require('express');
2 var router = express.Router();
3 
4 /* GET home page. */
5 router.get('/', function(req, res, next) {
6   res.render('index', { title: 'Express', time:"2015-11-18" });
7 });
8 
9 module.exports = router;

很簡單的幾行代碼，主要是看第五行和第六行代碼，當路由截取到localhost:3000 get請求後，根據index.jade模板來渲染頁面，並傳遞參數：title 和 time 

在視圖中，須要注意兩個模板：index.jade 和 layout.jade

index.jade代碼：

1 extends layout
2 
3 block content
4   h1= title
5   p(id='pid') Welcome to #{title}
6   div(class='contentDiv') #{time}
7     div asdfasdf

layout.jade代碼：

1 doctype html
2 html
3   head
4     title= title
5     link(rel='stylesheet', href='/stylesheets/style.css')
6   body
7     block content

layout就至關因而一個母版頁，定義一些公共部分的信息，例如頭信息，將內容部分空出來，讓子頁面去自定義，就使用block content的語法來定義自定義區域

 

index使用

extends layout

來使用母版頁，使用關鍵字後跟空格再跟普通字符串來顯示內容

例如：h1=title，向頁面寫入一個h1標籤，內容是index.js傳過來的title參數

標籤的嵌套使用縮進來體現：

 

到這一套基本的流程就差很少了。

可是遇到一個小問題，就是router的模塊定義是經過

1 module.exports = router;

來返回的，

那麼module.exports 和 exports又有什麼區別呢？

百度了一下，又本身作了一個實驗，作出了以下結論。

module.exports的定義以下：

1 module.exports = exports = {};

 

一、模塊最終返回給調用者的內容，或者說公開的內容是module.exports

二、當直接給module.exports指定值以後，不管你再怎麼改exports對象，module.exports都不會變。由於exports仍是指向{}，而module.exports已經指向新的對象

三、當在頁面中不給module.exports指定值，而是隻給exports指定屬性，例如：exports.name = "張三",

那麼最後module.exports也會有name這個屬性，即module.exports.name = "張三"

四、若是給module.exports指定屬性，module.exports.name = "張三"，

同時也給exports指定一個屬性，exports.age = 22,

那麼最後module.exports也會有age屬性，即：module.exports.age = 22

 

今天學習就到這啦