【Express】Express快速入门(详细图文)

最新推荐文章于 2023-10-17 20:59:23 发布
最新推荐文章于 2023-10-17 20:59:23 发布
阅读量311 收藏
点赞数
分类专栏： node.js 文章标签： 前端 node.js ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63779088/article/details/126333152
版权

Express快速入门

文章目录

安装Express

npm i express -g

使用时还会用到postman，建议先安装再食用(正常的postman为全英文版，想汉化可自行查找postman汉化包)

postman简单介绍

在这里插入图片描述

Express

Express是一个自身功能极简，完全是有路由和中间件构成的一个web开发框架：本质上说，一个express的应用就是在调用各种中间件。

nodemon

在调试node.js项目，修改了项目的代码以后，需要频繁的手动停掉

但是使用nodemon就可以在监测到我们修改了代码以后自动帮我们重启项目（类似于java的热部署）

使用npm安装nodemon

 npm i -g nodemon
res.end()

结束响应流程。用于在没有任何数据的情况下快速结束响应。

  • 参数可以是buffer对象、字符串
res.send()

发送HTTP响应

  • 参数可以是buffer对象、字符串、对象、数组
创建一个最基本的web服务器
// 导入express
const express = require('express')
// 创建web服务器
const app = express()

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

启动后在vscode中ctrl＋点击http://127.0.0.1

此处本来是http://127.0.0.1:80 但是由于80可以省略就变成了http://127.0.0.1

使用express监听GET和POST请求
// 导入express
const express = require('express')
// 创建web服务器
const app = express()

// 监听客户端的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)=> {
    // 调用express提供res.send()方法，向客户端相应一个json对象
    console.log(req);
    res.send(req.query)
})


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

使用postman
在这里插入图片描述

Express路由

路由是指服务器端如何响应特定端口的客户端请求。由一个URI(路径标识)和一个特定的HTTP方法(GET、POST等)组成的。

路由的定义结构：

app.METHOD(PATH， HANDLER)
路由的匹配机制

在这里插入图片描述

路由基础代码
// 导入express
const express = require('express')
// 创建web服务器
const app = express()

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


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

使用postman测试

在这里插入图片描述

发送状态码和状态信息
// 导入express
const express = require('express')
// 创建web服务器
const app = express()

app.get('/', (req,res) => {
  res.statusCode = 200;   // 设置响应状态码
  res.statusMessage = "ooookkkk";    // 设置响应状态信息
  res.end();  // 结束响应
})

app.listen(80, () => {
  console.log('serve running at http://localhost:80/');
})

postman测试

在这里插入图片描述

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

app.get('/', (req,res) => {
  res.cookie('name', 'ddd');  // 设置cookie
  res.end();  // 结束响应
})

app.listen(80, () => {
  console.log('serve running at http://localhost:80/');
})

postman测试

在这里插入图片描述

Express中间件

中间件和路由的区别就是有无next()参数

有点像vue的路由守卫里面的next()放行的意思

全局生效的中间件
app.use(function (req, res, next) {/*表示匹配任何路由*/
    console.log('简单中间件函数')
    next()/*表示匹配完成这个中间件就继续往下执行，转交给下一个中间件*/
})
局部生效的中间件
const nw = function (req, res,next) {
    console.log("我是中间件");
    next()
}
// nw中间件会影响这个路由
app.get('/', nw , (req,res) => {
  console.log('调用了/ ');
  res.send('homepage')
})
// nw中间件不会影响这个路由
app.get('/user', (req,res) => {
  console.log('调用了/user ');
  res.send('userpage')
})
路由中间件
app.get("/", function (req, res,next) {
    console.log("匹配成功");
    next()
})
错误级别的中间件

错误级别中间件作用：专门用来捕获整个项目中发生的异常错误，从而防止项目异常崩溃

app.get('/',function(){ //路由
	throw new Error('服务器内部错误')//自己抛出一个自定义错误
	res.send('home')	
})
app.use(function (err, req, res, next) {
    console.log('错误'+err.message)
   	res.send('错误'+err.message)
})
内置中间件
express.static

