Nodejs3day(express简介,express创建基本Web服务器，托管静态资源，nodemon下载及出现的问题，中间件，编写GET，POST，JSONP接口）

最新推荐文章于 2023-03-21 00:51:21 发布

荻风溪畔

最新推荐文章于 2023-03-21 00:51:21 发布

阅读量285

点赞数

分类专栏： nodejs web笔记笔记文章标签：前端服务器中间件

本文链接：https://blog.csdn.net/qq_44976531/article/details/125982258

版权

笔记同时被 3 个专栏收录

45 篇文章 0 订阅

订阅专栏

web笔记

37 篇文章 0 订阅

订阅专栏

nodejs

3 篇文章 0 订阅

订阅专栏

Express初涉

express官网:http://www.expressjs.com.cn/
在项目所处的目录中，运行如下的终端命令，即可将 express 安装到项目中使用：

安装

npm i express@4.17.1

创建基本的 Web 服务器

样例代码

// 1.导入express包
const express=require('express')
// 2. 创建web服务器
const app =express()
// 4.监听get请求
// 参数1：客户端请求的URL地址   参数2：请求对应的处理函数 req:请求对象(包含了与请求相关的属性和方法)  res：响应对象(包含了与响应相关的属性与方法)
app.get('/user',function (req,res) {
  // 向客户端发送JSON对象
  res.send({name:'zs',age:'20',gender:'男'})
})
// 5.监听post请求
// 参数1：客户端请求的URL地址   参数2：请求对应的处理函数 req:请求对象(包含了与请求相关的属性和方法)  res：响应对象(包含了与响应相关的属性与方法)
app.post('/user',function (req,res) {
  // 向客户端发送文本内容
  res.send('请求成功')
})
// 6.通过 res.send() 方法，可以把处理好的内容，发送给客户端：
app.get('/',(req,res)=>{
  // 示例：http://127.0.0.1:8080/?user=卷王&age=22   
  // 通过req.query可以获取到客户端发送过来的查询参数
  console.log(req.query)   //{ user: '卷王', age: '22' }
  // 可以通过re.query.user req.query.age来访问对象的属性
  res.send(req.query)
})
// 7.通过req.params对象可以访问到URL中,通过:匹配到的动态参数
app.get('/user/:id/:username',(req,res)=>{
console.log(req.params) //{ id: '4', username: '6' }
res.send(req.params)
})
// 3.调用app.listen(端口号，启动成功后的回调函数)，启动服务器
app.listen(8080, () => {
    console.log('express server running at http://127.0.0.1:8080')
  })

postman测试样例：

在这里插入图片描述

nodemon

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

终端中下载命令，将 nodemon 安装为全局可用的工具:

npm install -g nodemon

下载后可以将node命令替换为nodemon命令，使用nodemon app.js来启动项目，在更改代码保存后，nodemon监听到后，项目自动重启。

下载完成后的问题

在通过 nodemon .\使用express创建最基本的服务器.js出现报错。

nodemon : 无法加载文件 C:\Users\xxx\xxxxx\Roaming\npm\nodemon.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。

解决

1.有人说用npx解决，(我不是很了解npx的原理，也试过对我没用)
2.通过命令行设置
(1)以管理员身份运行PowerShell(2)输入命令

set-ExecutionPolicy RemoteSigned

(3)选择Y
在这里插入图片描述
(4)查看是否修改成功

get-ExecutionPolicy

(5)vscode运行验证
04bb17376.png)
运行成功，更改代码保存后，nodemon监听到后，项目自动重启。perfect!!!

express.static() (托管静态资源)

示例

// 1.导入express包
const express=require('express')
// 2. 创建web服务器
const app =express()
// 4.监听get请求
// 参数1：客户端请求的URL地址   参数2：请求对应的处理函数 req:请求对象(包含了与请求相关的属性和方法)  res：响应对象(包含了与响应相关的属性与方法)
app.use(express.static('./clock'))
app.use(express.static('./publics'))   //public文件夹名好像不能随便用
// express.static()函数会根据目录的添加顺序查找所需的文件
// 3.调用app.listen(端口号，启动成功后的回调函数)，启动服务器
app.listen(8080, () => {
    console.log('express server running at http://127.0.0.1:8080')
  })

访问publics下的图片文件：
在这里插入图片描述
注意：

Express 在指定的静态目录中查找文件，并对外提供资源的访问路径。因此，存放静态文件的目录名不会出现在 URL 中。

托管多个静态资源目录

访问静态资源文件时，express.static() 函数会根据目录的添加顺序查找所需的文件。（也就是说目录下有同一文件名时，会优先访问先添加的目录中的同名文件！）

挂载路径前缀

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

app.use('/abc',express.static('./publics'))

