雖然說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屬性

20131226-103108

無參數的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正常作用

blog

進入views/layout.jade變更第一行doctype

doctype html //由5改為html

等一下…

為什麼是進layout.jade修正,明明錯誤訊息是寫著index.jade啊;因為index的網頁配置是參照到layout

我們看一下index.jade內容即可看到第一行的訊息,index是繼承了layout的配置

20131226-104507

再次開啟Firefox輸入位址127.0.0.1:3000就可以看到正確的專案起始頁面

20131226-102240

看一下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 };
文章標籤
創作者介紹
創作者 長風破浪會有時 的頭像
長風破浪會有時

行路難 多歧路

長風破浪會有時 發表在 痞客邦 留言(0) 人氣()