Node第三天学习总结—— Express中间件(Express、Express路由、Express中间件、使用Express写接口)

(一)初识Express

1.Express简介

1.1 Express

官方给出的概念：Express 是基于 Node.js 平台，快速、开放、极简的Web 开发框架。

通俗的理解：Express 的作用和 Node.js 内置的http模块类似，是专门用来创建Web 服务器的。

Express 的本质：就是一个npm上的第三方包，提供了快速创建Web 服务器的便捷方法。

Express 的中文官网： https://www.expressjs.com.cn/

1.2 进一步理解 Express

思考：不使用Express 能否创建 Web 服务器？
答案：能，使用 Node.js提供的原生http 模块即可。

思考：既生瑜何生亮（有了http 内置模块，为什么还有用 Express）？
答案：http内置模块用起来很复杂，开发效率低；Express是基于内置的http模块进一步封装出来的，能够极大的提高开发效率。

思考：http 内置模块与Express是什么关系？
答案：类似于浏览器中Web API 和 jQuery的关系。后者是基于前者进一步封装出来的。

1.3Express能做什么

对于前端程序员来说，最常见的两种服务器，分别是：

• Web 网站服务器：专门对外提供Web 网页资源的服务器。
• API 接口服务器：专门对外提供API 接口的服务器。

使用 Express，我们可以方便、快速的创建Web 网站的服务器或 API 接口的服务器。

2.Express的基本使用

2.1安装

在项目所处的目录中，运行如下的终端命令，即可将express安装到项目中使用：

npm i express
npm i express@4.17.1

2.2创建基本的 Web 服务器

// 1. 导入 express
const express = require('express')
// 2. 创建 web 服务器
const app = express()
// 4.监听客户端的GET和POST请求 ， 并向客户端响应具体的内容

// 3.调用 app.listen(端口号， 启动成功后的回调函数) ，启动服务器
app.listen(80, () => {
   
    console.log('express server running at http://127.0.0.1')
})

2.3监听GET 请求 app.get()

通过 app.get() 方法，可以监听客户端的 GET 请求，具体的语法格式如下：

// 参数1: 客户端请求的 URL 地址
// 参数2: 请求对应的处理函数
//       req:请求对象(包含了与请求相关的属性与方法)
//       res:响应对象(包含了与响应相关的属性与方法)
app.get('请求路径URL' , function(req , res) {
   /*处理函数*/})
app.get('请求路径URL' , (req , res)  => {
   /*处理函数*/}) // 利用箭头函数

2.4监听 POST 请求 app.post()

通过 app.post() 方法，可以监听客户端的POST请求，具体的语法格式如下：

// 参数1: 客户端请求的 URL 地址
// 参数2: 请求对应的处理函数
//       req:请求对象(包含了与请求相关的属性与方法)
//       res:响应对象(包含了与响应相关的属性与方法)
app.post('请求路径URL' , function(req , res) {
   /*处理函数*/})
app.post('请求路径URL' , (req , res)  => {
   /*处理函数*/})    // 利用箭头函数

2.5 把内容响应给客户端 res.send()

通过 res.send() 方法，可以把处理好的内容，发送给客户端：

app.get('/user' , (req , res) => {
   
    // 调用express 提供的 res.send() 方法 ， 向客户端响应（发送）一个 JSON 对象
    res.send({
   name: 'zs' , age : 20 , gender: '男'})
})


app.post('/user' , (req , res) => {
   
    // 调用express 提供的 res.send() 方法 ， 向客户端响应（发送）一个 文本字符串
    res.send('请求成功')
})

2.6获取 URL 中携带的查询参数 req.query

通过 req.query 对象，可以访问到客户端通过查询字符串的形式，发送到服务器的参数：

app.get('/' , (req, res) => {
   
    // req.query 默认是一个空对象
    // 客户端使用 ?name=zs&age=20 这种查询字符串形式 ， 发送到服务器的参数，
    // 可以通过req.query 对象访问到，例如：
    // req.query.name  req.query.age
    console.log(req.query)
})

2.7获取 URL 中的动态参数 req.params

通过 req.params 对象，可以访问到 URL 中，通过 : 匹配到的动态参数：

// URL 地址中，可以通过 :参数名 的形式 ， 匹配动态参数值
// 注意 : 这里的 :id 是一个动态的参数  
app.get('/user/:id' , (req , res) => {
   
    // req.params 默认是一个空对象
    // 里面存放着通过 :  动态匹配到的参数值
    console.log(req.params)
})

注意点

// 动态参数可以是多个 例如：/user/:id/:name 
//: 后面的值可以随便写(只要合理) 例如： /user/:ids 
// 动态参数的个数要保持一致 ，不然会报错
http://127.0.0.1/user/1/zs/20   // 这时会报错
app.get('/user/:id/name' , (req , res) => {
   
    console.log(req.params)
})
// 动态参数的顺序可以调换，对应的参数也会改变
第一次   http://127.0.0.1/user/1/zs
app.get('/user/:id/name' , (req , res) => {
   
    console.log(req.params) // id:1 , name:zs
})

第二次   http://127.0.0.1/user/zs/1
app.get('/user/:id/name' , (req , res) => {
   
    console.log(req.params) // id:zs , name:1
})

2.8req.body、req.query、req.parmas区别