这样可以通过带有/abc前缀地址来访问publics目录中的文件了：

http://127.0.0.1:8080/abc/2.png

路由匹配过程

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

简单的用法

把路由挂载到 app 上，示例代码如下：

在这里插入图片描述

模块化路由

为了方便对路由进行模块化的管理，Express不建议将路由直接挂载到 app 上，而是推荐将路由抽离为单独的模块。
将路由抽离为单独模块的步骤如下：

创建路由模块对应的.js文件
调用express.Router()函数创建路由对象
向路由对象上挂载具体的路由
使用module.exports向外共享路由对象
使用app.use()函数注册路由模块

创建路由模块

4router模块.js

// 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

调用路由模块

3路由模块使用.js

const express=require('express')
const app=express()
// 1导入路由模块
const router=require('./4router模块.js')
// 2注册路由模块
app.use('/api',router)
// 3启动服务器
app.listen(8080, () => {
    console.log('express server running at http://127.0.0.1:8080')
  })

postman测试（postman有时候会出错~）
在这里插入图片描述

中间件(Middleware)

Express 的中间件，本质上就是一个function 处理函数，Express 中间件的格式如下：
在这里插入图片描述 注意：中间件函数的形参列表中，必须包含 next 参数。而路由处理函数中只包含 req 和 res。

next 函数的作用

next函数是实现多个中间件连续调用的关键，它表示把流转关系转交给下一个中间件或路由。
在这里插入图片描述

一个全局生效的中间件函数示例

const express=require('express')
const app=express()
//1.定义mw这个中间件
const mw=function (req,res,next) {
    console.log('这是最简单的中间件函数')
    // 流转关系，转交给下一个中间件或者路由
    next()
}
// 2.将mw注册为全局生效的中间件
app.use(mw)
// 3.挂载具体的路由
app.get('/',(req,res)=>{
    console.log('调用了这个/路由')
    res.send('Home page.')
})
app.get('/user',(req,res)=>{
    console.log('调用了这个/user路由')
    res.send('User page.')
})
app.listen('8080',()=>{
    console.log('express server running at http://127.0.0.1:8080')
})

这个代码可以通过postman进行测试

定义全局中间件的简化形式

换成箭头函数岂不是更简化

//全局生效的中间件
app.use(function(req,res,next){
console.log('全局生效的中间件')
next()
})

可以使用 app.use() 连续定义多个全局中间件。客户端请求到达服务器之后，会按照中间件定义的先后顺序依次进行调用

局部生效的中间件调用方式

// 1. 定义中间件函数
const mw1 = (req, res, next) => {
  console.log('调用了局部生效的中间件')
  next()
}
// 2. 创建路由
app.get('/', mw1, (req, res) => {
  res.send('Home page.')
})

使用多个局部中间件：

app.get('/', [mw1, mw2], (req, res) => {
  res.send('Home page.')
})
//两种写法是“完全等价”的
app.get('/', mw1, mw2, (req, res) => {
  res.send('Home page.')
})

中间件的变量共享(req,res)

多个中间件之间，共享同一份 req 和 res。基于这样的特性，我们可以在上游的中间件中，统一为 req 或 res 对象添加自定义的属性或方法，供下游的中间件或路由进行使用。
在这里插入图片描述

中间件的5个使用注意事项

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

错误级别的中间件

错误级别中间件的作用：专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题。
格式：错误级别中间件的 function 处理函数中，必须有 4 个形参，形参顺序从前到后，分别是 (err, req, res, next)。
在这里插入图片描述

Express内置的中间件

自 Express 4.16.0 版本开始，Express 内置了 3 个常用的中间件，极大的提高了 Express 项目的开发效率和体验：
express.static 快速托管静态资源的内置中间件，例如： HTML 文件、图片、CSS 样式等（无兼容性）
express.json 解析 JSON 格式的请求体数据（有兼容性，仅在 4.16.0+ 版本中可用）
express.urlencoded 解析 URL-encoded 格式的请求体数据（有兼容性，仅在 4.16.0+ 版本中可用）
内置中间件直接在代码中引入成全局中间件即可

// 导入 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.post('/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(8080, function () {
  console.log('Express server running at http://127.0.0.1:8080')
})

可以通过postman来测试代码(如图测试 urlencoded())
在这里插入图片描述

第三方的中间件

非 Express 官方内置的，而是由第三方开发出来的中间件，叫做第三方中间件。在项目中，大家可以按需下载并配置第三方中间件，从而提高项目的开发效率。
例如：在 express@4.16.0 之前的版本中，经常使用body-parser这个第三方中间件，来解析请求体数据。使用步骤如下：

