首页 > 编程语言 >2024-03-08-Nodejs(2-Express)

2024-03-08-Nodejs(2-Express)

时间：2024-03-14 10:45:30浏览次数：27  
标签：03 req const res 08 express 中间件 2024 app

2.Express

​ 基于 Node.js 平台，快速、开放、极简的 Web 开发框架，Express 是用于快速创建服务器的第三方模块。

2.1 基本使用

# 安装express
npm install express

const express = require("express");
// 创建 web 服务器
const app = express();

// 监听客户端的 GET 和 POST 请求，并向客户端响应具体的内容
app.get("/user", (req, res) => {
  res.send({ name: "zs", age: 20, gender: "男" });
});
app.post("/user", (req, res) => {
  res.send("请求成功");
});

app.get("/", (req, res) => {
  // 通过 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);
});

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

2.2 托管静态资源

  • 通过 express.static() 方法可创建静态资源服务器，向外开放访问静态资源。
  • Express 在指定的静态目录中查找文件，并对外提供资源的访问路径，存放静态文件的目录名不会出现在 URL 中
  • 访问静态资源时，会根据托管顺序查找文件
  • 可为静态资源访问路径添加前缀
const express = require("express");
const app = express();

app.use(express.static("public"));

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

# public 
#	|------ css
#	|		|-- a.css
#	|-------js
#	|-------images
#
# 访问http://127.0.0.1:8080/css/a.csss"
# 返回

body{
    margin: 0 ;
    padding: 0;
}

如果需要托管多个静态资源目录，多次调用express.static即可

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

挂载前缀托管

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

/*
    可直接访问 public, files 目录下的静态资源
    http://localhost:3000/images/bg.jpg
    http://localhost:3000/css/style.css
    http://localhost:3000/js/login.js

    通过带有 /zheng 前缀的地址访问 zheng 目录下的文件
    http://localhost:8080/zheng/images/logo.png
*/

2.3 热加载 - nodemon

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

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

npm i -g nodemon

使用

nodemon js文件名

2.4 Express 路由

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

app.METHOD(PATH,HANDLER)

创建路由模块 + 注册路由模块：

router.js

const express = require('express')
// 创建路由对象
const router = express.Router()

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

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

app.js

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

const app = express()

// 注册路由模块，添加访问前缀
app.use('/api', router)

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

2.5 Express中间件

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

image-20240308162654260
  • 中间件是指流程的中间处理环节
  • 服务器收到请求后，可先调用中间件进行预处理
  • 中间件是一个函数，包含 req, res, next 三个参数
  • next() 参数把流转关系交给下一个中间件或路由

2.5.1 中间件注意事项：

  • 在注册路由之前注册中间件（错误级别中间件除外）
  • 中间件可连续调用多个
  • 别忘记调用 next() 函数
  • next() 函数后别写代码
  • 多个中间件共享 req、 res对象

2.5.2 全局生效的中间件

​ 客户端发起任何请求，到达服务器之后，都会触发的中间件，叫做全局生效的中间件。

通过 app.use() 定义的中间件为全局中间件

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

const midware = (req, res, next) => {
    console.log("这是一个中间件");
    // 执行完上面的语句之后，调用next()进入下一个中间键或者路由
    next();
};

// 使用use注册中间件
app.use(midware);

app.use(express.static("public"));
app.get("/", (req, res) => {
    res.end("hello");
});

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

输出结果

D:\03_Learn\12_node>nodemon 15_express_router.js
[nodemon] 3.1.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node 15_express_router.js`
express server running at http://127.0.0.1
这是一个中间件

2.5.3 简化全局中间件

可以使用app.use()直接定义中间件函数

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')
})

2.5.4 中间件的作用

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

image-20240308170930777

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

const midware = (req, res, next) => {
  console.log("这是一个中间件");
  req.startTime = moment().format("YYYY-MM-DD HH:mm:ss");
  next();
};

const midware02 = (req, res, next) => {
  console.log("这是第二个中间件" + req.startTime);
  next();
};

app.use(midware);
app.use(midware02);

app.use(express.static("public"));
app.get("/", (req, res) => {
  console.log(req.startTime);
  res.end(req.startTime);
});

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

访问http://127.0.0.1/，输出结果

D:\03_Learn\12_node>nodemon 16_express_midware.js
[nodemon] 3.1.0
[nodemon] to restart at any time, enter `rs`   
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json 
[nodemon] starting `node 16_express_midware.js`
express server running at http://127.0.0.1
这是一个中间件
这是第二个中间件2024-03-08 17:13:50
2024-03-08 17:13:50

2.5.5 局部生效的中间件

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

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

const mw2 = (req, res, next) => {
  console.log('调用了第二个局部生效的中间件')
  next()
}

// 两种定义局部中间件的方式
app.get('/hello', mw2, mw1, (req, res) => res.send('hello page.'))
app.get('/about', [mw1, mw2], (req, res) => res.send('about page.'))

app.get('/user', (req, res) => res.send('User page.'))

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

访问http://127.0.0.1/hello和http://127.0.0.1/about，均会出现如下效果

D:\03_Learn\12_node>nodemon 17_express_midware_local.js
[nodemon] 3.1.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node 17_express_midware_local.js`
Express server running at http://127.0.0.1
调用了第二个局部生效的中间件
调用了第一个局部生效的中间件