// 注册中间件
app.use(express.urlencoede({
   extended:false}))

// 以？传递的参数都是get形式 接收的时候使用req.query
app.post('/login' ,(req , res) => {
   
    console.log(req.query)
})

app.use(expres.json())

// req.body 取到的是post请求
app.post('/login' ,(req , res) => {
   
    console.log(req.body)
})

// req.parmas 取到的是/:id 的值

2.9完整代码

// 1. 导入 express
const express = require('express')
// 2. 创建 web 服务器
const app = express()

// 4. 监听客户端的 GET 和 POST 请求，并向客户端响应具体的内容
app.get('/user', (req, res) => {
   
  // 调用 express 提供的 res.send() 方法，向客户端响应一个 JSON 对象
  res.send({
   
    name: 'zs',
    age: 20,
    gender: '男'
  })
})
app.post('/user', (req, res) => {
   
  // 调用 express 提供的 res.send() 方法，向客户端响应一个 文本字符串
  res.send('请求成功')
})
app.get('/', (req, res) => {
   
  // 通过 req.query 可以获取到客户端发送过来的 查询参数
  // 注意：默认情况下，req.query 是一个空对象
  console.log(req.query)
  res.send(req.query)
})
// 注意：这里的 :id 是一个动态的参数
app.get('/user/:ids/:username', (req, res) => {
   
  // req.params 是动态匹配到的 URL 参数，默认也是一个空对象
  console.log(req.params)
  res.send(req.params)
})

// 3. 启动 web 服务器
app.listen(80, () => {
   
  console.log('express server running at http://127.0.0.1')
})

3.托管静态资源

3.1express.static()

express 提供了一个非常好用的函数，叫做 express.static()。通过它，我们可以非常方便地创建一个静态资源服务器， 例如，通过如下代码就可以将public目录下的图片、CSS文件、JavaScript文件对外开放访问了：

app.use(express.static('静态资源目录名'))
// 例如：
app.use(express.static('public'))

现在，你就可以访问public目录中的所有文件了：
http://localhost:3000/images/bg.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/login.js
注意：Express在指定的静态目录中查找文件，并对外提供资源的访问路径。 因此，存放静态文件的目录名不会出现在URL 中。

3.2托管多个静态资源目录 express.static()

如果要托管多个静态资源目录，请多次调用**express.static()** 函数：

app.use(express.static('public'))
app.use(express.static('files'))

访问静态资源文件时，express.static()函数会根据目录的添加顺序查找所需的文件。

3.3挂载路径前缀

如果希望在托管的静态资源访问路径之前，挂载路径前缀，则可以使用如下的方式：

app.use("路径前缀",express.static('目录名'))
// 前缀可以随便写
// 例如
app.use("/abc",express.static('public'))
// 建议前缀 和 目录名一致
// 例如：
app.use("/public",express.static('public'))

现在，你就可以通过带有/public前缀地址来访问public目录中的文件了：
http://localhost:3000/public/images/kitten.jpg
http://localhost:3000/public/css/style.css
http://localhost:3000/public/js/app.js

完整代码：

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

// 在这里，调用 express.static() 方法，快速的对外提供静态资源
app.use('/files', express.static('./files'))
app.use(express.static('./clock'))

app.listen(80, () => {
   
  console.log('express server running at http://127.0.0.1')
})

4.nodemon

4.1为什么要使用nodemon

在编写调试Node.js项目的时候，如果修改了项目的代码，则需要频繁的手动close 掉，然后再重新启动，非常繁琐。
现在，我们可以使nodemon（https://www.npmjs.com/package/nodemon）这个工具，它能够监听项目文件 的变动，当代码被修改后，nodemon会自动帮我们重启项目，极大方便了开发和调试。

4.2安装 nodemon

在终端中，运行如下命令，即可将nodemon 安装为全局可用的工具：

npm install -g nodemon

4.3使用 nodemon

当基于Node.js编写了一个网站应用的时候，传统的方式，是运行 node app.js 命令，来启动项目。这样做坏处是： 代码被修改之后，需要手动重启项目。

现在，我们可以将node 命令替换为nodemon命令，使用 nodemon app.js 来启动项目。这样做的好处是：代码 被修改之后，会被nodemon监听到，从而实现自动重启项目的效果。

node app.js

# 将上面的终端命令，替换为下面的终端命令，即可实现自动重启项目的效果
nodemon app.js

# ctrl + s自动重启
# 输入 rs 可以手动重启

(二)Express路由

1.路由的概念

1.1路由

广义上来讲，路由就是映射关系。

1.2现实生活中的路由

1.3Express中的路由

在Express中，路由指的是客户端的请求与服务器处理函数之间的映射关系。
Express中的路由分3 部分组成，分别是请求的类型、请求的URL 地址、处理函数，格式如下：

app.METHOD(PATH , HANDLER)
// METHOD 请求的类型 可以是get / post
// PATH  请求的URL地址
// HANDOD 处理函数

1.4Express中的路由的例子

const express = require('express')

const app = express()

// 挂载路由
// 匹配 GET 请求 ， 且请求 URL 为 / 
app.get('/' , (req , res)=>{
   
    res.send('hello world')
})

// 匹配 POST 请求 ， 且请求 URL 为 / 
app.post('/' , (req , res)=>{
   
    res.send('Post Request')
})

app.