搞定Node-Express框架(一)

前言

---

🫥大家好我是一溪风月一名程序员界搬砖工，今天来分享下Express相关的内容。

🤗话接上回~前面我们已经学习了使用HTTP模块来创建和搭建Web服务器，为什么还要学习Web框架？因为使用原生HTTP模块进行处理的时候比较复杂，比如在文件的上传等等，需要做非常多的处理，常见的处理有URL的处理，Methods方法的判断，参数的处理，逻辑代码的处理，都需要我们自己来处理和封装，并且所有的内容都需要放在一起，会非常的混乱。

🤡那么既然要学习框架为什么要学习Express和Koa这两个框架，因为Express框架和Koa是比较受欢迎的，并且很多框架都是基于Express的，比如Nest框架，底层就是基于Express框架的。

🥱Express的核心就是中间件，如果你想把Express掌握好，其实就是理解中间件。

一.Express的安装与基本使用

---

🥺使用Express有两种方式：首先我们可以像Vue和React的脚手架一样来使用它，也可以自己去搭建。

1. 基于脚手架来直接搭建使用Express。

// 全局安装
npm install -g express-generator
// 创建Express应用
express express-demo
// 安装依赖
npm i
// 启动Express
node bin/www

2. 自己搭建自己的Express框架。

npm init -y 
// 安装express
npm install express
// 下载依赖
npm install

😎既然我们安装了Express项目现在我们就来简单的使用以下Express，我们依然在Apifox中cesium返回结果，

当然我们平时在开发的时候会有很多返回json的需求，在Express中我们可以直接返回json通过res.json

const express = require("express")

// 创建express的服务器
const app = express()

// 客户端访问URL：/login和/home
app.post('./login', (req, res, next) => {
  res.end("登录成功！")
})

app.get('/home', (req, res, next) => {
  res.end("进入home页")
})

// 启动服务器，并且监听端口
app.listen(8000, () => {
  console.log("Express服务器启动成功")
})

二.认识中间件

---

🫥Express是一个路由和中间件的Web框架，它的本身功能特别的少，Express的核心就是中间件。

1. Express应用程序本质上是一系列中间件函数的调用。
2. Express主要提供了两种中间件的方式app/router.use app/router.methods.

🤗基本使用方式如下：

1. 最普通的中间件的用法，所有的请求都会经过。

const express = require("express")

// 创建express的服务器
const app = express()

app.use((req, res, next) => {
  res.end("HelloWorld")
})


// 启动服务器，并且监听端口
app.listen(8000, () => {
  console.log("Express服务器启动成功")
})

2. 路径匹配中间件，会匹配固定的路径。

const express = require("express")

// 创建express的服务器
const app = express()

app.use('/user', (req, res, next) => {
  res.end("HelloWorld")
})


// 启动服务器，并且监听端口
app.listen(8000, () => {
  console.log("Express服务器启动成功")
})

3. 路径和方法匹配中间件，匹配对应的方法和路径时候。

const express = require("express")

// 创建express的服务器
const app = express()

app.use('/user', (req, res, next) => {
  res.end("HelloWorld")
  next()
})
app.get('/login', (req, res, next) => {
  res.end("登录成功")
  next()
})


// 启动服务器，并且监听端口
app.listen(8000, () => {
  console.log("Express服务器启动成功")
})

4. 在一个请求中使用多个中间件

const express = require("express")

// 创建express的服务器
const app = express()

app.post('/user', (req, res, next) => {
  console.log("匹配到了user")
  next()
}, (req, res, next) => {
  console.log("中间件执行")
  next()
})


// 启动服务器，并且监听端口
app.listen(8000, () => {
  console.log("Express服务器启动成功")
})

🤡哈哈哈，既然基本知识学过了，那么看下下面这个问题，让我们更深层次的理解中间件，我们可以看到在我们的代码中有对应匹配的user的代码，你觉得它是直接去匹配这个中间件哪？还是从其他匹配方式？

const express = require("express")

// 创建express的服务器
const app = express()

// example 01
app.use((req, res, next) => {
  console.log("答案一")
  next()
})

app.post('/user', (req, res, next) => {
  console.log("答案二")
  next()
}, (req, res, next) => {
  console.log("答案三")
  next()
})


// 启动服务器，并且监听端口
app.listen(8000, () => {
  console.log("Express服务器启动成功")
})

执行结果：答案一，答案二，答案三

三.编写解析request body中间件

---

🤡业务流程：当客户端上传的内容是用户名为zpj密码为123456就返回登陆成功，并且限制客户传递的数据通过json的方式进行传递，服务端编写解析body的中间件进行验证。

const express = require("express")
const app = express()

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) => {
  if (req.body.username === 'zpj' && req.body.password === '123456') {
    res.json({
      code: 200,
      message: '登录成功'
    })
  } else {
    res.json({
      code: 400,
      message: '用户名或密码错误'
    })
  }
})


app.listen(9000, () => {
  console.log("服务器启动成功")
})

🤡请求结果如下：

四.应用级中间件

---

🫥如果我们所有的功能中间件都要自己进行编写往往会出现很多问题，因为一方面因为某些中间件比较复杂，另外一方面假如我们每次使用都自己进行编写会比较繁琐，其实有很多中间件都是早就已经编写好的，比如解析body的中间件express.json还有前边我们涉及的文件上传的中间件multer都是框架中早就帮我们编写好的，我们直接拿来用就好了。

😎使用express.json中间件来进行body的解析

const express = require('express')
const app = express()

app.use(express.json()) // 全局中间件使用解析 body-json

app.post('/login', (req, res, next) => {
  if (req.body.username === '王鹏' && req.body.password === '123456') {
    res.json({
      code: 0,
      msg: '登录成功'
    })
  } else {
    res.json({
      code: 1,
      msg: '用户名或密码错误'
    })
  }
})

app.listen(9000, () => {
  console.log("服务启动成功")
})

👹请求结果如下：

🥺但是当有另外一种可能我们上传的格式是application/x-www-form-urlencoded的话我们需要添加另外一个中间应用级别的中间件,这样就能够解析这种类型的数据了。

app.use(express.urlencoded({extended:true}));

🫥使用express.multer来实现文件的上传

1. 首先由于multer并不是express中内置的，它属于一个第三方的中间件，如果我们想要使用首先要进行安装

   npm install multer

2. 使用multer进行文件的上传，需要注意的是upload.single(file)需要和formdata中的字段名称保持一致。

const express = require('express')
const multer = require('multer')
const app = express()

// 配置multer
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'upload/') // 指定文件上传的目录
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname) // 保持文件上传的名称
  }
})

// 使用multer
const upload = multer({
  storage: storage
})


app.post('/upload', upload.single('file'), (req, res, next) => {
  res.end("上传成功")
})



app.listen(9000, () => {
  console.log("服务启动成功")
})

🥱内容上传成功：