使用node.js的開發框架express創建一個web應用

知識 12-21

1.1.1：搭建環境

1.安裝Express

按鍵：Windows+R=>輸入cmd，打開命令行，輸入

　　　　npm install -g express@3

我們需要用全局模式安裝Express,因為只有這樣，我們才能在命令行中使用它

注意：這裡我只選用Express 3.x版本，要是你對Express3x版本熟悉了的話，你只需看一下Migrating from 3.x to 4.x 的文檔即可過渡到Express 4.x

2.新建一個工程

繼續打開命令行，輸入

express -e murenziwei

注意：Express 3.x中使用ejs時不再是-t ejs,而是-e,可以輸入express -h查看

繼續輸入：（路徑切換到文件夾murenziwei）

cd murenziwei

繼續輸入：（安裝所需模塊）

npm install

如圖所示

使用node.js的開發框架express創建一個web應用

安裝成功後輸入：

node app

使用node.js的開發框架express創建一個web應用

在瀏覽器上訪問ocalhost:3000，如圖以下：

使用node.js的開發框架express創建一個web應用

3.項目結構

我們回頭看看生成的項目目錄裡面都有什麼，打開我們的murenziwei文件夾，如圖

使用node.js的開發框架express創建一個web應用

node_modules：存放package.json中安裝的模塊，當你在package.json中添加依賴的模塊並安裝後，該模塊會存放在這個文件夾
public：存放圖片/樣式/腳本等文件
routes：存放路由文件
views：存放視圖文件，或者說是模板文件
app.js：啟動文件，或者說入口文件
package.json：存儲項目的信息及模塊依賴，當在dependencies中添加依賴的模塊時，運行npm install，npm會檢查當前目錄下的package.json，並自動安裝所有指定的模塊
package-lock.json：記錄整個node_modules文件夾的樹狀結構，加快安裝模塊的速度

讓我們來看一看，打開app.js，究竟是什麼代碼組成？

Module dependencies.

var express = require("express");

var routes = require("./routes");

var user = require("./routes/user");

var http = require("http");

var path = require("path");

var app = express();

// all environments

app.set("port", process.env.PORT || 3000);

app.set("views", path.join(__dirname, "views"));

app.set("view engine", "ejs");

app.use(express.favicon());

app.use(express.logger("dev"));

app.use(express.json());

app.use(express.urlencoded());

app.use(express.methodOverride());

app.use(app.router);

app.use(express.static(path.join(__dirname, "public")));

// development only

if ("development" == app.get("env")) {

app.use(express.errorHandler());

}

app.get("/", routes.index);

app.get("/users", user.list);

http.createServer(app).listen(app.get("port"), function(){

console.log("Express server listening on port " + app.get("port"));

});

這裡我們通過require()載入了express，http，path模塊，還有routes文件夾下的index.js和user.js

app.set("port", process.env.PORT || 3000):設置埠為process.env.PORT或者3000；

app.set("port", process.env.PORT || 3000)：設置埠為process.env.PORT或者3000；
app.set("views", path.join(__dirname, "views"))：設置views文件夾為存放視圖文件的目錄，即存放模板文件的地方，__dirname為全局變數，存儲當前正在執行的js所在的目錄；
app.set("view engine","ejs")：設置視圖模塊引擎為ejs
app.use(express.favicon())：connect內建的中間件，使用默認的favicon圖標，如果想使用自己的圖標，需改為app.use(express.favicon(__dirname+"/public/images/favicon.ico"))，這裡我們把自定義的favicon.icon放到/public/images文件夾下
app.use(express.logger("dev"))：connect內建的中間件，在開發環境下使用，在終端顯示簡單的日誌，例如在啟動app.js後訪問localhost:3000，終端會輸出：

使用node.js的開發框架express創建一個web應用

如果沒有這一行代碼，不管你怎麼刷新頁面，終端都只有一行Express sever listening on port 3000

使用node.js的開發框架express創建一個web應用

6.app.use(express.json());

app.use(urlencoded());

用來解析請求體，支持application/json，application/x-www-form-urlencoded

7.app.use(express.methodOverride())：connect內建的中間件，可以協助處理POST請求，偽裝成 PUT，DELETE和其它HTTP方法

8.app.use(app.router)：調用路由解析的規則

9.app.use(express.static(path.join(__dirname, "public")))：connect內創建的中間件，將根目錄下的public文件夾設置為存放images，css，js等靜態文件的目錄

if ("development" == app.get("env")) {
app.use(express.errorHandler());
}

此段代碼可理解為：配置開發環境下的錯誤處理，輸出錯誤信息

10.app.get("/", routes.index)：路由控制器，如果用戶訪問/（主頁），則由routes.index來處理，routes/index.js的內容如下：

exports.index = function(req, res){
res.render("index", { title: "Express" });
};

通過exports.index導出index函數介面，app.get("/",routes.index)相當於：

app.get("/",function(res,rep){
res.render("index",{title:"Express"});
})

解釋一下上行的res.render("index",{title:"Express"})：使用ejs模板引擎解析views/index.ejs（因為我們之前通過app.set("views",__dirname+"/views")設置了模板文件默認存儲在views文件夾下），並傳入一個對象，這個對象只有一個title屬新，它的值為字元串Express，即用字元串Express替換views/index.ejs中所有的title變數，這就是我們所說的渲染視圖，或者說渲染模板。

11.

http.createServer(app).listen(app.get("port"), function(){
console.log("Express server listening on port " + app.get("port"));
});

這段代碼可以這樣理解：創建http伺服器並監聽3000埠，創建成功後，終端顯示如下

使用node.js的開發框架express創建一個web應用