雖然說Node.js本身就是Web框架,也可以自己寫出Web框架
不過沒有必要喝牛奶就要自己從乳牛開始養起,因此選用目前最多人使用的Express
安裝Express
在shell環境下執行以下指令
Npm install –g express
若沒有安裝權限的話請切換成root進行安裝完成再切換回目前使用帳號
安裝完成之後建立專案
Express microblog
因為此處預設使用的(網頁)模版引擎是jade,如果有想要換成ejs的話,可以一開始就加上-t 參數
Express microblog –t ejs
可以看到目前的目錄出現了子目錄microblog
產生專案的最後Express會提示我們進入子目錄並進行安依性套件的安裝
cd microblog npm install
所謂的相依性套件,其實檢查microblog目錄中的package.json檔案的內容中的dependencies屬性
無參數的npm install的功能就是檢查目錄下的package.json,並安裝其相依套件
之後就可以執行專案
Node app.js //或是以下方式 Supervisor app.js //建議使用此方式,因為檔案變更後會自動再次載入
再開啟Firefox輸入位址127.0.0.1:3000就可以看到專案起始頁面
在一開始會看到網頁中jade顯示狀態500錯誤訊息
細看會發現/microblog/views/index.jade中出現了已不支援’doctype 5’的寫法,要改成’doctyp html’才能讓jade正常作用
進入views/layout.jade變更第一行doctype
doctype html //由5改為html
等一下…
為什麼是進layout.jade修正,明明錯誤訊息是寫著index.jade啊;因為index的網頁配置是參照到layout
我們看一下index.jade內容即可看到第一行的訊息,index是繼承了layout的配置
再次開啟Firefox輸入位址127.0.0.1:3000就可以看到正確的專案起始頁面
看一下app.js,將說明寫在程式碼後,比較容易對照
//app.js /** * Module dependencies. */ //所使用的套件 var express = require('express'); var routes = require('./routes'); //本機模組./route/index.js為指定路徑傳回內容 var user = require('./routes/user'); var http = require('http'); var path = require('path'); var app = express(); // all environments //app.set為設定參數工具 app.set('port', process.env.PORT || 3000); //聆聽3000埠 app.set('views', path.join(__dirname, 'views')); //模版放置位置 app.set('view engine', 'jade'); //使用jade模版引擎 app.use(express.favicon()); //以下app.use使用中介軟體完成http功能 app.use(express.logger('dev')); //記錄 app.use(express.json()); //json格式 app.use(express.urlencoded()); //url編碼處理 app.use(express.methodOverride()); //支援訂製的http方法 app.use(app.router); //此專案的路由支援 app.use(express.static(path.join(__dirname, 'public'))); //靜態檔案支援 // development only 在開發環境下所使用的參數 if ('development' == app.get('env')) { //當環境參數(.env)等於development app.use(express.errorHandler()); //錯誤控制器 } app.get('/', routes.index); //路由控制器,若存取’/’路徑,由routes.index控制 app.get('/users', user.list); //啟動HTTP伺服器 http.createServer(app).listen(app.get('port'), function(){ console.log('Express server listening on port ' + app.get('port')); });
路由控制app.get('/', routes.index);是說將'/'路徑指到route/index.js下的exports.index函數
//./routes/index.js
/* * GET home page. */ exports.index = function(req, res){ res.render('index', { title: 'Express' }); //index模版傳回一個title的參數給index.jade };