访问http://127.0.0.1/user则不会出现上述效果，证明了局部生效的中间件

2.5.6 中间件分类

  1. 应用级别的中间件

    通过 app.use() 或 app.get() 或 app.post() ，绑定到 app 实例上的中间件

  2. 路由级别的中间件

    绑定到 express.Router() 实例上的中间件，叫做路由级别的中间件。用法和应用级别中间件没有区别。应用级别中间件是绑定到 app 实例上，路由级别中间件绑定到 router 实例上

    const app = express()
const router = express.Router()

router.use(function (req, res, next) {
    console.log(1)
    next()
})

app.use('/', router)

  3. 错误级别的中间件

    作用：用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃的问题

    • 错误级别中间件的处理函数中，必须有 4 个形参，形参顺序从前到后分别是 (err, req, res, next) 。

    • 错误级别的中间件必须注册在所有路由之后

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

app.get('/', (req, res) => {
    throw new Error('服务器内部发生了错误！')
    res.send('Home page.')
})

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

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

  4. 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+ 版本中可用）
    //配置解析application/json格式数据的内置中间件
app.use(express.json())

// 配置解析application/x-www-urlencoded格式数据的内置中间件
app.use(express.urlencoded({ extended: false }))

  5. 第三方中间件

    非 Express 官方内置的，而是由第三方开发出来的中间件，叫做第三方中间件。

2.6 CORS 跨域资源共享

2.6.1 CROS中间件解决跨域

  • 安装中间件：npm install cors
  • 导入中间件：const cors = require('cors')
  • 配置中间件：app.use(cors())

2.6.2 CORS

  • CORS（Cross-Origin Resource Sharing，跨域资源共享）解决跨域，是通过 HTTP 响应头决定浏览器是否阻止前端 JS 代码跨域获取资源
  • 浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如果接口服务器配置了 CORS 相关的 HTTP 响应头，就可解除浏览器端的跨域访问限制
  • CORS 主要在服务器端进行配置。客户端浏览器无须做任何额外的配置，即可请求开启了 CORS 的接口。
  • CORS 在浏览器中有兼容性。只有支持 XMLHttpRequest Level2 的浏览器，才能正常访问开启了 CORS 的服务端接口（例如：IE10+、Chrome4+、FireFox3.5+）。

2.6.3 CORS 常见响应头

Access-Control-Allow-Origin：制定了允许访问资源的外域 URL

res.setHeader('Access-Control-Allow-Origin', 'http://bruceblog.io')
res.setHeader('Access-Control-Allow-Origin', '*')

Access-Control-Allow-Headers

  • 默认情况下，CORS 仅支持客户端向服务器发送如下的 9 个请求头：Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type （值仅限于 text/plain、multipart/form-data、application/x-www-form-urlencoded 三者之一）
  • 如果客户端向服务器发送了额外的请求头信息，则需要在服务器端，通过 Access-Control-Allow-Headers 对额外的请求头进行声明，否则这次请求会失败！
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-Custom-Header')

Access-Control-Allow-Methods

  • 默认情况下，CORS 仅支持客户端发起 GET、POST、HEAD 请求。如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源，则需要在服务器端，通过 Access-Control-Alow-Methods 来指明实际请求所允许使用的 HTTP 方法
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, DELETE, HEAD')
res.setHEader('Access-Control-Allow-Methods', '*')

2.6.4 CORS 请求分类

简单请求

  • 请求方式：GET、POST、HEAD 三者之一
  • HTTP 头部信息不超过以下几种字段：无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width 、Content-Type（只有三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain）

