express入门

已于 2023-02-09 15:29:48 修改
阅读量403 收藏
点赞数
文章标签： express javascript 前端
于 2022-09-01 20:42:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46801545/article/details/125560614
版权

文章目录

express

npm i express

1 创建一个基本的express服务器

// 引入express
const express = require('express')
// 创建express实例
const app = express()
// 在app上挂在路由
app.get('/list',(req, res)=> {})
app.post('/add', (req, res)=> {})
// 启动服务器,监听端口
app.listen(1001, ()=> {
})

2 获取客户端传递的参数

2.1 通过 res.query()获取 get请求url中传递的参数

// 请求地址 http://localhost:1001/list?id=1?status=2
app.get('/list', (req, res)=> {
	console.log(req.query)
	// {id: 1, status: 2}
})

2.2 通过res.params可以获取到，url中，通过:匹配到的动态参数

// 请求地址 http://localhost:1001/add/1/张三
app.get('/add/:id/:name', (req, res)=> {
	console.log(req.params)
	// {id: 1}
})

2.3 获取post请求参数

// 通过 express.json() 这个中间件，解析表单中的 JSON 格式的数据，没有使用这个中间件res.body为undefined
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.post('/add', (req, res)=> {
  res.send({
    code: 0,
    msg: '操作成功',
    data: [req.body]
  })
})

3 express.static() 静态托管

3.1 托管一个静态资源文件

// 这就就可以访问public文件下的内容了
// 如果服务运行在  http://localhost:1001
// 通过http://localhost:1001/index.html 就可以访问到public文件下index.html文件
app.use(express.static('./public'))

3.2 托管多个静态资源文件

如果托管多个静态资源目录，就多次调用express.staitc()

// node会按照调用的顺序去执行查找静态资源
// 如果两个都有index.js，在第一个中找到直接返回，就不会去第二个找了
// 如果第一个没找到，回去第二个中查找
app.use(express.static('./public'))
app.use(express.static('./file'))

3.3 挂载静态资源的前缀

// 没有添加前缀
// http://localhost:1001/index.html   就能访问
app.use(express.static('./public'))
// 添加前缀
// http://localhost:1001/file/index.html   才能访问
app.use('file',express.static('./file'))

4 nodemon安装使用

全局安装npm install -g nodemon

启动命令nodemon .\index.js
在这里插入图片描述

5 路由

客户端的请求 与 服务端的处理函数 的 映射关系

路由包含三部分：请求方式，请求地址，处理函数

app.post(path, (req, res)=> {})
app.get(path, (req, res)=> {})

5.1 路由的基本使用

app.get('/list', ()=> {})
app.post('/add', ()=> {})

5.2 模块化路由

为了方便对路由进行模块化的管理，不建议将路由挂载到app(express实例)上，而是推荐将路由抽离为单独的模块

具体步骤：

  1. 创建路由模块对应的.js文件
  2. 调用express.Router()创建一个路由对象
  3. 向路由对象上挂在路由
  4. 通过module.exports向外共享路由对象
  5. 使用app.use注册路由模块

示例代码：
在这里插入图片描述

Router-------路由模块
index.js------入口文件

index.js文件

// 引入express模块
const express = require('express')
// 引入user路由模块
const user = require('./Router/user')
// 引入manager路由模块
const manager = require('./Router/manager')
// 创建express实例
const app = express()
// 注册中间件（中间件是按照顺序执行的）
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use('/user', user)
app.use('/manager', manager)

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

user.js模块


// 引入express模块
const express = require('express')

// 创建Router实例
const Router = express.Router()

// 在Router上挂载路由
Router.get('/list',(req, res)=> {
  res.send(req.query)
  // http://127.0.0.1:1002/user/list?name=lily&age=20
  // {"name":"lily","age":"20"}
})

Router.post('/add',(req, res)=> {
  res.send(req.body)
  // http://127.0.0.1:1002/user/add 入参为{"message":"这是一条测试消息"}
  // {"message":"这是一条测试消息"}
})

// 向外暴露Router
module.exports = Router

manager模块

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

