目錄
- Express 框架核心特性：
- Express安裝
- 方式一：安裝express-generator
- 創(chuàng)建項(xiàng)目
- 項(xiàng)目目錄如下
- 方式二： 自己搭建環(huán)境
- express 初體驗(yàn)
- 請(qǐng)求和響應(yīng)
- 返回?cái)?shù)據(jù)
- Express 中間件
- 認(rèn)識(shí)中間件
- 中間是什么？
- 使用中間件
- 日志記錄中間件
- 上傳文件中間件
- 請(qǐng)求和響應(yīng)
- 請(qǐng)求解析
- 方式一：params
- 方式二：query
- 方式三：通過(guò)post請(qǐng)求中的body的json格式；
- 方式四：通過(guò)post請(qǐng)求中
- 方式五：通過(guò)post請(qǐng)求中的form-data格式；
- 響應(yīng)方式
- 路由的使用
- 靜態(tài)資源服務(wù)器
- 錯(cuò)誤處理方式
Express 框架核心特性：
- 可以設(shè)置中間件來(lái)響應(yīng) HTTP 請(qǐng)求。
- 定義了路由表用于執(zhí)行不同的 HTTP 請(qǐng)求動(dòng)作。
- 可以通過(guò)向模板傳遞參數(shù)來(lái)動(dòng)態(tài)渲染 HTML 頁(yè)面。
Express安裝
express的使用過(guò)程有兩種方式：
- 方式一：通過(guò)express提供的腳手架，直接創(chuàng)建一個(gè)應(yīng)用的骨架；
- 方式二：從零搭建自己的express應(yīng)用結(jié)構(gòu)；
方式一：安裝express-generator
npm install -g express-generator
創(chuàng)建項(xiàng)目
項(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)目跑起來(lái)：
npm install
node bin/www
node app.js
方式二： 自己搭建環(huán)境
上面通過(guò)express提供的腳手架，直接創(chuàng)建一個(gè)應(yīng)用的骨架；現(xiàn)在我們自己從零搭建項(xiàng)目：
初始化一個(gè)新的項(xiàng)目：
安裝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ù)器跑起來(lái):
到瀏覽器：訪問(wèn)localhost:8000即可
請(qǐng)求和響應(yīng)
請(qǐng)求的路徑中如果有一些參數(shù)，可以這樣表達(dá)：
/users/:userId；
在request對(duì)象中要獲取可以通過(guò)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)前中間件功能沒(méi)有結(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)求日志記錄下來(lái)，那么可以使用express官網(wǎng)開(kāi)發(fā)的第三方庫(kù)：morgan
morgan安裝：
如何用？直接作為中間件使用即可：
const loggerWriter = fs.createWriteStream('./log/access.log', {
flags: 'a+'
})
app.use(morgan('combined', {stream: loggerWriter}));
上傳文件中間件
圖片上傳我們可以使用express官方開(kāi)發(fā)的第三方庫(kù)：multer
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ù)的方法常見(jiàn)的是5種：
方式一：通過(guò)get請(qǐng)求中的URL的params；
方式二：通過(guò)get請(qǐng)求中的URL的query；
方式三：通過(guò)post請(qǐng)求中的body的json格式；
方式四：通過(guò)post請(qǐng)求中的body的x-www-form-urlencoded格式；
方式五：通過(guò)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=liyingxiapassword=123456
獲取參數(shù)：
app.use('/login', (req, res, next) => {
console.log(req.query);
res.json("請(qǐng)求成功~");
})
方式三：通過(guò)post請(qǐng)求中的body的json格式；
在客戶端發(fā)送post請(qǐng)求時(shí)，會(huì)將數(shù)據(jù)放到body中：客戶端可以通過(guò)json的方式傳遞，也可以通過(guò)form表單的方式傳遞；
自己編寫(xiě)中間件來(lái)解析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來(lái)完成：
app.use(express.json());
app.post('/login', (req, res, next) => {
console.log(req.body);
res.end("登錄成功~");
});
方式四：通過(guò)post請(qǐng)求中
body的x-www-form-urlencoded格式；
解析application/x-www-form-urlencoded：
可以使用express自帶的 urlencoded函數(shù)來(lái)作為中間件：
傳入的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("登錄成功~");
});
方式五：通過(guò)post請(qǐng)求中的form-data格式；
通過(guò)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方法；
json()json方法中可以傳入很多的類型：
object、array、string、boolean、number、null等，都會(huì)被轉(zhuǎn)換成json格式返回
res.json({name:"liyignxia",password:"123456"});
status()設(shè)置狀態(tài)碼
路由的使用
使用express.Router來(lái)創(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)
})
您可能感興趣的文章:- node+express框架中連接使用mysql(經(jīng)驗(yàn)總結(jié))
- NodeJs中express框架的send()方法簡(jiǎn)介
- Node.js的Express框架使用上手指南
- Nodejs express框架一個(gè)工程中同時(shí)使用ejs模版和jade模版
- NodeJS Express框架中處理404頁(yè)面一個(gè)方式
