Node.js之Express框架

Express.js官網:http://www.expressjs.com.cn/,是基於Node.js平臺,快速開放極簡的Web開發框架。
學習參考網址:http://www.runoob.com/nodejs/nodejs-express-framework.html(更多具體的實例有助於快速學習這個框架)
傳統node.js缺點:

  1. 路由不方便製作,尤其是正則表達式路由

  2. 靜態資源服務不方便

  3. 頁面呈遞不方便,沒有模板引擎(Express通過向模板傳遞參數來動態渲染 HTML 頁面)

環境配置

首先電腦裏還是需要node,npm,直接去官網下載就可以了。自己創建一個文件夾,在根目錄shift+右擊打開命令窗口,依次輸入以下命令行安裝依賴:(-g是全局安裝,--save是本地安裝)

npm install-g cnpm --registry=https://registry.npm.taobao.org

cnpm install express--save

cnpm install body-parser --save

cnpm install cookie-parser --save

cnpm install multer --save

基本使用

引用模塊

var express = require("express");
var app = express();

路由清單,術語-中間件

app.get("/",function(req,res){
res.send("首頁");
});

app.get("/music",function(req,res){
res.send("音樂");
});

app.get("/news",function(req,res){
res.send("新聞");
});

靜態路由

app.use(express.static("public"))    //在根目錄新建一個public文件夾

監聽

app.listen(3000) //監聽3000端口

訪問

瀏覽器地址欄輸入 localhost:3000

Express中輸出使用res.send()而不是res.end(),好處是自動變爲utf-8編碼(輸出中文)。

正則

用Express框架特別容易做一個匹配正則模式的路由:

app.get("/student/:xuehao",function(req,res){
if(/^[\d]{6}$/.test(req.params.xuehao)){
res.send("學生,學號" + req.params.xuehao);
}else{
res.send("學號不正確!");
}
});

使用某一頁面

在nodejs中使用某一頁面需要以下邏輯:

fs.readFile("...",function(){        
...
});

而在Express中訪問某一頁面:

app.get("/",function(req,res){
res.sendFile(__dirname + "/public/haha.html"); //必須使用絕對路徑作爲參數
});

res常用的函數是send和sendFile,sendFile表示發送一個頁面給用戶。

模板引擎

express可以像php一樣使用後臺語言模板,此時最好用的模板引擎叫做ejs模板引擎。*(hexo yilia主題)

API: https://npm.taobao.org/package/ejs

同樣需要安裝包依賴:

cnpm install ejs --save

Express程序舉例

根目錄下js文件:

var express = require("express");
var app = express();
app.set("view engine","ejs");
app.get("/",function(req,res){
res.render("home",{
"product" : "3本書",
"price" : 10 * 3,
"hobby" : [
{"name" : "王俊凱" , "age" : 16},
{"name" : "王寶強" , "age" : 26},
{"name" : "宋小寶" , "age" : 36}
]
});
});
app.listen(3000);

此時當用戶訪問/的時候,會自動使用view文件夾中的home.ejs文件當做模板,數據就是後面傳入的json。(任何js數據類型都可以上傳模板)

view 文件夾下的home.ejs文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ejs</title>
</head>
<body>
買了<%= product %>,花了<%= price %>
<p>我的偶像:</p>
<% for(var i = 0 ; i < hobby.length ; i++) { %>
<p><b><%= hobby[i].name %></b> <%= hobby[i].age %>歲</p>
<% } %>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章