express入門

1、 Express 簡單介紹

Express 是一個基於 Node.js 平臺，快速、開放、極簡的 web 開發框架Express 框架是後臺的 Node 框架，因此和 jQuery、zepto、yui、bootstrap 都不xpress 在後臺的受歡迎的程度相似前端的 jQuery，就是企業的事實上的標準。

Express 特色:

1. Express 是一個基於 Node.js 平臺的極簡、靈活的 web 應用開發框架，它提供一系列強大的特性，幫助你建立各類 Web 和移動設備應用
2. 豐富的 HTTP 快捷方法和任意排列組合的 Connect 中間件，讓你建立健壯、友好的 API 變得既快速又簡單
3. Express 不對 Node.js 已應用所需的基本功能。

Express 官網：

• 英語官網:
• 中文官網:

2、 Express 安裝使用

安裝：
安裝 Express 框架，就是使用 npm 的命令。

npm install express --save

save 參數，表示自動修改 package.json 文件，自動添加依賴項。

簡單使用：

npm install express –save
// 1.引入var express = require('express');
var app = express();

// 2.配置路由
app.get('/', function (req, res) {
    res.send('Hello World!');});
    
// 3.監聽端口
    app.listen(3000,'127.0.0.1');

完整 Demo

var express=require('express'); /*引入 express*/
var app=new express(); /*實例化 express 賦值給 app*/
//配置路由 匹配 URl 地址實現不一樣的功能app.get('/',function(req,res){
    res.send('首頁');})
app.get('/search',function(req,res){ 
    res.send('搜索'); //?keyword=華爲手機&enc=utf-8&suggest=1.his.0.0&wq
})

app.get('/login',function(req,res){     
    res.send('登陸');
})
app.get('/register',function(req,res){
    res.send('註冊');
    
})
app.listen(3000,"127.0.0.1");

3、 Express 框架中的路由

路由（Routing）是由一個 URI（或者叫路徑）和一個特定的 HTTP 方法（GET、POST 等）組成的，涉及到應用如何響應客戶端對某個網站節點的訪問

簡單的路由配置
當用 get 請求訪問一個網址的時候，作什麼事情：

app.get("網址",function(req,res){});

當用 post 訪問一個網址的時候，作什麼事情：

app.post("網址",function(req,res){});

// user 節點接受 PUT 請求app.put('/user', function (req, res) { res.send('Got a PUT request at /user');});

// user 節點接受 DELETE 請求app.delete('/user', function (req, res) { res.send('Got a DELETE request at /user');});

動態路由配置：

app.get("/user/:id",function(req,res){var id = req.params["id"];res.send(id);});

路由的正則匹配：（瞭解）

app.get('/ab*cd', function(req, res) { res.send('ab*cd');});

路由裏面獲取 Get 傳值

