Node后端Express框架安裝及應(yīng)用
Express 框架核心特性：
- 可以設(shè)置中間件來響應(yīng) HTTP 請(qǐng)求。
- 定義了路由表用于執(zhí)行不同的 HTTP 請(qǐng)求動(dòng)作。
- 可以通過向模板傳遞參數(shù)來動(dòng)態(tài)渲染 HTML 頁(yè)面。
Express安裝
express的使用過程有兩種方式：
- 方式一：通過express提供的腳手架，直接創(chuàng)建一個(gè)應(yīng)用的骨架；
- 方式二：從零搭建自己的express應(yīng)用結(jié)構(gòu)；
方式一：安裝express-generator
npm install -g express-generator
創(chuàng)建項(xiàng)目
express express-app
項(xiàng)目目錄如下
├── app.js
├── bin
│ └── www
├── package-lock.json
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ └── stylesheets
│ └── style.css
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.jade
├── index.jade
└── layout.jade
之后 cd 進(jìn)入到對(duì)應(yīng)的目錄下，然后將項(xiàng)目跑起來：
npm install node bin/www node app.js
方式二： 自己搭建環(huán)境
上面通過express提供的腳手架，直接創(chuàng)建一個(gè)應(yīng)用的骨架；現(xiàn)在我們自己從零搭建項(xiàng)目：
初始化一個(gè)新的項(xiàng)目：
npm init -y
安裝express：
npm install express
新建app.js
express 初體驗(yàn)
現(xiàn)在搭建自己的第一個(gè)express程序：在app.js中加入如下代碼
const express = require('express');
// 創(chuàng)建服務(wù)器
const app = express();
app.get('/',(req,res) => {
res.end("Hello World");
});
app.listen(8000,() => {
console.log("服務(wù)器啟動(dòng)成功~");
})
進(jìn)入項(xiàng)目根目錄下，在終端中將服務(wù)器跑起來:
node app.js
到瀏覽器：訪問localhost:8000即可
請(qǐng)求和響應(yīng)
請(qǐng)求的路徑中如果有一些參數(shù)，可以這樣表達(dá)：
/users/:userId；
在request對(duì)象中要獲取可以通過req.params.userId;
返回?cái)?shù)據(jù)
返回?cái)?shù)據(jù)，我們可以方便的使用json：
res.json(數(shù)據(jù))方式；
const express = require('express');
const app = express();
app.get('/users/:userId', (req, res, next) => {
console.log(req.params.userId);
res.json({username: "liyingxia", password: "8i8i8i8i" });
});
app.listen(8000, () => {
console.log("靜態(tài)服務(wù)器啟動(dòng)成功~");
})
Express 中間件
認(rèn)識(shí)中間件
Express是一個(gè)路由和中間件的Web框架，它本身的功能非常少：
Express應(yīng)用程序本質(zhì)上是一系列中間件函數(shù)的調(diào)用；
中間是什么？
中間件的本質(zhì)就是一個(gè)回調(diào)函數(shù)；
這個(gè)回調(diào)函數(shù)接受三個(gè)參數(shù)：
請(qǐng)求對(duì)象（request對(duì)象）；
響應(yīng)對(duì)象（response對(duì)象）；
next函數(shù)（在express中定義的用于執(zhí)行下一個(gè)中間件的函數(shù)）；
中間件中可以執(zhí)行哪些任務(wù)？
執(zhí)行任何代碼；
更改請(qǐng)求（request）和響應(yīng)（response）對(duì)象；
結(jié)束請(qǐng)求-響應(yīng)周期（返回?cái)?shù)據(jù)）；
調(diào)用棧中的下一個(gè)中間件；
如果當(dāng)前中間件功能沒有結(jié)束請(qǐng)求-響應(yīng)周期，則必須調(diào)用 next()將控制權(quán)傳遞給下一個(gè)中間件功能，否則，請(qǐng)求將被掛起。
使用中間件
express主要提供了兩種方式：app/router.use和app/router.methods這兩種方式把中間件應(yīng)用到我們的應(yīng)用程序中；
methods指的是常用的請(qǐng)求方式，比如：app.get或app.post等
// express 中間件的使用
const express = require('express');
const res = require('express/lib/response');
const app = express();
app.use((req,res,next) => {
console.log("middleware");
next();
});
app.use((req,res,next) => {
console.log("middleware");
res.end("Hello Common Middleware");
})
app.listen(9000,()=>{
console.log("中間件服務(wù)器啟動(dòng)成功~")
})
path匹配中間件：
//path 路徑匹配中間件
app.use('/home',(req,res,next) => {
console.log("home middleware 中間件");
next();
});
app.use('/home',(req,res,next) => {
console.log("home middleware02");
next();
res.end("middleware");
});
app.use((req,res,next) =>{
console.log("middleware");
})
path 和 method 匹配中間件
// path 和 method 匹配中間件
app.get('/home',(req,res,next) => {
console.log("home get middleware");
next();
})
app.post('/login',(req,res,next) => {
console.log("login post middleware");
next();
});
app.use((req,res,next) => {
console.log("common middleware");
})
app.use(express.json());
app.use(express.urlencoded({extended:true}));
app.post('/login',(req,res,next) => {
console.log(req.body);
res.end("登陸成功~");
});
日志記錄中間件
如果我們希望將請(qǐng)求日志記錄下來，那么可以使用express官網(wǎng)開發(fā)的第三方庫(kù)：morgan
morgan安裝：
npm install morgan
如何用？直接作為中間件使用即可：
const loggerWriter = fs.createWriteStream('./log/access.log', {
flags: 'a+'
})
app.use(morgan('combined', {stream: loggerWriter}));
上傳文件中間件
圖片上傳我們可以使用express官方開發(fā)的第三方庫(kù)：multer
multer安裝：
npm install multer
上傳文件：
const upload = multer({
dest: "uploads/"
})
app.post('/upload', upload.single('file'), (req, res, next) => {
console.log(req.file.buffer);
res.end("文件上傳成功~");
})
添加上傳文件后綴名：
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "uploads/")
},
filename: (req, file, cb) => {
cb(null, Date.now() + path.extname(file.originalname));
}
})
const upload = multer({
storage
})
app.post('/upload', upload.single('file'), (req, res, next) => {
console.log(req.file.buffer);
res.end("文件上傳成功~");
})
上傳多張圖片:
app.use('/upload', upload.array('files'), (req, res, next) => {
console.log(req.files);
});
請(qǐng)求和響應(yīng)
客戶端傳遞到服務(wù)器參數(shù)的方法常見的是5種：
方式一：通過get請(qǐng)求中的URL的params；
方式二：通過get請(qǐng)求中的URL的query；
方式三：通過post請(qǐng)求中的body的json格式；
方式四：通過post請(qǐng)求中的body的x-www-form-urlencoded格式；
方式五：通過post請(qǐng)求中的form-data格式；
請(qǐng)求解析
方式一：params
請(qǐng)求地址： http://locahost:8000/login/asd/ass
獲取參數(shù)：
app.use('/login/:id/:name', (req, res, next) => {
console.log(req.params);
res.json("請(qǐng)求成功~");
})
方式二：query
請(qǐng)求地址：http://localhost:8000/login?username=liyingxia&password=123456
獲取參數(shù)：
app.use('/login', (req, res, next) => {
console.log(req.query);
res.json("請(qǐng)求成功~");
})
方式三：通過post請(qǐng)求中的body的json格式；
在客戶端發(fā)送post請(qǐng)求時(shí)，會(huì)將數(shù)據(jù)放到body中：客戶端可以通過json的方式傳遞，也可以通過form表單的方式傳遞；
自己編寫中間件來解析JSON：
app.use((req, res, next) => {
if (req.headers['content-type'] === 'application/json') {
req.on('data', (data) => {
const userInfo = JSON.parse(data.toString());
req.body = userInfo;
})
req.on('end', () => {
next();
})
} else {
next();
}
})
app.post('/login', (req, res, next) => {
console.log(req.body);
res.end("登錄成功~");
});
適用express內(nèi)置的中間件或者使用body-parser來完成：
app.use(express.json());
app.post('/login', (req, res, next) => {
console.log(req.body);
res.end("登錄成功~");
});
方式四：通過post請(qǐng)求中
body的x-www-form-urlencoded格式；
解析application/x-www-form-urlencoded：
可以使用express自帶的 urlencoded函數(shù)來作為中間件：
傳入的extended用于表示使用哪一種解析方式：
- true：使用
qs第三方模塊； - false：使用
querystring內(nèi)置模塊；
app.use(express.json());
app.use(express.urlencoded({extended: true}));
app.post('/login', (req, res, next) => {
console.log(req.body);
res.end("登錄成功~");
});
方式五：通過post請(qǐng)求中的form-data格式；
通過any借助multer去解析一些form-data中的普通數(shù)據(jù):
app.use(upload.any());
app.use('/login', (req, res, next) => {
console.log(req.body);
});
響應(yīng)方式
end()類似于http中的response.end方法；
res.end("獲取成功~")
json()json方法中可以傳入很多的類型：
object、array、string、boolean、number、null等，都會(huì)被轉(zhuǎn)換成json格式返回
res.json({name:"liyignxia",password:"123456"});
status()設(shè)置狀態(tài)碼
res.status(200);
路由的使用
使用express.Router來創(chuàng)建一個(gè)路由處理程序：一個(gè)Router實(shí)例擁有完整的中間件和路由系統(tǒng)；
// 用戶相關(guān)的處理
const userRouter = express.Router();
userRouter.get('/', (req, res, next) => {
res.end("用戶列表");
});
userRouter.post('/', (req, res, next) => {
res.end("創(chuàng)建用戶");
});
userRouter.delete('/', (req, res, next) => {
res.end("刪除用戶");
});
app.use('/users', userRouter);
靜態(tài)資源服務(wù)器
Node也可以作為靜態(tài)資源服務(wù)器，并且express給我們提供了方便部署靜態(tài)資源的方法；
const express = require('express');
const app = express();
app.use(express.static('./build'));
app.listen(8000, () => {
console.log("靜態(tài)服務(wù)器啟動(dòng)成功~");
})
錯(cuò)誤處理方式
app.use((req, res, next) => {
next(new Error("USER DOES NOT EXISTS"));
});
app.use((err, req, res, next) => {
const message = err.message;
switch (message) {
case "USER DOES NOT EXISTS":
res.status(400).json({message})
}
res.status(500)
})
相關(guān)文章
在微信小程序開發(fā)過程中需要在小程序里使用SVG矢量圖標(biāo),下面為大家分享2種在微信小程序中引入SVG矢量圖標(biāo)的方法2018-10-10
這篇文章主要介紹了解決idea打開窗口/tab過多導(dǎo)致隱藏的問題,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
這篇文章主要介紹了CAPL?腳本對(duì).ini?配置文件的高階操作,本節(jié)就針對(duì)這種情況對(duì)INI文件的讀寫方式進(jìn)行升級(jí)，以達(dá)到快速便捷讀寫多鍵值對(duì)的情況，對(duì)CAPL?腳本.ini?配置文件操作感興趣的朋友一起看看吧2022-05-05
雖不算什么高深的東西，但至少也算一點(diǎn)點(diǎn)小經(jīng)驗(yàn)，分享分享吧，如果您是高手，而且您還有點(diǎn)時(shí)間，那么請(qǐng)你耐心看完整篇文章，然后再幫忙指點(diǎn)指點(diǎn)，留下您的經(jīng)驗(yàn)，我也好學(xué)習(xí)學(xué)習(xí)。2009-04-04
MASA?Blazor是一個(gè)基于?Blazor?Component?和?Material?Design?的?UI?組件庫(kù)，接下來通過本文給大家介紹MASA?Blazor入門詳細(xì)教程，感興趣的朋友一起看看吧2022-04-04
在使用idea 2020.3版本開發(fā)maven項(xiàng)目的時(shí)候,一直出現(xiàn)有效件index,idea基本上就沒辦法操作了,連跳入到類或方法里都跳不了,本文就來介紹一下解決方法,感興趣的可以了解一下2024-01-01
vscode 左側(cè)擴(kuò)展活動(dòng)欄內(nèi)容消失的問題及解決方法
vscode左側(cè)活動(dòng)欄默認(rèn)會(huì)有 一些內(nèi)容，今天一不小心，不知道怎么的，將部分內(nèi)容搞沒了，vscode 左側(cè)擴(kuò)展活動(dòng)欄內(nèi)容消失了怎么辦，下面給大家分享本文幫助大家快速解決，感興趣的朋友一起看看吧2021-08-08
在閱讀clean code書籍的時(shí)候，讓我體會(huì)很多，因此我也用文字記錄下這些有意義的知識(shí)。我認(rèn)為這本書讀十遍都不為過，下面我講解一下自己的關(guān)于變量、函數(shù)、類的命名規(guī)則筆記。2011-08-08
推薦幾個(gè)好用的WordPress媒體庫(kù)分類/文件夾管理插件
這篇文章主要介紹了推薦幾個(gè)好用的WordPress媒體庫(kù)分類/文件夾管理插件2021-09-09
phpMyAdmin“無法載入 mysql 擴(kuò)展， 請(qǐng)檢查 PHP 配置”問題的解決方案
安裝XAMPP后，phpMyAdmin無法進(jìn)入，一直提示“無法載入 mysql 擴(kuò)展， 請(qǐng)檢查 PHP 配置”。網(wǎng)上查，需要修改php.ini，卻發(fā)現(xiàn)本來就是正確的；2009-02-02