Router.get('/list', (req, res)=> {
  res.send(req.query)
  // http://127.0.0.1:1002/manager/list?id=1&name=Tom&age=20
  // {"id":"1","name":"Tom","age":"20"}
})

Router.post('/add', ()=> {
  res.send(req.body)
  // http://127.0.0.1:1002/manager/add 入参是{"message":"这是一条测试消息"}
  // {"message":"这是一条测试消息"}
})

module.exports = Router

6 express中间件

中间件是业务处理环境中的中间处理环境，有输入有输出。

客户端请求 ===> 中间件1 ===> 中间件2 ===> 中间3 ===> 最终处理，并详情此次请求 ===> 客户端

  1. 通过app.use()注册全局中间件

    const express = require('express')
const app = express()
// 定义中间件函数
const momFun = (req, res, next)=> {
	console.log('我是全局中间件')
	next()
}
// 注册全局中间件
app.use(momFun)
// 简化形式
app.use((req, res, next)=>{
	next()
})
app.get('/', (res, req)=> { ... })

  2. 局部中间件
    回调函数中，有形参next为中间件函数，没有形参next为路由函数

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

// 中间件函数
app.get('/user', (req, res, next)=> {
	next()
})
// 路由函数
app.get('/user', (req, res)=>{})

6.1 中间件的格式

// 在回调函数中，包含形参next，next()是多个中间件连续调用的关键，它表示把流转关系转交到下一个中间件或者路由

const express = require('express')
const app = express()
// 定义一个全局中间件
app.use((req, res, next)=>{
	next()
})

app.listen(1003, ()=>{})

6.2 定义一个中间件函数

const express = require('express')
const app = express()
// 定义一个全局中间件
app.use((req, res, next)=>{
	next()
})

app.get('/list',(req, res)=> {
	res.send('哈哈')
})

app.listen(1003, ()=>{})

6.2.1 定义一个全局生效的中间件

				上面的例子就是注册全局中间件的例子

6.2.2 定义一个局部中间件

不使用app.use()注册的中间件，而是放在路由的参数中

const express = require('express')
const app = express()
const fun1 = function(req, res, next) {
	// ...
	next()
}
app.get('/list', fun1, (req, res)=> {
	// ....
})

代码示例：

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

app.use((req, res, next)=> {
  req.number = 10
  next()
})

fun1 = (req, res, next)=> {
  req.myParams = {
    value: '哈哈哈',
    id: 1
  }
  req.str = '11111'
  next()
}

app.get('/list1', (req, res)=> {
  console.log(req.number) // 10
  req.number = 20
  console.log(req.myParams) // undefined
  console.log(req.str)  // undefined
  res.send('操作成功')
})
app.get('/list2', fun1, (req, res)=> {
  console.log(req.number) // 10
  console.log(req.myParams) // { value: '哈哈哈', id: 1 }
  console.log(req.str)    // 11111
  res.send('操作成功')
})

app.listen(1000)
  • 全局中间件中设置的req参数，可以在所有路由中获取，
  • 局部中间件中设置的req参数，只能在使用局部中间件的路由中获取
  • 在路由中只能获取req参数，不能设置参数，设置也不生效

6.2.3 同时使用多个局部中间件

const express = require('express')
const app = express()
fun1 = (req, res, next)=> {
	// ... 
	next() 
}
fun2 = (req, res, next)=> {
	// ... 
	next() 
}
fun3 = (req, res, next)=> {
	// ... 
	next() 
}

app.get('/list', fun1, fun2, fun3, (req, res)=> {
	// ....
})
app.listen(1000)

6.3 中间件的作用

多个中间件见，共享同样的req和res，我们可以给req和res添加方法和属性，给下面的中间件或者路由使用，使代码更优雅

6.4 中间件分类

  • 应用级别的中间件
  • 路由级别的中间件
  • 错误级别的中间件
  • Express内置的中间件
  • 第三方的中间件

6.4.1 应用级别中间件

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

6.4.2 路由级别中间件

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

const express = require('express')
const Router = express.Router()
Router.use((req, res, next)=>{
	//	....
	next()
})
Router.get('/list', fun1, (req, res)=>{
	// ....
})
module.exports = Router

6.4.3 错误级别中间件

