好看的课外书,玄幻小说排行榜

主頁 > 知識(shí)庫 > Node后端Express框架安裝及應(yīng)用

Node后端Express框架安裝及應(yīng)用

Express 框架核心特性：

可以設(shè)置中間件來響應(yīng) HTTP 請(qǐng)求。
定義了路由表用于執(zhí)行不同的 HTTP 請(qǐng)求動(dòng)作。
可以通過向模板傳遞參數(shù)來動(dòng)態(tài)渲染 HTML 頁面。

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ā)的第三方庫：morgan
morgan安裝：

npm install morgan

如何用？直接作為中間件使用即可：

const loggerWriter = fs.createWriteStream('./log/access.log', {
  flags: 'a+'
})
app.use(morgan('combined', {stream: loggerWriter}));

上傳文件中間件

圖片上傳我們可以使用express官方開發(fā)的第三方庫：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=liyingxiapassword=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)
})

您可能感興趣的文章:

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頁面一個(gè)方式

標(biāo)簽：雙鴨山錫林郭勒盟襄陽莆田遵義鄂爾多斯丹東哈爾濱

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《Node后端Express框架安裝及應(yīng)用》，本文關(guān)鍵詞 Node,后端,Express,框架,安裝,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。