app.get('/news, function(req, res) { console.log(req.query);});

4、 Express 框架中 ejs 的安裝使用

Express 中 ejs 的安裝：

npm install ejs --save 或者：npm install ejs --save-dev

Express 中 ejs 的使用：

var express = require("express");
var app = express();
app.set("view engine","ejs");
app.get("/",function(req,res){
    res.render("news",{ "news" : ["我是小新聞啊","我也是啊","哈哈 });});
app.listen(3000);

指定模板位置 ，默認模板位置在 views

app.set('views', __dirname + '/views');

** Ejs 引入模板**

<%- include header.ejs %>

Ejs 綁定數據

<%=h%>

// Ejs 綁定 html 數據
<%-h%>

**
Ejs 模板判斷語句**

<% if(true){ %> 
    <div>true</div>
    <%} else{ %>
        <div>false</div> 
    <%} %>

Ejs 模板中循環數據

<%for(var i=0;i<list.length;i++) { %>
     <li><%=list[i] %></li> 
 <%}%>

Ejs 後綴修改成 Html

這是一個小技巧，看着.ejs 的後綴總以爲不爽，使用以下方法，能夠將模板文件的後綴換成咱們習慣的.html。
1.在 app.js 的頭上定義 ejs:,代碼以下:
    var ejs = require('ejs');
    
2.註冊 html 模板引擎代碼以下：
    app.engine('html',ejs.__express);
    
3.將模板引擎換成 html 代碼以下:
    app.set('view engine', 'html');
    
4.修改模板文件的後綴爲.html。

5、 利用 Express. static 託管靜態文件

1. 若是你的靜態資源存放在多個目錄下面，你能夠屢次調用 express.static 中間件：

app.use(express.static('public'));

如今，public 目錄下面的文件就能夠訪問了。

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

1. 若是你但願全部經過 express.static 訪問的文件都存放在一個「虛擬（virtual）」目錄（即目錄根本不存在）下面，能夠經過爲靜態資源目錄指定一個掛載路徑的方式來實現，以下所示：

app.use('/static', express.static('public'));

如今，你就愛能夠經過帶有 「/static」 前綴的地址來訪問 public 目錄下面的文件了。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

6、 Express 中間件

Express 是一個自身功能極簡，徹底是由路由和中間件構成一個的 web 開發框架：從本質上來講，一個 Express 應用就是在調用各類中間件。

中間件（Middleware） 是一個函數，它能夠訪問請求對象（request object (req)）, 響應對象（response object (res)）, 和 web 應用中處理請求-響應循環流程中的中間件，通常被命名爲 next 的變量。

中間件的功能包括：

• 執行任何代碼。
• 修改請求和響應對象。
• 終結請求-響應循環。
• 調用堆棧中的下一個中間件。

若是個人 get、post 回調函數中，沒有 next 參數，那麼就匹配上第一個路由，就不會往下匹配了。若是想往下匹配的話，那麼須要寫 next()

Express 應用可以使用以下幾種中間件：

• 應用級中間件
• 路由級中間件
• 錯誤處理中間件
• 內置中間件
• 第三方中間件

1. 應用級中間件

app.use(function(req,res,next){ /*匹配任何路由*/                     //res.send('中間件'); 
    console.log(new Date()) 
    next(); /*表示匹配完成這個中間件之後程序繼續向
    
})

app.get('/',function(req,res){                                       res.send('根');
})

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

2. 路由中間件

app.get("/",function(req,res,next){ 
    console.log("1"); 
    next();});
app.get("/",function(req,res){ 
    console.log("2");
    
});

3. 錯誤處理中間件

app.get('/index',function(req,res){
    res.send('首頁');})
    
// 中間件相應 404
app.use(function(req,res){ 
    //res.render('404',{}); 
    res.status(404).render('404',{});
})

4. 內置中間件

//靜態服務 index.html
app.use('/static',express.static("./static")); /*匹配全部的路徑*/
app.use('/news',express.static("./static")); /*匹配全部的路徑*/

5. 第三方中間件

body-parser 中間件 第三方的 獲取 post 提交的數據
1.cnpm install body-parser --save

2.var bodyParser = require('body-parser')

3.設置中間件//處理 form 表單的中間件
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false })); form 表單提交的數據
// parse application/json
app.use(bodyParser.json()); 提交的 json 數據的數據

4.req.body 獲取數據

7、獲取 Get Post 請求的參數

• GET 請求的參數在 URL 中，在原生 Node 中，須要使用 url 模塊來識別參數字符串。在Express 中，不須要使用 url 模塊了。能夠直接使用 req.query 對象。
• POST 請求在 express 中不能直接得到，可使用 body-parser 模塊。使用後，將能夠用
  req.body 獲得參數。可是若是表單中含有文件上傳，那麼仍是須要使用 formidable 模塊。

1.安裝

npm install body-parser --save

2.使用 req.body 獲取 post 過來的參數

var express = require('express')
var bodyParser = require('body-parser')
var app = express()
// parse application/x-www-form-urlencoded 
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json 
app.use(bodyParser.json())

app.use(function (req, res) { 
    res.setHeader('Content-Type', 'text/plain') 
    res.write('you posted:\n')
     res.end(JSON.stringify(req.body, null, 2))
})

body-parser

router.get("/", function (req, res) {

  console.log(req.cookies);
  res.send("你好nodejs");
});

router.get("/news", function (req, res) {

  console.log(req.cookies);
  res.send("你好nodejs  news");
});
router.get("/set", function (req, res) {


  //參數1：名字
  //參數2:cookie的值
  //參數3：cookie的配置信息
  res.cookie('username', 'cookie的值', {
    maxAge: 2000
  });



  res.send("設置cookie成功");
});