专门用来捕获异常，格式：处理函数有4个形参，分别是err，req，res，next

app.get('/list', (req, res)=> {
	throw new Error('抛出一个错误')
	res.send('请求成功')
})
app.use((err, req, res, next)=>{
	console.log('发送错误 ' +  err。message)
	res.send('Erroe!' + err.message)
})

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

6.4.4 内置中间件

  1. express.static() 托管静态资源
app.use(express.static('./public'))
  1. express.json() post解析json请求体数据
app.use(express.json())
  1. express.urlencodeed() 解析URL-encoded格式的请求体数据
app.use(express.urlencoded({ extended: false }))

7 cors中间件解决跨域问题

  1. 运行 npm install cors 安装中间件
  2. 使用 const cors = require('cors') 导入中间件
  3. 在路由之前调用 app.use(cors()) 配置中间件
const express = require('express')
const cors = reqiure(''cors)

const app = express()
app.use(cors())

7.1 CORS响应头

  1. Assess-Control-Allow-Origin 哪些URL可以访问
Assess-Control-Allow-Origin:  origin  |  *
  • origin - 指定允许访问的URL
  • *-----通配符 ，所有的URL都能访问
res.setHeader('Assess-Control-Allow-Origin': '*')
  1. Assess-Control-Allow-Headers 对格外的请求头进行申明
res.setHeader('Assess-Control-Allow-Headers', 'xxxxx')
  1. Assess-Control-Allow-Methods 指定允许客户端发起的请求方式（get，post，put，delete）
res.setHeader('Assess-Control-Allow-Methods', 'POST, GET, DELETE, PUT')

res.setHeader('Assess-Control-Allow-Methods', '*')

7.2 简单请求

  1. 请求方式只能是 GET POST HEAD
  2. 请求头不包含自定义请求头

满足以上条件才为简单请求

7.3 预检请求

  1. 请求方式为 GET POST HEAD 以外的
  2. 请求头包含自定义请求
  3. 想服务器发送了application/json格式的数据

满足上面一个条件即为预检请求

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

Heart-bro
关注
  • 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 使用步骤： 导入包 创建服务器 处理请求 监