预检请求

  • 请求方式为 GET、POST、HEAD 之外的请求 Method 类型
  • 请求头中包含自定义头部字段
  • 向服务器发送了 application/json 格式的数据

​ 在浏览器与服务器正式通信之前，浏览器会先发送 OPTION 请求进行预检，以获知服务器是否允许该实际请求，所以这一次的 OPTION 请求称为“预检请求”。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据

简单请求和预检请求的区别

  1. 简单请求：客户端与服务器之间只会发生一次请求
  2. 预检请求：客户端与服务器之间发生两次请求，第一次发送OPTION预检请求，预检请求成功后，再发送真正的请求

标签：03,req,const,res,08,express,中间件,2024,app
From： https://www.cnblogs.com/hasaki-yasuo/p/18072308

相关文章

  • 2024-03-11-Nodejs(4-大事件项目)
    4.大事件项目4.1项目初始化项目整体架构图大事件项目 |--- db | |---index.js |---router | |---user.js |---router_handler | |---user.js |---schema | |---user.js |---app.js |---config.js4.1.1创建项目新建api_server文件夹作为项目......
  • 联合省选 2024 - 未完成的。
    day1省流：炸了。开考通览题目。T1好像送，T2和T3都好神妙！！！迅速写T1发现过不了样例，然后发现读错了。然后发现有点难度，写到一半发现过不了样例，想了一会好像假了。上了个厕所回来发现题目又读错了！心脏骤停。然后赶紧rush了一下，没调多久就过了。此时已经过了2h了。额，然后我开......
  • 1089. 复写零c
    voidduplicateZeros(int*arr,intarrSize){int*temp=(int*)malloc(sizeof(int)*arrSize);inthead=0,index=0;while(head<arrSize&&index<arrSize){temp[head++]=arr[index++];if(arr[index-1]==0){if(he......
  • AcWing 503. 借教室（每日一题）
    原题链接：503.借教室-AcWing题库在大学期间，经常需要租借教室。大到院系举办活动，小到学习小组自习讨论，都需要向学校申请借教室。教室的大小功能不同，借教室人的身份不同，借教室的手续也不一样。 面对海量租借教室的信息，我们自然希望编程解决这个问题。我们需要处理接下来......
  • zzu2024 3月天梯赛选拔赛(A-F,I-K)
    zzu20243月天梯赛选拔赛(A-F,I-K)每题下面都写了abc上对应的原题1,Aabc148f思路就是求出A和T分别到树上某个点的最短路径长,只要T的路径小于A,T就不会被抓到,满足条件就更新A走过的路径长的最大值,注意最后答案要减1(自己想为什么)#include<bits/stdc++.h>usingname......
  • 2024年春招双选会感受
    今天参加了我们学校开的一个双选会，记录一下此刻的感受。我像是被打了一顿一样，感觉希望渺茫，能投的岗位不算多，首先主要肯定是我自身技术的问题。我回顾读研这将近两年的时间来，我变得没有之前自信了，对技术的不自信和对专业的不自信让我不能和人事对答如流。整体的感受是略微......
  • 2024省选游记
    游寄day-很多寒假集训快结束的时候，老师可能觉得我们太菜了，想给我们点打击，于是问我们去不去体验一下省选。但我们一听可以出去三天便以恬不知耻的心态报名了。。。并对成绩极为释然。day-不太多寒假集训结束，放假的时候和家长又商量了一下，本着能多一次经历的打算（害怕明年打......
  • 实验1朱笑雨202383310038
    #include<stdio.h>#include<stdlib.h>intmain(){printf("0\n");printf("<H>\n");printf("II\n");system("pause");return0;}#include<stdio.h>#include<stdl......
  • [20240312]sqlplus define数据类型问题.txt
    [20240312]sqlplusdefine数据类型问题.txt--//编写sql脚本遇到的问题，通过例子说明。1.环境：SCOTT@book>@ver1111PORT_STRING                   VERSION       BANNER------------------------------------------------------------------------......
  • [20240313]toad gather_plan_statistics执行计划相关问题.txt
    [20240313]toadgather_plan_statistics执行计划相关问题.txt--//自己现在已经很少使用toad,使用也是作为辅助功能,毕竟图形界面能更快的操作显示信息.--//昨天遇到一个问题,自己当时没有反映过来,浪费点时间,做一个记录避免以后再次犯浑.--//我一般在toad的sql编辑界面下尽可能看......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99