express是一個基於node.js平台的,快速,開放,極簡的web開發框架。
一、安裝 express
npm install express --save
二、簡單使用 express
//引入express const express = require('express'); //創建一個應用 let app = express(); //匹配GET請求路徑設置回調函數 app.get('/hello', function (req, res) { res.end('hello'); }); //監聽端口 app.listen(8888, function () { console.log('port : 8888'); });
通過訪問 localhost:8888/hello 我們就可以看到內容輸出了。
當然 express 還支持其他的一些請求方法,比如 app.post(),app.put(),app.delete(),app.head() 等。
//引入express const express = require('express'); //創建一個應用 let app = express(); //匹配POST請求 app.post('/hello', function (req, res) { res.end('post hello'); }); //監聽端口 app.listen(8888, function () { console.log('port : 8888'); });
如果我們想要匹配所有的請求路徑,可以使用通配符 * 號。
//引入express const express = require('express'); //創建一個應用 let app = express(); app.get('/hello', function (req, res) { res.end('hello'); }); //*號匹配所有路徑 app.get('*', function (req, res) { res.end('not found'); }); //監聽端口 app.listen(8888, function () { console.log('port : 8888'); });
express 還提供了 all() 方法,可以匹配所有請求方法。
//引入express const express = require('express'); //創建一個應用 let app = express(); //匹配所有請求方法 app.all('/hello', function (req, res) { res.end('all hello'); }); //監聽端口 app.listen(8888, function () { console.log('port : 8888'); });
三、express 中間件的概念
express中間件就是處理http請求的函數,用來完成一些特定的操作,比如登陸檢查,權限控制等等。
1、一個中間件處理完請求和響應,可以把數據傳遞給下一個中間件。
2、在回調函數中使用 next(),就可以讓請求繼續向下傳遞。
3、通過不同路徑,分別執行不同的中間件。
我們可以使用 use() ,在路由數組中添加一個中間件。注意我們設置的路由路徑最終會存放在一個數組里,由上到下的把路徑加入這個數組中。
//引入express const express = require('express'); //創建一個應用 let app = express(); //如果沒有設置路徑,則會匹配全部 app.use(function (req, res, next) { console.log('匹配全部路徑'); //注意這里如果不調用next(),則請求並不會向下傳遞。 next(); }); app.use('/hello', function (req, res, next) { console.log('use hello'); next(); }); app.get('/hello', function (req, res, next) { console.log('get hello'); next(); }); //監聽端口 app.listen(8888, function () { console.log('port : 8888'); });
next() 函數可以傳入一個參數,表示錯誤信息,默認將執行錯誤中間件。
//引入express const express = require('express'); //創建一個應用 let app = express(); app.get('/hello', function (req, res, next) { console.log('get hello'); next('error!!!'); }); //注意錯誤處理中間件的參數是4個 app.use(function (err, req, res, next) { console.log(err); res.end(err); }); //監聽端口 app.listen(8888, function () { console.log('port : 8888'); });
四、express中的request對象
在express中對原生的req請求對象進行了擴展,添加了一些屬性和方法。
//引入express const express = require('express'); //創建一個應用 let app = express(); app.get('/hello', function (req, res, next) { //主機名 res.write('req.hostname : ' + req.hostname + '\r\n'); //請求URL的路徑 res.write('req.path : ' + req.path + '\r\n'); //查詢字符串對象 res.write('req.query : ' + JSON.stringify(req.query) + '\r\n'); //請求的遠程IP地址 res.write('req.ip : ' + req.ip + '\r\n'); //請求方法 res.write('req.method : ' + req.method + '\r\n'); res.end(); }); //監聽端口 app.listen(8888, function () { console.log('port : 8888'); });
通過 req.params 獲取路徑里的參數
//引入express const express = require('express'); //創建一個應用 let app = express(); app.get('/list/:key/:page/:size', function (req, res, next) { //注意,設置了多少參數,地址就需要傳入多少參數 res.end(JSON.stringify(req.params)); }); //監聽端口 app.listen(8888, function () { console.log('port : 8888'); });
五、express中的response對象
express中也對原生的res對象進行了擴展,添加了一些屬性和方法。
const path = require('path'); //引入express const express = require('express'); //創建一個應用 let app = express(); app.get('/send/str', function (req, res, next) { //send方法會自動判斷數據類型,並進行相應的head信息設置 //如果參數是字符串,則Content-Type為 text/html res.send('hello, world'); }); app.get('/send/arr', function (req, res, next) { //如果參數是一個數組,則返回json res.send([1, 2, 3]); }); app.get('/send/obj', function (req, res, next) { //如果參數是一個對象,則返回json res.send({name: 'xiaoxu', age: 24}); }); app.get('/send/number', function (req, res, next) { //如果是一個數字,則返回相應狀態碼短語 res.send(404); }); app.get('/download', function (req, res, next) { //提示下載文件 res.download('./1.txt'); }); app.get('/json', function (req, res, next) { //響應json對象 res.json({name: 'xiaoxu'}); }); app.get('/jsonp', function (req, res, next) { //客戶端請求時,需要帶上callback=test res.jsonp('hello'); }); app.get('/redirect', function (req, res, next) { //重定向到一個地址 res.redirect('http://www.baidu.com'); }); app.get('/sendfile', function (req, res, next) { //發送一個文件 res.sendFile(path.resolve('./1.txt')); }); app.get('/sendstatus', function (req, res, next) { //發送一個狀態碼 res.sendStatus(302); }); //監聽端口 app.listen(8888, function () { console.log('port : 8888'); });
六、ejs模板的使用
支持express的模板有很多種,這里我們使用ejs作為模板引擎。
安裝ejs:
npm install ejs
使用ejs模板
const path = require('path'); const express = require('express'); //創建一個應用 let app = express(); //設置模板引擎 app.set('view engine', 'ejs'); //設置模板目錄 app.set('views', path.join(__dirname, 'views')); //監聽 app.listen(8888);
如果我們希望,ejs能夠渲染html頁面,可以使用如下
const path = require('path'); const express = require('express'); let app = express(); //設置視圖引擎為html引擎 app.set('view engine', 'html'); //設置視圖的路徑 app.set('views', path.join(__dirname, 'views')); //配置html引擎 app.engine('html', require('ejs').__express); app.listen(8888);
渲染視圖,輸出內容。
const path = require('path'); const express = require('express'); let app = express(); app.set('view engine', 'html'); app.set('views', path.join(__dirname, 'views')); app.engine('html', require('ejs').__express); app.get('/hello', function (req, res, next) { //參數一表示模板的名稱,會在當前項目目錄下的views目錄查找 //參數二表示傳入模板中的數據 res.render('hello', { name: 'xiaoxu', age: 24 }); }); app.listen(8888);
hello.html的代碼:
<!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <%= name %> <%= age %> </body> </html>
七、靜態文件服務器
有些時候我們需要在頁面上加載css,js,img等靜態資源,指定存放靜態資源的目錄,瀏覽器發出非html文件請求時,服務器會到這個目錄下找對應的資源。
const path = require('path'); const express = require('express'); let app = express(); app.set('view engine', 'html'); app.set('views', path.join(__dirname, 'views')); app.engine('html', require('ejs').__express); //注意express.static這個中間件是express內置的 app.use(express.static(path.join(__dirname, 'public'))); app.get('/hello', function (req, res, next) { //參數一表示模板的名稱,會在當前項目目錄下的views目錄查找 //參數二表示傳入模板中的數據 res.render('hello', { name: 'xiaoxu', age: 24 }); }); app.listen(8888);
八、使用body-parser中間件解析post過來的數據
安裝body-parser
npm install body-parser
使用body-parser
const path = require('path'); const express = require('express'); const bodyParser = require('body-parser'); let app = express(); app.set('view engine', 'html'); app.set('views', path.join(__dirname, 'views')); app.engine('html', require('ejs').__express); //解析 application/json app.use(bodyParser.json()); //解析 application/x-www-form-urlencoded app.use(bodyParser.urlencoded({extended:false})); app.post('/form', function (req, res) { console.log(req.body); }); app.listen(8888);