Express

最新推荐文章于 2024-03-29 05:46:31 发布

清辞-

最新推荐文章于 2024-03-29 05:46:31 发布

阅读量222

点赞数 2

分类专栏： node 文章标签：前端

本文链接：https://blog.csdn.net/hccccccccccccc/article/details/119010335

版权

node 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1初识Express

Express是基于Node.js平台，快速，开放，极简的Web开发框架。通俗的来讲，Express的作用和Node.js内置的HTTP模块类似，本质上是一个第三方的包，提供了快速创建Web服务器的方法。

Express的中文官网 Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网 (expressjs.com.cn)

需要注意的三个问题

不使用Express也可以创建Web服务器，可以通过原生HTTP创建
HTTP开发效率第，因此使用Express提高开发效率
http和Express的关系就类似于Web API和jQuery的关系

// 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(3000, () => {
    console.log('express server running at http://127.0.0.1')
})

托管静态资源

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

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

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

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

就比如第四行表示我们可以通过IP地址，访问clock目录下的所有文件。此时注意的是访问时不需要加clock.但是第三行代码挂载路径前缀，说明我们必须通过files/才能访问到对应的文件。

就比如默认访问的是127.0.0.1:8000 省略了clock目录下的文件。

访问的是127.0.0.1:8000/files/ 则就是访问files目录下的文件

2Express路由

什么是路由？

路由就是一种映射关系。是指客户端的请求与服务器处理函数之间的映射关系。

Express的路由分为三部分请求的类型，请求的URL地址，处理函数。

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

// 挂载路由
app.get('/', (req, res) => {
    res.send('hello world.')
})
app.post('/', (req, res) => {
    res.send('Post Request.')
})

app.listen(8000, () => {
    console.log('http://127.0.0.1')
})

每当一个请求到达服务器之后，需要先经过路由的匹配，只有匹配成功之后，才会调用对应的处理函数。在匹配时，会按照路由的顺序进行匹配，如果请求类型和请求的URL匹配成功，则Express会将这次请求，转交给对应的function函数进行处理。

按照定义的先后顺序进行匹配，请求类型和请求的URL同时匹配成功，才会调用对应的处理函数.

3Express中间件

中间件指业务流程的中间处理环节，当一个请求到达Express的服务器之后，可以连续调用多个中间件，从而对这次请求进行预处理。

中间件本质上是一个function处理函数，中间件函数的形参列表中，必须包含next参数，而路由处理函数中只包含req和res

因此next函数是实现多个中间件连续调用的关系，它表示把流转关系转交给下一个中间件或路由

定义中间件用app.use方法，定义多个连续的全局中间件，按照定义的先后顺序依次执行，不使用app.use定义的中间件称为局部生效的中间件。

中间件的5个注意事项

一定要在路由之前注册中间件，要么用app.use要么定义中间件函数
客户端发送过来的请求，可以连续调用多个中间件进行处理
执行完中间件的业务代码之后，不要忘记调用Next函数
为了防止代码逻辑混乱，调用next函数后不要再写额外的代码
连续调用多个中间件时，多个中间件之间，共享req和res对象

中间件分为5大类

应用级别分成两大类，全局中间件和局部中间件，代码如下所示，唯一的不同就是，局部中间件实际上顶一个中间件函数，在路由中引入这个函数。

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

// 定义第一个全局中间件，应用级别的中间件，是全局中间件
app.use((req, res, next) => {
  console.log('调用了第1个全局中间件')
  next()
})
// 定义第二个全局中间件
app.use((req, res, next) => {
  console.log('调用了第2个全局中间件')
  next()
})

// 定义一个路由
app.get('/user', (req, res) => {
  res.send('User page.')
})

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

const express = require('express')
    // 创建 express 的服务器实例
const app = express()

// 1. 定义中间件函数，局部中间件
const mw1 = (req, res, next) => {
    console.log('调用了局部生效的中间件')
    next()
}

// 2. 创建路由
app.get('/', mw1, (req, res) => {
    res.send('Home page.')
})
app.get('/user', (req, res) => {
    res.send('User page.')
})

// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(8000, function() {
    console.log('Express server running at http://127.0.0.1')
})

值得注意的是mw1这个中间件只在get这个路由中生效，因此我们称之为局部生效的中间件

路由级别下面介绍一种模块化路由的操作。模拟创建路由模块，导入express并且创造路由对象，挂载具体的路由，并且向外导出路由对象。

// 这是路由模块
// 1. 导入 express
const express = require('express')
// 2. 创建路由对象
const router = express.Router()

// 3. 挂载具体的路由
router.get('/user/list', (req, res) => {
  res.send('Get user list.')
})
router.post('/user/add', (req, res) => {
  res.send('Add new user.')
})

// 4. 向外导出路由对象
module.exports = router

那么我们可以在主代码中，引入路由模块03.router 并且为路由模块调用中间件，进行预处理。打印出时间，并且用next导出，下一步调用app.use方法注册路由模块。只不过是应用级别的中间件是绑定到app实例上，路由级别中间件绑定到router实例上

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

// app.use('/files', express.static('./files'))

// 1. 导入路由模块
const router = require('./03.router')
router.use(function(req, res, next) {
        console.log('Time:', Date.now())
        next()
    })
    // 2. 注册路由模块
app.use('/api', router)

// 注意： app.use() 函数的作用，就是来注册全局中间件

app.listen(8000, () => {
    console.log('http://127.0.0.1')
})

错误级别

// 导入 express 模块
const express = require('express')
    // 创建 express 的服务器实例
const app = express()

// 1. 定义路由
app.get('/', (req, res) => {
    // 1.1 人为的制造错误
    throw new Error('服务器内部发生了错误！')
        //res.send('Home page.')
})

// 2. 定义错误级别的中间件，捕获整个项目的异常错误，从而防止程序的崩溃
app.use((err, req, res, next) => {
    console.log('发生了错误！' + err.message)
    res.send('Error：' + err.message)
})

// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(80, function() {
    console.log('Express server running at http://127.0.0.1')
})

用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题。必须有四个参数err,req,res,next。其中错误级别的中间件必须注册在所有路由之后！

Express内置。Express内置了3个常用的中间件，express.static快速托管静态资源的内置中间件；express.json解析JSON格式的请求体数据；express.urlencoded解析URL-encoded格式请求体数据。

// 导入 express 模块
const express = require('express')
    // 创建 express 的服务器实例
const app = express()

// 注意：除了错误级别的中间件，其他的中间件，必须在路由之前进行配置
// 通过 express.json() 这个中间件，解析表单中的 JSON 格式的数据
app.use(express.json())
    // 通过 express.urlencoded() 这个中间件，来解析 表单中的 url-encoded 格式的数据
app.use(express.urlencoded({ extended: false }))

app.get('/user', (req, res) => {
    // 在服务器，可以使用 req.body 这个属性，来接收客户端发送过来的请求体数据
    // 默认情况下，如果不配置解析表单数据的中间件，则 req.body 默认等于 undefined
    console.log(req.body)
    res.send('ok')
})

app.post('/book', (req, res) => {
    // 在服务器端，可以通过 req,body 来获取 JSON 格式的表单数据和 url-encoded 格式的数据
    console.log(req.body)
    res.send('ok')
})

// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(8000, function() {
    console.log('Express server running at http://127.0.0.1')
})

上述代码很好理解，无疑就是get和post请求。对个get请求来说，一般都是由前端传入几个json格式的参数，因此在传入后，一定要声明express.json()这个中间件，才能使得req.body这个请求体数据中有值，如果不说明的话，默认为是undefined。然后对于post请求来说，一般都是直接通过x-www-form-urlencoded的形式进行传递，所以也要声明对应的中间件，由此可得中间件的重要性。

自定义中间件。我们可以手动模拟一个类似于express.urlencoded这样的中间件，来解析POST提交到服务器的表单数据。定义中间件，监听req的data事件，监听req的end事件，使用querystring拨快解析请求体数据，将解析出来的数据对象挂载到req.body上