静态路由匹配或快速托管静态资源的内置中间件

app.use('/static',express.static("public"));
express.json()

解析表单中的json格式的数据

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

//通过express.json()这个中间件，解析表单中的json格式的数据
app.use(express.json())

app.post('/', (req,res) => {
    // 如果没有配置解析表单数据的中间件，则req.body默认等于underfined
  console.log(req.body);
  res.send('ok')
})

app.listen(80, () => {
  console.log('serve running at http://localhost:80/');
})
express.urlencoded()

解析url-encoded格式的请求体数据

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

//默认情况下，如果不配置解析表单数据的中间件，则req.body默认于undefined
app.use(express.urlencoded({extended:false}))


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

app.listen(80, () => {
  console.log('serve running at http://localhost:80/');
})
中间件的使用
// 导入express
const express = require('express')
// 创建web服务器
const app = express()

app.use(function (req, res, next) {/*表示匹配任何路由*/
    console.log('简单中间件函数')
    next()/*表示匹配完成这个中间件就继续往下执行，转交给下一个中间件*/
})

app.get('/', (req,res) => {
  console.log('调用了/ ');
  res.send('homepage')
})

app.listen(80, () => {
  console.log('serve running at http://localhost:80/');
})

postman调试

在这里插入图片描述

中间件的作用

在这里插入图片描述

特性：多个中间件之间共享同一份req和res

为方便使用，可在上游的中间件中统一为req或res添加自定义属性或方法，供下游中间件或路由使用

注意事项

要在路由之前注册中间件

中间件最后一定要调用next()

next()后面不能再写代码

连续调用多个中间件时，多个中间件之间共享req和res

Express编写接口

例子：

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

//导入路由模块
const router = require('./16apirouter')
//把路由注册到app
app.use('/api',router)

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

16apirouter.js

// 导入express
const express = require('express')

const router = express.Router()

//挂载对应路由
router.get('/get', (req,res) => {
    //通过req.query获取客户端通过查询字符串，发送到服务器的数据
    const query = req.query

    res.send({
        state:0,
        msg:'gey请求成功',
        data:query
    })
})

module.exports = router

基于CORS 跨域资源共享

解决接口跨域问题的方案主要有两种

① CORS（主流的解决方案，推荐使用）

② JSONP（有缺陷的解决方案：只支持 GET 请求）

使用 cors 中间件解决跨域问题

cors 是 Express 的一个第三方中间件。通过安装和配置 cors 中间件，可以很方便地解决跨域问题。

使用步骤分为如下 3 步：

①运行 npm install cors 安装中间件

npm i cors

②使用 const cors = require(‘cors’) 导入中间件

 const cors = require(‘cors’)

③在路由之前调用 app.use(cors()) 配置中间件

app.use(cors())
CORS 响应头部 - Access-Control-Allow-Origin

响应头部中可以携带一个 Access-Control-Allow-Origin 字段，其语法如下:

Access-Control-Allow-Origin:<origin> | *

其中，origin 参数的值指定了允许访问该资源的外域 URL。

例如，下面的字段值将只允许来自http://goodluck.cn的请求：

res.setHeader('Access-Control-Allow-Origin','http://goodluck.cn')

如果指定了 Access-Control-Allow-Origin 字段的值为通配符 *，表示允许来自任何域的请求，示例代码如下：

res.setHeader('Access-Control-Allow-Origin','*')
CORS 响应头部 - 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'); //多个请求头之间使用英文逗号进行分割
CORS 响应头部 - Access-Control-Allow-Methods

默认情况下，CORS 仅支持客户端发起 GET、POST、HEAD 请求。

如果客户端希望通过 PUT、DELETE 等方式请求服务器的资源，则需要在服务器端，通过 Access-Control-Alow-Methods来指明实际请求所允许使用的 HTTP 方法。

示例代码如下：

// 只允许 POST、GET、DELETE、HEAD 请求方法

res.setHeader('Access-Control-Alow-Methods','POST,GET,DELETE,HEAD');

// 允许所有的 HTTP 请求方法

