Express伺服器開發

• 2019 年 12 月 20 日
• 筆記

作者 | Jeskson

來源 | 達達前端小酒館

Express伺服器開發

創建Express應用程式，Express路由，pug視圖模板的使用

Express簡介：

讓我們來創建Express應用程式，Express是一個Node.js Web應用框架，它很強大，可以為用戶創建各種Web應用和HTTP工具，使用Express框架可以搭建一個完整功能的網站。

Express框架的優點：

可以用中間件來響應HTTP請求，可以定義路由表用於執行不同的HTTP請求，可以向模板傳參數來動態渲染HTML頁面。

命令行安裝Express框架：

cnpm install express --save

Express框架安裝在node_modules目錄中，然後需要一起安裝如下模組：

body-parser是node.js的中間件，可以處理JSON,Raw,Text,URL編碼的數據，cookie-parser是一個解析Cookie的中間件，然後通過req.cookies可以獲取傳過來的Cookie，並轉為對象。

multer是node.js的中間件，用於處理enctype="multipart/form-data"的表單數據。

cnpm install body-parser --save  cnpm install cookie-parse --save  cnpm install multer --save

讓我們來看看express框架的版本號：

cnpm list express

創建第一個Express框架實例

目的為了輸出：「hello」，命名：express_demo.js文件

// 引入node模組  const express = require('express');    // 創建express程式  const app = express();    // 添加HTTP路由  app.get('/', function(request, response){   // 輸出響應消息   response.send('hello express');  });    // 啟動HTTP伺服器  app.listen(8080, function(){   console.log('express app');  });

執行項目：

node express_demo.js

然後就可以用http://127.0.0.1:8080

express框架使用request對象和response對象來處理請求和響應的數據：

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

request對象為HTTP請求

req.app

為callback，回調函數外部文件，利用req.app訪問express的實例

req.baseUrl

獲取當前安裝的URL路徑

req.body/req.cookies

為獲得「請求主體」

req.hostname/req.ip

獲取主機名，ip地址

req.originalUrl

獲取原始請求URL

req.params

獲取路由的參數

req.path

獲取請求路徑

req.protocol

獲取協議類型

req.query

獲取URL的查詢參數

req.route

獲取當前匹配的express路由

req.subdomains

獲取子域名

req.accepts()

檢查可接受請求的文檔類型

req.get()

獲取指定的HTTP請求頭

req.is()

判斷請求頭Content-Type的Mime類型

response對象為HTTP響應

res.app

為callback，回調函數外部文件，利用res.app訪問express的實例

res.append()

追加指定HTTP請求頭

res.set()

在res.append()後重置之前設置的請求頭

res.clearCookie()

清除Cookie

res.download()

傳送指定路徑的文件

res.get()

返回指定的HTTP請求頭

res.json()

傳送json響應

res.jsonp 傳送jsonp響應

res.location() 只設置響應的LocationHTTP請求頭，不設置狀態碼或者close response

res.redirect() 設置響應的LocationHTTP請求頭，並且設置狀態碼302

res.send() 傳送HTTP響應

res.status() 設置HTTP狀態碼

res.type() 設置Content-Type的MIME類型

express路由

express路由，由URI，HTTP請求和若干個句柄組成。

// 引入node模組  const express = require('express');    // 創建express程式  const app = express();    // 添加http路由  app.get('/',function(request,response) {   // 輸出響應消息   response.send('hello dashucoding');  });    app.get('/users', function(req,res) {   // req , res   res.send('user');  });    // 啟動HTTP伺服器  app.listen(8080, function(){   console.lo('express app');  });

GET 請求一個指定資源的表示形式，只用於獲取數據

POST 用於將屍體提交到指定的資源

HEAD 請求一個與GET相同的響應，但沒有響應體

PUT 用於請求有效載荷替換目標資源的所有當前表示

DELETE 刪除指定的資源

CONNECT 建立一個由目標資源標識的伺服器的隧道

OPTIONS 用於描述目標資源的通訊選項

PATCH 用於對資源應用部分修改

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

路由句柄，為請求處理提供多個回調函數，next('route')方法

let d1 = function(req,res,next){   console.log('1');   next();  };    let d2 = function(req,res,next){   console.log('2');   next();  });    let d3 = function(req,res,next){   console.log('3');   next();   });     app.get('/', [d1,d2]);

next用於執行下一個回調函數，next('route')用於執行下一個相同路由。

// 引入node模組  const express = require('express');  // 創建express程式  const app = express();  // 添加http路由  app.get('/', function(request, response){  // 輸出響應消息  response.send('hello');  });  app.get('/users', function(req,res){  res.send('user');  });    // 動態  app.get('/users/id', function(req,res){  let id = req.params.id;  // 返迴響應  res.send('id='+id);  });    // 啟動HTTP伺服器  app.listen(8080,function(){  console.log('expresss app');  });    const express = require('express');  const app = express();  app.get('/', function(request, response){  response.send('hello');  });  app.get('/users',function(req,res){  res.send('users');  });  app.param('id',(req,res,next)=>{   console.log('hello');   if(req.params.id==='1'){   next();   }else{   res.sendStatus(404);   }   });     app.get('/users/:id',(req,res)=>{   res.send('hello');   });     // 啟動伺服器   app.listen(8080,function(){    console.log('express');   });

pug視圖模板

命令行下載：

npm install pug

pug.compile()將pug程式碼編譯成一個JavaScript函數。

app.js    const express = require('express');    const app = express();    // 配置視圖模板  app.set('view engine', 'pug');  app.set('views', './views');    // 添加HTTP路由  app.get('/', function(request, response){  response.render('index.pug');  // 輸出響應消息，載入並解析index.pug文件  });    app.get('/users',function(req,res){  res.render('users.pug',{  title:'user',  users:[  {id:1,name:'張三',age:18}  ]  });  });  // 啟動HTTP伺服器  app.listen(8080,function(){  console.log('express');  });

users.pug:

doctype html  html  head  meta(charset="utf-8")  title #{title}  body  #app   for user in users   div   p id=#{user.id}   p name=#{user.name}   p age=#{user.age}    pug.render()模板函數：    const pug = require('pug');    console.log(pug.renderFile('template.pug',{  name:'dada'  });

執行pug.renderFile()函數，會把編譯出來的函數自動儲存到內部快取中

作者Info：

【作者】：Jeskson 【原創公眾號】：達達前端小酒館。 【轉載說明】：轉載請說明出處，謝謝合作！~

大前端開發，定位前端開發技術棧部落格，PHP後台知識點，web全棧技術領域，數據結構與演算法、網路原理等通俗易懂的呈現給小夥伴。謝謝支援，承蒙厚愛！！！