// 导入 Node.js 内置的 querystring 模块
const qs = require('querystring')

const bodyParser = (req, res, next) => {
  // 定义中间件具体的业务逻辑
  // 1. 定义一个 str 字符串，专门用来存储客户端发送过来的请求体数据
  let str = ''
  // 2. 监听 req 的 data 事件
  req.on('data', (chunk) => {
    str += chunk
  })
  // 3. 监听 req 的 end 事件
  req.on('end', () => {
    // 在 str 中存放的是完整的请求体数据
    // console.log(str)
    // TODO: 把字符串格式的请求体数据，解析成对象格式
    const body = qs.parse(str)
    req.body = body
    next()
  })
}

module.exports = bodyParser


// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()

// 1. 导入自己封装的中间件模块
const customBodyParser = require('./14.custom-body-parser')
// 2. 将自定义的中间件函数，注册为全局可用的中间件
app.use(customBodyParser)

app.post('/user', (req, res) => {
  res.send(req.body)
})

// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(80, function () {
  console.log('Express server running at http://127.0.0.1')
})

4使用Express写接口

上面当我们发送GET和POST请求时都是使用的是app下的相关方法，所以我们可以自定义一个路由模块，在路由模块中模拟GET和POST请求。以下为路由模块，并将接口向外暴露为router

const express = require('express')
const router = express.Router()

// 在这里挂载对应的路由
router.get('/get', (req, res) => {
  // 通过 req.query 获取客户端通过查询字符串，发送到服务器的数据
  const query = req.query
  // 调用 res.send() 方法，向客户端响应处理的结果
  res.send({
    status: 0, // 0 表示处理成功，1 表示处理失败
    msg: 'GET 请求成功！', // 状态的描述
    data: query, // 需要响应给客户端的数据
  })
})

// 定义 POST 接口
router.post('/post', (req, res) => {
  // 通过 req.body 获取请求体中包含的 url-encoded 格式的数据
  const body = req.body
  // 调用 res.send() 方法，向客户端响应结果
  res.send({
    status: 0,
    msg: 'POST 请求成功！',
    data: body,
  })
})

// 定义 DELETE 接口
router.delete('/delete', (req, res) => {
  res.send({
    status: 0,
    msg: 'DELETE请求成功',
  })
})

module.exports = router

写接口的步骤导入express->创建服务器实例->配置解析表单数据的中间件

const express = require('express')
    // 创建服务器实例
const app = express()
// 配置解析表单数据的中间件
app.use(express.urlencoded({ extended: false }))
// 导入路由模块
const router = require('./16.apiRouter')
    // 把路由模块，注册到 app 上
app.use('/api', router)

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

以上的GET和POST请求是有问题的，原因是它们不能支持跨域请求，也就是说我在本地创建了一个服务器127.0.0.1之后，我在页面中用file协议打开一个网页，想在这个网页上向服务器发送GET和POST请求是不允许的。因为存在跨域问题。所以在此我来讲跨域的第二个解决方法CORS。第一个解决方法JSONP在前面已经讲过了。不在进行过多的叙述。

<!--
 * @Author: your name
 * @Date: 2021-07-27 15:06:24
 * @LastEditTime: 2021-07-28 11:18:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \node.js\day4第6章2小节-第7章1小节）\day4\code\17.测试接口跨域问题.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
</head>