res.setHeader('Access-Control-Alow-Methods','*');
CORS请求分类

客户端在请求 CORS 接口时，根据请求方式和请求头的不同，可以将 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 请求称为“预检请求”。服务器成功响应预检请求后，才会发送真正的请求，并且携带真实数据。

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

简单请求的特点：客户端与服务器之间只会发生一次请求。

预检请求的特点：客户端与服务器之间会发生两次请求，OPTION 预检请求成功之后，才会发起真正的请求

JSONP 接口
回顾 JSONP 的概念与特点

概念：浏览器端通过

特点

①JSONP 不属于真正的 Ajax 请求，因为它没有使用 XMLHttpRequest 这个对象。

②JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等请求。

创建 JSONP 接口的注意事项

如果项目中已经配置了 CORS 跨域资源共享，为了防止冲突，必须在配置 CORS 中间件之前声明 JSONP 的接口。否则 JSONP 接口会被处理成开启了 CORS 的接口。

示例代码如下：

// 要先创建 JSONP 接口(这个接口不会被处理成 CORS 接口)
app.get('/api/jsonp',(req,res)=>{
});

// 在配置 CORS 中间件(后续的所有接口，都会被处理成 CORS 接口)
app.use(cors());

// 此处开启了 CORS 的接口
app.get('/api/get',(req,res)=>{
});
配置 JSONP代码
// 配置 JSONP 的接口
app.get('/api/jsonp', (req, res) => {
    // 定义 JSONP 接口具体实现的过程
    // 1.得到函数的名称
    const funcName = req.query.callback;
    // 2.定义要发送到客户端的数据对象
    const data = { name: 'DDD', age: 20 };
    // 3.拼接出一个函数调用
    const scriptStr = `${funcName}(${JSON.stringify(data)})`;
    // 4.把拼接的字符串，想要给客户端
    res.send(scriptStr);
});

拓展

1、把字符串转成JSON对象

JSON.parse(data);

2、把JavaScript 对象转换为 JSON 字符串