运行 npm install body-parser 安装中间件
使用 require 导入中间件
调用 app.use() 注册并使用中间件
注意：Express内置的express.urlencoded中间件，就是基于body-parser这个第三方中间件进一步封装出来的。
演示代码：用postman验证可行

// 导入 express 模块
const express = require('express')
// 创建 express 的服务器实例
const app = express()
// 1. 导入解析表单数据的中间件 body-parser
const parser = require('body-parser')
// 2. 使用 app.use() 注册中间件
app.use(parser.urlencoded({ extended: false }))
// app.use(express.urlencoded({ extended: false }))
app.post('/user', (req, res) => {
  // 如果没有配置任何解析表单数据的中间件，则 req.body 默认等于 undefined
  console.log(req.body)
  res.send('ok')
})
// 调用 app.listen 方法，指定端口号并启动web服务器
app.listen(8080, function () {
  console.log('Express server running at http://127.0.0.1:8080')
})

自定义中间件

自己手动模拟一个类似于 express.urlencoded 这样的中间件，来解析 POST 提交到服务器的表单数据。
实现步骤：

定义中间件
监听 req 的 data 事件
监听 req 的 end 事件
使用 querystring 模块解析请求体数据
将解析出来的数据对象挂载为 req.body
将自定义中间件封装为模块

14.custom-body-parser.js

// 导入 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

调用自定义模块化的中间件.js

// 导入 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)
  console.log(req.body)
})

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

postman测试成功

编写接口

test.js

// 2.创建API路由模块
const express=require('express')
const router=express.Router()
router.get('/get',(req,res)=>{ 
  // 通过 req.query 获取客户端通过查询字符串，发送到服务器的数据
    const query=req.query
    // res.header("Access-Control-Allow-Origin", "*");
res.send({
    status:0,   //0 表示处理成功, 
    msg:'GET 请求成功！',  //状态的描述
    data:query,     //需要响应给客户端的数据
    })
})

router.post('/post',(req,res)=>{
    const body =req.body
    res.send({
        status:0,
        msg:'POST 请求成功！',
        data:body,
    })
})

router.delete('/delete',(req,res)=>{   //注意：形参req和res的顺序不能反
    res.send({
        status:0,
        msg:'DELETE请求成功',
    })
})

module.exports=router

本地测试接口CORS解决跨域问题

cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。
使用步骤分为如下 3 步：

运行 npm install cors 安装中间件
使用 const cors = require('cors') 导入中间件
在路由之前调用 app.use(cors()) 配置中间件(一定要在路由之前，配置 cors 这个中间件，从而解决接口跨域的问题)

CORS 响应头部 - Access-Control-Allow-Origin
在这里插入图片描述

本地测试接口JSONP解决跨域问题

获取客户端发送过来的回调函数的名字
得到要通过 JSONP 形式发送给客户端的数据
根据前两步得到的数据，拼接出一个函数调用的字符串
把上一步拼接得到的字符串，响应给客户端的

实现 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)
  })

测试接口

invoketest.js

const express=require('express')

const app=express()

// 获取post数据需要获取这个值  
app.use(express.urlencoded({extended:false}))

// 必须在配置 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)
  })
  
// 一定要在路由之前，配置 cors 这个中间件，从而解决接口跨域的问题
const cors=require('cors')
app.use(cors()) 

// 导入注册路由模块
const apiRouter=require('./test.js')
app.use('/api',apiRouter)


app.listen(8080,function(){
console.log('express server running at http://127.0.0.1:8080')
})

testApi.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery.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({
                    method: 'GET',
                    url: 'http://127.0.0.1:8080/api/get',
                    data: {name: 'zs', age: 20},
                    success: function (res) {
                        console.log(res)
                    }

                })
            })

            // 2.测试POST接口
            $('#btnPOST').on('click', function () {
                $.ajax({
                    method: 'POST',
                    url: 'http://127.0.0.1:8080/api/post',
                    data: {name: '我不知道', age: 12},
                    success: function (res) {
                        console.log(res)
                    }
                })
            })

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

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

        })

    </script>
</body>

</html>

荻风溪畔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Nodejs3day(express简介,express创建基本Web服务器，托管静态资源，nodemon下载及出现的问题，中间件，编写GET，POST，JSONP接口）

express官网:http://www.expressjs.com.cn/在项目所处的目录中，运行如下的终端命令，即可将 express 安装到项目中使用：创建基本的 Web 服务器样例代码postman测试样例：在编写调试 Node.js 项目的时候，如果修改了项目的代码，则需要频繁的手动 close 掉，然后再重新启动，非常繁琐。现在，我们可以使用 nodemon（https://www.npmjs.com/package/nodemon）这个工具，它能够监听项目文件的变动，当代码被
复制链接

扫一扫