根據官方的介紹,Express 是一個基於 Node.js 平臺的極簡、靈活的 web 應用開發框架,可以輕鬆的創建各種 web 或者移動端應用
今天就來簡單的了解一下 Express 框架
安裝
首先安裝 Express ,新建一個工作文件夾,並命名為 myapp ,在此文件夾下進行環境的初始化:
npm init
官方推薦的入口文件名為 app.js
entry point: (index.js) app.js
當然也可以使用 npm 默認的 index.js 的文件名
接下來安裝 Express
npm install express --save
環境準備完成,現在嘗試創建一個 Express 應用
進入 myapp 目錄,新建一個 app.js 的文件,複製如下代碼:
const express=require('express');
const app=express();
app.get('/',(req,res)=>{
res.send('這是一個 Express 應用')
});
var server=app.listen(3000,()=>{
console.log('服務已啟動 http://localhost:3000')
})
上面的代碼啟動一個服務並監聽從 3000 埠進入的所有連接請求。他將對所有 (/) URL 或 路由 返回 「這是一個 Express 應用」 字符串。對於其他所有路徑全部返回 404
啟動這個應用
node app.js
Express 應用生成器
Express 應用生成器可以快速創建一個應用的骨架
安裝:
npm install express-generator -gd
安裝完畢,創建一個名為myapp的應用:
express myapp
這條命令會在當前目錄下創建 myapp 文件夾,並生成應用骨架
安裝依賴包
cd myapp
npm install
依賴安裝完成就可以啟動此app了
Windows 平臺在 cmd 內輸入:
set DEBUG=myapp & npm start
Mac 或者 Linux 平臺輸入:
DEBUG=myapp npm start
然後在瀏覽器中打開 http://localhost:3000/ 網址就可以看到這個應用了
當應用首次啟動以後,下次啟動只需要輸入 npm start 就行了
打開 package.json 文件,應用程式的啟動實際上是依賴於這句代碼:
"scripts": {
"start": "node ./bin/www"
}
路由
Express 的主要內容有兩個:
先來說路由
路由(Routing)是由一個 URI(或者叫路徑)和一個特定的 HTTP 方法(GET、POST 等)組成的,涉及到應用如何響應客戶端對某個網站節點的訪問。
每一個路由都可以有一個或者多個處理器函數,當匹配到路由時,這個或者這些函數將被執行。
先寫一個簡單的路由
在 routes 目錄下新建一個 orders.js 的文件:
var express=require('express');
var router=express.Router();
router.get('/',function(req,res,nest){
res.render('orders',{msg:'訂單首頁'})
})
router.get('/list',function(req,res,next){
res.send('訂單列表')
})
//導出
module.exports=router;
頁面文件寫好以後需要在在app.js中進行掛載,
var orders=require('./routes/orders');
···
app.use('/orders',orders)
這兩句最好和其他的路由組件寫在一起
在地址欄輸入對應的 url 即可打開響應的頁面
路由方法實例:
// 對網站首頁的訪問返回 "Hello World!" 字樣
app.get('/', function (req, res) {
res.send('Hello World!');
});
// 網站首頁接受 POST 請求
app.post('/', function (req, res) {
res.send('Got a POST request');
});
// /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');
});
中間件
中間件(Middleware) 是一個函數,它可以訪問請求對象(request object (req)), 響應對象(response object (res)), 和 web 應用中處於請求-響應循環流程中的中間件,一般被命名為 next 的變量。
中間件的分類:
應用級中間件
路由級中間件
錯誤處理中間件
內置中間件
第三方中間件
應用級中間件應用級中間件綁定到 app 對象 使用 app.use() 和 app.METHOD(), 其中, METHOD 是需要處理的 HTTP 請求的方法,例如 get , put , post 等
var app = express();
// 沒有掛載路徑的中間件,應用的每個請求都會執行該中間件
app.use(function (req, res, next) {
console.log('Time:', Date.now());
next();
});
// 掛載至 /user/:id 的中間件,任何指向 /user/:id 的請求都會執行它
app.use('/user/:id', function (req, res, next) {
console.log('Request Type:', req.method);
next();
});
// 路由和句柄函數(中間件系統),處理指向 /user/:id 的 GET 請求
app.get('/user/:id', function (req, res, next) {
res.send('USER');
});
在執行完一個中間件之後,next() 會使程序繼續執行下一個中間件,如果沒有 next(),程序則不會往下執行。
在向頁面發送內容時,程序也不會往下執行
我們也可以裝在一組中間件
app.use('/user/:id',function(req,res,next){
console.log('Request URL:', req.originalUrl);
next();
},function(req,res,next){
console.log('Request Type:', req.method);
next();
})
路由級中間件路由級中間件和應用級中間件一樣,只是它綁定的對象為 express.Router()。
在上一節中,我們自己寫的 orders.js ,其內容就是一個路由級中間件
路由級使用 router.use() 或 router.VERB() 加載。
上述在應用級創建的中間件系統,可通過如下代碼改寫為路由級:
var app = express();
var router = express.Router();
// 沒有掛載路徑的中間件,通過該路由的每個請求都會執行該中間件
router.use(function (req, res, next) {
console.log('Time:', Date.now());
next();
});
// 一個中間件棧,顯示任何指向 /user/:id 的 HTTP 請求的信息
router.use('/user/:id', function(req, res, next) {
console.log('Request URL:', req.originalUrl);
next();
}, function (req, res, next) {
console.log('Request Type:', req.method);
next();
});
// 一個中間件棧,處理指向 /user/:id 的 GET 請求
router.get('/user/:id', function (req, res, next) {
// 如果 user id 為 0, 跳到下一個路由
if (req.params.id == 0) next('route');
// 負責將控制權交給棧中下一個中間件
else next(); //
}, function (req, res, next) {
// 渲染常規頁面
res.render('regular');
});
// 處理 /user/:id, 渲染一個特殊頁面
router.get('/user/:id', function (req, res, next) {
console.log(req.params.id);
res.render('special');
});
// 將路由掛載至應用
app.use('/', router);
錯誤處理中間件錯誤處理中間件和其他中間件定義類似,只是要使用 4 個參數,而不是 3 個,其籤名如下: (err, req, res, next)。
app.use(function(err, req, res, next) {
console.error(err.stack);
res.status(500).send('Something broke!');
});
在其他 app.use() 和路由調用後,最後定義錯誤處理中間件,比如:
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
app.use(bodyParser());
app.use(methodOverride());
app.use(function(err, req, res, next) {
// 業務邏輯
});
在我們創建的這個app中,app.js 內的錯誤處理中間件是這樣寫的:
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
錯誤中間件執行時,會調用 views 目錄下的 error.jade 文件,在頁面中列印詳細的錯誤信息
內置中間件express.static(root,[options])
express.static 是 Express 唯一內置的中間件。它基於 serve-static,負責在 Express 應用中提託管靜態資源。
在 app.js 文件內也可以找到這個內置中間件
app.use(express.static(path.join(__dirname, 'public')));
詳細信息參閱官方文檔:www.expressjs.com.cn/guide/using-middleware.html
第三方中間件通過使用第三方中間件從而為 Express 應用增加更多功能。
安裝所需功能的 node 模塊,並在應用中加載,可以在應用級加載,也可以在路由級加載。
實際上,我們創建的這個應用已經引入了兩個第三方的中間件,在 package.json 中就可以找到
"dependencies": {
"body-parser": "~1.18.2",
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"express": "~4.15.5",
"jade": "~1.11.0",
"morgan": "~1.9.0",
"serve-favicon": "~2.4.5"
}
其中 body-parser 和 cookie-parser 就是兩個第三方中間件
模板引擎
Express 默認的模板引擎是 jade 。現在 jade 已經更名為 pug ,沒錯,似李,巴扎嘿!
pug 的語法請參閱 pug 文檔:
https://pug.bootcss.com/api/g…
我們在 views 目錄下創建一個 orders.jade 的文件
doctype html
html
head
title 訂單
body
h1 #{msg}
p before the time begian
然後使用路由渲染它:
router.get('/',function(req,res,nest){
res.render('orders',{msg:'訂單首頁'})
})
在向主頁請求時,orders.jade 會被渲染為 HTML 文檔
進程管理器
在編寫程序時,我們發現,每次更改文件之後,都需要在命令行內停止當前的服務,然後輸入 npm start ,很麻煩。我們需要一款自動刷新的工具
這裡介紹一下 pm2
安裝:
npm install pm2 -gd
安裝完畢,運行我們的程序吧:
還記得我們之前說的 npm start 的啟動路徑沒
> pm2 start ./bin/www --watch
[PM2] Applying action restartProcessId on app [www](ids: 0)
[PM2] [www](0) ✓
[PM2] Process successfully started
Use `pm2 show <id|name>` to get more details about an app
當顯示 status 為 online 時,說明程序啟動成功
現在可以打開 http://localhost:3000 就可以看到運行的程序了
從命令行中我們可以看出我們的 app 名稱, id ,狀態,內存和 cpu 佔用,監視狀態等信息
啟動完成之後我們就可以根據我們程序的id進行控制了
下次啟動可以輸入
pm2 start 0 --watch
別忘了 –watch ,沒有它,程序是無法自動刷新的
停止應用:
pm2 stop 0
重啟
pm2 restart 0
顯示程序信息
pm2 show 0
刪除程序
pm2 delete 0
查看程序列表
pm2 list
好了,這次關於 Express 的介紹就到這裡了,謝謝大家官方文檔地址:http://www.expressjs.com.cn
作者:PureView
原文:https://segmentfault.com/a/1190000011653111