express入门笔记
10-09
express入门笔记
Express(一) ——简单入门
热门推荐
赤蓝紫の博客
02-16 1万+
Express(一) ——简单入门 背景：参加的青训营项目，使用Express来实现后端，个人被分配到后端去。于是，简单速通了下Express。项目结束，回头写下笔记，沉淀一下。 个人博客：Express(一) ——简单入门 Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。 开始前可以先安装Postman，很好用的接口测试工具。 1. Hello World 首先，安装express到项目中npm i express 然后，开始代码世界。 // 1. 加载express
Express入门看一篇就够了
bjjgff的博客
01-24 933
在Express框架中，我们可以使用app.get()app.post()app.put()和等方法定义不同类型的路由。// GET 请求的路由res.send('首页')})// POST 请求的路由// 处理POST请求})// PUT 请求的路由// 处理PUT请求})// DELETE 请求的路由// 处理DELETE请求})在上面的代码中，我们使用app.get()方法定义了一个GET请求的路由，当Web应用程序收到GET请求时，返回“首页”字符串。
express新手入门指南，含泪整理面经
最新发布
2301_82244182的博客
04-03 870
通过上面的讲解，实现自定义的 404 和错误处理逻辑也就非常简单了。在 server.js 所有路由的后面添加如下代码：// 中间件和其他路由 …});});});提示在编写处理 404 的逻辑时，我们用到了模板引擎中的变量插值功能。具体而言，在res.render方法中将需要传给模板的数据作为第二个参数（例如这里的传入了用户访问的路径），在模板中就可以通过{{ url }}获取数据了。
【Node】Express 入门教程
day day up
07-21 2520
express 是 Node.js 上最流行的 Web 开发框架，正如他的名字一样，使用它我们可以快速的开发一个 Web 应用。
使用实例展示Express框架app函数的详解
qq_38334677的博客
03-06 307
Express是Node.js中最受欢迎的Web应用程序框架之一。Express提供了许多有用的功能，使开发Web应用程序变得更加容易和高效。以下是Express框架的一些重要概念和特性：1.路由：Express使用路由来匹配HTTP请求的URL和HTTP方法。使用路由，您可以定义应用程序的不同端点，例如“/users”或“/login”。路由可以包含中间件，以便在处理请求之前或之后执行一些逻辑。
nodejs+express入门小例子
08-20
nodejs+express入门小例子,掌握nodejs+express的模块化开发以及基本属性
nodejs中express入门和基础知识点学习
10-18
本文将深入讲解Express的基础知识，包括初始化、安装、创建Hello World实例、生成器以及路由。 **初始化** 在开始使用Express之前，你需要先创建一个项目目录。例如，你可以创建一个名为`myapp`的目录，然后使用`...
express入门（10）- cookie
07-21
express入门（10）- cookie
express入门（9）- session
07-21
express入门（9）- session
ExpressJS入门指南（二）
海瑟天涯
05-01 136
ExpressJS入门指南（二） 作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs 紧接前一篇《ExpressJS入门指南》 六、使用express(1)产生应用Express框架绑定了一个可执行脚本，名为express(1)。如果使用npm对Express框架进行全局安装，那么express到处都能使用。> npm install -g exp...
Express框架快速入门
木头房子的格子铺
08-22 1248
Express框架 Express框架快速入门 Express框架的使用 Express的路由 Express的中间件 Express的模版引擎 Ejs模版
Node.js Express 框架学习笔记（一）入门篇
BloodyMandoo的博客
05-03 7825
初心：开始学习Node.js Express框架主要是为了能自己学会去搭建一个完整的网站，其次是由于个人的技术比较杂，从最初的前端HTML、CSS、JS、React、Vue到改学后台用C#、.net开发，直到慢慢的接触到数据库设计、服务器部署等方面的知识，也希望自己能慢慢的走上全栈的路，不管技术怎么样，一直学总是会有提高的总是会达到心中的标准的，于是，开始自己一人学习独立开发一款APP,想要把自己...
一杯茶的时间，上手 Express 框架开发
图雀社区
12-18 5113
Node.js 已经成为 Web 后台开发圈一股不容忽视的力量，凭借其良好的异步性能、丰富的 npm 库以及 JavaScript 语言方面的优势，已经成为了很多大公司开发其后台架构的重要技术之一，而 Express 框架则是其中知名度最高、也是最受欢迎的后端开发框架。在这篇教程中，你将了解 Express 在 Node 内置 http 模块的基础上做了怎样的封装，并掌握路由和中间件这两个关键概念...
Express入门（一）
Accept1234的博客
03-18 427
开发环境为VSCode1.32.3。 文章目录构建一个基本服务器路由参数查询字符串 构建一个基本服务器 var express = require('express'); var app = express(); app.get('/', function(req, res){ res.send('this is the homepage'); console.log('thi...
Express入门
David
05-31 593
Express入门 1、请求与响应 const express = require('express') var app = express(); app.get('/', function(req, res) { res.end('hello') }) app.listen(3000) console.log( 'server lis...
express 基础入门
、Edgar的博客
06-13 233
express 官方文档 1. 安装 npm init // 生成package.json文件 npm install express --save 2. 简单使用 const express = require("express") const app = express() const port = 3000 // GET app.get("/test", function (req, res){ res.send("Hello World, this is a test") }) //
Express框架（一）——入门
金鳞踏雨
12-31 766
Express框架是什么？ Express框架是一个基于Node平台的Web应用开发框架，使用原生JS创建服务器，太过麻烦，所以Express框架提供了一系列的强大功能，帮助你创建各种Web应用。 Express框架的安装 在项目的目录下面使用下面的命令下载Express框架。 npm install express Express的特点 1.提供了简便的路由定义方式 2.对获取HTTP的请求参数进行了简化处理 3.对模板引擎支持程度高，方便绚烂动态的HTML页面 4.提供了中间件机制，
qlexpress入门
09-07
要入门Qlexpress，你可以按照以下步骤进行操作： 1. 下载和安装：首先，你需要从Qlexpress的官方网站（https://github.com/alibaba/QLExpress）下载最新版本的Qlexpress。然后，将Qlexpress的jar文件添加到你的项目...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值