JSON.stringify()
DC...
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一小时：手把手教你入门express【建议收藏】
贪吃ღ大魔王
07-05 3556
express 简介 Express 是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。搭建web服务器 Express 的本质：就是一个 npm 上的第三方包，提供了快速创建 Web 服务器的便捷方法。 使用Express开发框架可以非常方便、快速的创建Web网站的服务器或API接口的服务器 官方网址：https://www.expressjs.com.cn/ 简单使用 下载安装： npm init -y npm i express -S 使用步骤： 导入包 创建服务器 处理请求 监
DB2Express-C快速入门
07-23
资源名称：DB2 Express-C快速入门资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
Express框架快速入门
木头房子的格子铺
08-22 1247
Express框架 Express框架快速入门 Express框架的使用 Express的路由 Express的中间件 Express的模版引擎 Ejs模版
Express快速入门
沐小侠
02-25 416
Express初体验 在Node.js后端开发中，使用官方提供的http模块可以创建一个Web服务器应用，但是此模块非常底层，要处理各种情形，比较繁琐，为此便有了 Express ,它是第三方模块，是一个基于Node.js的http模块而编写的高层模块，简化Web服务器端应用的开发。 Express基于 Node.js 平台，快速、开放、极简的 Web 开发框架。使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性： 可以设置中间件来响应 HTTP 请求。 定义了路由用于
Express文档翻译--Basic routing
xueli_2017的博客
06-05 226
基本路由 路由决定了应用程序如何响应客户端对特定端点的请求，该端点是一个URI（或路径）和一个特定的HTTP请求方法（GET、POST等）。 每个路由可以有一或多个处理器函数，这些函数在路由匹配时执行。 路由定义采用以下结构： app.METHOD(PATH, HANDLER) 在这个结构中： app是Express的一个实例。 METHOD是一个小写的HTTP请求方法。 PATH是服...
express快速入门
weixin_30819163的博客
01-13 72
1.简介: 　　express是基于Node.js平台,快速开放极简的web开发框架,使用　　各种http使用工具和中间件,创建强大API. 2.安装 　　npm install express -g 全局安装 　　npm install --save-dev express 项目下安装3.hello world例子:(创建服务器端口设置为3000,res回复'Hello World!')...
DB2 Express-C快速入门
12-09
一本介绍DB2 Express-C快速入门的好书
express-starter:快速入门
05-15
快速入门 这是Express和Node> = 8的入门项目，具有： 码头工人 PostgreSQL 基于JWT的身份验证 async / await到处async / await 专为简化测试而设计，重点是“几毫秒之内”的端到端测试 基于服务的文件夹结构（ /...
DB2 Express-C 快速入门书籍
03-29
一本db2学习资料，非常适合db2入门的初学者，比较细致和广泛的介绍db2的基本操作和原理。
Node.js+Express配置入门教程
10-22
Node.js是一个Javascript运行环境(runtime)。本文给大家介绍Node.js+Express配置入门教程，值得推荐给大家，感兴趣的朋友一起学习吧
SQL 调试工具 - Express Profiler
06-22
用过很多SQL调试工具，最后还是选择了这个。 SQL 自带的 SQL Profiler首先是standard版本才有，所以不是免费的，还有就是设置起来太麻烦，后来又搜了SqlExpressTrace，也是要配置。还是这个Express Profiler好，打开就用，很快就能监测到你的Sql是怎么跑的了。
ExpressProfiler
03-31
SQLExpress Profiler,开发必备工具
下班前几分钟，Express 快速入门
高大志leo的博客
07-20 1368
基于Node.js平台，快速、开放、极简的 Web 开发框架。 Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。
node express 快速入门
XVector专栏
05-17 620
node express 快速入门基本的概念和使用express 是目前基于node.js开发的比较流行的web开发框架，可以帮助用户快速搭建一个功能完善的网站。express的核心也是基于node.js的http模块进行封装，提供出来比较方便的使用框架，下面看一个简单的例子使用express框架搭建一个简单的web服务器var express = reqiure('express'); var a
express框架快速入门
Jinming Su
10-25 1842
Nodejs的安装 安装 这里我直接使用node的包管理器进行了安装sudo pacman -S nodejs npm 生成的命令直接保存在/usr/bin/中 express的安装 预备知识生成package.json 这个文件是node包含项目的一些信息和依赖的管理。通过npm init可以在纯净的node项目中生成。 安装express框架npm install express --sav
Express入门指南（详细）
热门推荐
stc_ljc的博客
10-17 12万+
Express 是一个基于 Nodejs 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。
Express(一) ——简单入门
赤蓝紫の博客
02-16 1万+
Express(一) ——简单入门 背景：参加的青训营项目，使用Express来实现后端，个人被分配到后端去。于是，简单速通了下Express。项目结束，回头写下笔记，沉淀一下。 个人博客：Express(一) ——简单入门 Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 开始前可以先安装Postman，很好用的接口测试工具。 1. Hello World 首先，安装express到项目中npm i express 然后，开始代码世界。 // 1. 加载express
SqlExpressProfiler介绍
龙高大老
07-21 607
一，前言   用SQLServerExpress版时，想找个Profiler记录运行的SQL文。在GoogleCode这找到个比较好用的。   这个工具的commiter只有1个帐号。如果是1人开发的，真是让人佩服啊。   二，sqlexpressprofiler   下载地址：http://code.google.com/p/sqlexpressprofiler/downloads/l...
express哪个节点快_用express创建节点js应用程序
weixin_26713037的博客
10-15 327
express哪个节点快If you are new to Node.js and want to start creating a simple project in Node.js with expressjs, you are landed on the right place.如果您不熟悉Node.js，并且想开始使用expressjs在Node.js中创建一个简单项目，那么您来对地方了。...
db2express-c快速入门
最新发布
01-11
下面是使用db2express-c的快速入门流程： 第一步，下载和安装db2express-c。在IBM官方网站上找到db2express-c的下载链接，并按照提供的指导进行下载和安装。 第二步，配置db2express-c。安装完成后，需要进行一些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值