<body>
    <button id="btnGET">GET</button>
    <button id="btnPOST">POST</button>
    <button id="btnDelete">DELETE</button>
    <button id="btnJSONP">JSONP</button>

    <script>
        $(function() {
            // 1. 测试GET接口
            $('#btnGET').on('click', function() {
                    $.ajax({
                        type: 'GET',
                        url: 'http://127.0.0.1:8000/api/get',
                        data: {
                            name: 'zs',
                            age: 20
                        },
                        success: function(res) {
                            console.log(res)
                        },
                    })
                })
                // 2. 测试POST接口
            $('#btnPOST').on('click', function() {
                $.ajax({
                    type: 'POST',
                    url: 'http://127.0.0.1:8000/api/post',
                    data: {
                        bookname: '水浒传',
                        author: '施耐庵'
                    },
                    success: function(res) {
                        console.log(res)
                    },
                })
            })

            // 3. 为删除按钮绑定点击事件处理函数
            $('#btnDelete').on('click', function() {
                $.ajax({
                    type: 'DELETE',
                    url: 'http://127.0.0.1:8000/api/delete',
                    success: function(res) {
                        console.log(res)
                    },
                })
            })

            // 4. 为 JSONP 按钮绑定点击事件处理函数
            $('#btnJSONP').on('click', function() {
                $.ajax({
                    type: 'GET',
                    url: 'http://127.0.0.1:8000/api/jsonp',
                    dataType: 'jsonp',
                    success: function(res) {
                        console.log(res)
                    },
                })
            })
        })
    </script>
</body>

</html>

上述代码在Postman中进行接口测试，测到的结果是 get post 请求可以正常执行。

说明我们的代码写的没有问题。那么我们再来看一看在网页中的访问情况。

说明出现了跨域问题，那么我们就来解决它。将下面代码插入到导入路由模块之前即可。

// 一定要在路由之前，配置 cors 这个中间件，从而解决接口跨域的问题
const cors = require('cors')
app.use(cors())

先来讲一讲什么是CORS把。

全名是Cross-Origin Resource Sharing由一系列HTTP响应头组成。这些响应头决定浏览器是否组织前端JS代码跨域获取资源。

浏览器的默认同源安全策略会阻止网页跨域获得数据，但如果接口服务器配置了CORS相关的响应头，就可以接触跨域访问限制。并且CORS一定是在服务器端进行配置的。客户端浏览器无需配置。介绍三种响应头Access-Control-Allow-Origin(Headers)(Methods)

客户端在请求CORS接口时，根据请求方式和请求头的不同，可以将CORS的请求分为两大类。简单请求和预检请求。

区别在于我在上述代码中定义了一个DELETE接口，并且发送了DELETE请求。那么就会产生预检请求。简单请求只会发生一次请求，预检请求会发生两次请求。下图是在火狐浏览器中运行DELETE接口后的相关信息。

看到这里，我们来回想以下JSONP是什么？

浏览器通过script标签的src属性，请求服务器上的数据，同时服务器返回一个函数的调用，这种请求数据的方式叫做JSONP。值得注意的是JSONP不属于真正的Ajax请求，因为它没有使用XMLHttpRequest这个对象。并且JSONP仅支持GET请求，不支持POST PUT和DELETE请求。

就好比上面代码中已经配置了CORS跨域资源共享，为了防止冲突，必须在配置CORS中间件之前声明JSONP的接口，否则JSONP接口会被处理为开启了CORS的接口。下面的代码已经配置了JSONP的格式。

//必须在配置 cors 中间件之前， 配置 JSONP 的接口
app.get('/api/jsonp', (req, res) => {
    // TODO: 定义 JSONP 接口具体的实现过程
    // 1. 得到函数的名称
    const funcName = req.query.callback
        // 2. 定义要发送到客户端的数据对象
    const data = { name: 'zs', age: 22 }
        // 3. 拼接出一个函数的调用
    const scriptStr = `${funcName}(${JSON.stringify(data)})`
        // 4. 把拼接的字符串，响应给客户端
    res.send(scriptStr)
})

获取客户端发送过来的回调函数的名字，得到要通过JSONP形式发送给客户端的数据，拼接出一个函数调用的字符串，响应给客户端的标签进行解析执行。

以上便是对Express部分知识点的总结梳理。

清辞-

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Express

目录1初识Express2Express路由3Express中间件4使用Express写接口1初识ExpressExpress是基于Node.js平台，快速，开放，极简的Web开发框架。通俗的来讲，Express的作用和Node.js内置的HTTP模块类似，本质上是一个第三方的包，提供了快速创建Web服务器的方法。Express的中文官网Express - 基于 Node.js 平台的 web 应用开发框架 - Express 中文文档 | Express 中文网 (exp.
复制链接

扫一扫