Express.js 简记

已于 2022-01-23 23:54:14 修改
阅读量1.9k 收藏 10
点赞数 2
分类专栏： 迷人的大前端 文章标签： javascript 前端 服务器
于 2022-01-23 23:53:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Oooops_/article/details/122659546
版权

目录

Express笔记

Express是基于Node.js 快速、开放、极简的web开发框架

一、安装
npm i express@4.17.1
二、基本使用
1.创建基本的Web服务器
// 1.导入express
const express = require('express')
// 2.创建web服务器
const app = express()
//3.调用app.listen(端口号，成功后的回调函数)，启动服务器
app.listen(80,()=>{
    console.log('express server is running at http://127.0.0.1')
})
2.监听get请求

app.get(url,callback(req,res))

  • url：请求路径
  • callback：请求处理函数
// 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:"男"})
})

// 3.调用app.listen(端口号，成功后的回调函数)，启动服务器
app.listen(80,()=>{
    console.log('express server is running at http://127.0.0.1')
})
3.监听post请求

app.post(url,callback(req,res))

  • url：请求路径
  • callback：请求处理函数
// 1.导入express
const express = require('express')
// 2.创建web服务器
const app = express()
// 4.监听客户端的GET和POST请求 并向客户端响应具体的内容
app.post('/user',(req,res)=>{
    //调用express提供的res.send()方法，向客户端响应一个文本字符串
    res.send('请求成功')
})

// 3.调用app.listen(端口号，成功后的回调函数)，启动服务器
app.listen(80,()=>{
    console.log('express server is running at http://127.0.0.1')
})
4.把内容响应给客户端

res.send() //可以响应一个JSON对象，也可以响应一个字符串

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('请求成功')
})
5.获取URL中携带的查询参数

通过req.query对象，可以访问客户端通过查询字符串的形式，发送到服务器的参数，即get请求的参数

  • req.query默认是一个空对象
  • 可通过req.query对象访问到，例如：?name=zs&age=20
    • req.query.name
    • req.query.age
http://localhost/user?name=zs&age=20
app.get('/user',(req,res)=>{
    console.log(req.query)
    res.send(req.query.name)
})
6.获取URL中的动态参数

通过req.params对象，可以获得动态的参数

req.params默认是一个空对象，是动态匹配到的

http://localhost/user/1
app.get('/user/:id',(req,res)=>{
    console.log(req.params)	//id的值 1
    res.send(req.query.params)
})

{id:'1'}

动态参数的:是固定的 冒号后面的名称是参数的名称自定义的

可以有多个动态参数：

app.get('/user/:id/:username',()=>{})
三、托管静态资源
1.express.static()

可以通过express.static()将目录下的静态资源对外开放访问

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

这样就可以访问public目录下的所有文件了

存放静态文件的目录名不会出现在URL中 即public不会出现在url中

例：

​ http://localhost:3000/images/bg.jpg

2.托管多个静态资源目录

当在第一个文件夹中查找到文件时，直接返回，没找到才会到后面一个文件夹找

//两个目录都包含index.html,先查找clock目录，找到返回
app.use(express.static('./clock'))
app.use(express.static('./public'))
3.挂载路径前缀

希望在静态资源访问路径前加一个前缀，如：http://localhost/public/index.html

app.use('/public',express.static('./public'))
四、路由模块
1.模块化路由

test.js

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

//1.导入路由模块
const router = require('./router.js')
//2.注册路由模块
app.use(router)

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

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('Get user list')
})

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

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

2.为路由模块添加前缀
app.use('/api',router)
五、中间件
1.中间件的格式

回调函数就是中间件函数

app.get('/',function(req,res,next){
    next();
})

如果参数只有req和res那么这个函数是一个路由，中间件必须有next参数

2.next函数的作用

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

3.定义中间件函数
const express = require('express')
const app =express()
//定义一个最简单的中间件函数
const mw = function(req,res,next){
    console.log('这是最简单的中间件函数')
    //流转关系转交给下一个中间件或路由
    next();
}

app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})
4.全局生效的中间件

客户端发起的任何请求，到达服务器之后，都会触发的中间件

通过app.use(中间件) 就可以注册为全局生效的中间件

const express = require('express')
const app =express()
//定义一个最简单的中间件函数
const mw = function(req,res,next){
    console.log('这是最简单的中间件函数')
    //流转关系转交给下一个中间件或路由
    next();
}

//将mw注册为全局生效的中间件
app.use(mw)

//接受到请求前会先调用中间件函数
app.get('/',(req,res)=>{
    res.send('Home page.')
})


app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})
5.定义全局中间件的简化方式

使用箭头匿名函数简化

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

app.use((req,res,next) => {
    console.log('这是最简单的中间件函数')
    //流转关系转交给下一个中间件或路由
    next();
})

//接受到请求前会先调用中间件函数
app.get('/',(req,res)=>{
    res.send('Home page.')
})


app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})
6.定义多个全局中间件

可以使用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('/',(req,res)=>{
    res.send('Home page.')	//调用了第1个中间件 调用了第2个中间件
})


app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})
7.局部生效的中间件

不适用app.use的中间件是局部生效的中间件

const express = require('express')
const app =express()
//定义一个最简单的中间件函数
const mw = function(req,res,next){
    console.log('这是最简单的中间件函数')
    //流转关系转交给下一个中间件或路由
    next();
}


//接受到请求前会先调用中间件函数
app.get('/', mw ,(req,res)=>{
    res.send('Home page.')
})

//这个路由不会被上面的路由影响
app.get('/user',(req,res)=>{
    res.send('Home page.')
})

app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})
8.定义多个局部中间件

可以在路由中通过下面两种等价的方式定义多个局部中间件

const express = require('express')
const app =express()
//定义第一个最简单的中间件函数
const mw = function(req,res,next){
    console.log('这是第一个中间件')
    //流转关系转交给下一个中间件或路由
    next();
}

//定义第二个最简单的中间件函数
const mw2 = function(req,res,next){
    console.log('这是第二个中间件')
    //流转关系转交给下一个中间件或路由
    next();
}


//通过普通参数方式
app.get('/', mw , mw2 ,(req,res)=>{
    res.send('Home page.')
})

//通过数组参数方式
app.get('/', [mw,mw2] ,(req,res)=>{
    res.send('Home page.')
})

app.listen(80,()=> {
	console.log('web server is running at http://localhost')
})
9.注意事项

① 一定要在路由之前注册中间件

② 可以连续调用多个中间件进行处理

③ 执行完中间件的业务代码之后，不要忘记调用next() 函数

④ 建议next()函数作为中间件的最后一行

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

10.中间件的分类

  • 应用级别中间件

    绑定到app.use()、app.get()、app.post()上的中间件

  • 路由级别中间件

    绑定到express.Router()实例上的中间件

    router.use()

  • 错误级别的中间件

    专门用来捕获项目中发生的异常错误

    中间件函数必须有4个形参 function(err,req,res,next)

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

app.use((err,res,req,next)=>{
    console.log('发生错误了'+err.message)
    res.send('Error'+err.message)
})

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

  • Express内置的中间件

    • express.static快速托管静态文件的内置中间件
    • express.json解析JSON格式的请求体数据
    • express.urlencoded 解析URL-encoded格式的请求体数据
    app.use(express.json())	//挂载后自动解析json数据 req.body

app.use(express.urlencoded({extended:false}))
11.自定义解析表单数据的中间件

当有数据传入会触发req的data事件

当请求提数据接受完毕之后会触发req的end事件

//这是一个解析表单数据的中间件
app.use((req,res,next)=>{
   	//用于存储传来的数据
    let str = ''
    //监听data事件
    req.on('data',(chunk)=>{
        str+=chunk
    })
    //监听 req的 end事件
    req.on('end',()=>{
        console.log(str)
    })
})

使用querystring模块，将查询字符串解析成json对象

并将其挂载到body中

const qs = require('querystring')

//监听 req的 end事件
 req.on('end',()=>{
  	 console.log(str)
     let body = qs.parse(str)
     req.body = body
     next()
 })
六、基于express写接口

app.js

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

const app = express()

//配置解析表单的中间件
app.use(express.urlencoded({ extended:false}))

const apiRouter = require('./apiRouter')

app.use('/api',apiRouter)

app.listen(80,()=>{
    console.log('this is local web server')
})

apiRouter.js路由模块

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.query获取客户端通过查询字符串，发送到服务器的数据
    const body = req.body
    //调用 res.send()方法 向客户端响应处理的数据
    res.send({
		status:0//0表示成功，1表示失败
        msg:'POST 请求成功',//状态描述
        data:body	//需要响应给客户端的数据
	})
})

//暴露router
module.exports = router
七，CORS解决接口的跨域问题

跨域解决思想：在服务端，配置cors相关的响应头，从而解决浏览器端的跨域访问限制

1.一键解决跨域
const cors = require('cors')

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

Access-Control-Allow-Origin: | *

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

*表示所有都可以访问

例如，以下响应头只允许来自http://muzile.cn的请求

res.setHeader('Access-Control-Allow-Origin','http://muzile.cn')
3.CORS响应头-Access-Control-Allow-Headers

默认情况下CORS仅支持客户端向服务器发送9个请求头

如果客户端向服务器发送额外的请求头信息，则需要在服务器端，通过Access-Control-Allow-Headers对额外的请求头进行声明，否则这次请求会失败

res.setHeader('Access-Control-Allow-Headers','Content-Type,X-Custom-Header')
4.CORS响应头-Access-Control-Allow-Methods

默认情况下CORS仅支持客户端向服务器发起GET POST HEAD请求

更多的请求方法：

res.setHeader('Access-Control-Allow-Methods','POST,GET,DELETE,HEAD')
//允许所有
res.setHeader('Access-Control-Allow-Methods','*')
八、简单请求和预检请求
1.简单请求

请求头只包含9个之内的，请求方式为GET POST HEAD的请求

2.预检请求

① 请求方式在GET POST HEAD之外的请求

② 请求头中包含自定义头部字段

③ 向服务器发送application/json格式的数据

浏览器会先发送OPTION请求进行预检，以获知服务器是否允许该实际请求

预检请求后，才会发送真正的请求，并携带真实的数据

3.区别

简单请求特点: 客户端与服务端只会发生一次请求

预检请求特点: 客户端与服务端会先发生一次预检请求，之后才会发起真正的请求

九、JSONP接口解决跨域

JSONP不属于ajax请求，是通过创建script标签，使用src属性对跨域资源进行访问，只对GET请求有效

1.创建JSONP接口的注意事项

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

2.实现JSONP的接口
app.get('/api/json',(req,res)=>{
    //TODO:定义JSONP接口具体的实现过程
    //1.得到src中函数的名称
    const funcName = req.query.callback
    //2.定义要发送给客户端的数据对象
    const data = {name:'zs',age:22}
    //3.拼接处一个函数的调用
    const scriptStr = `${funcName}(${JSON.stringify(data)})`
    //4.把拼接的字符串响应给客户端
    res.send(scriptStr)
})
JavaScript简记
生活在别处
03-17 338
文章目录历史语法类型变量运算符控制结构对象概念定义一个对象赋值和访问key使用变量来定义数组定义和使用数组遍历方法数组的方法函数函数入参匿名函数内部函数闭包ES6 新特性let const箭头函数class类对象属性加强解构赋值剩余参数更多参考 历史 在1995 年 Netscape 一位名为 Brendan Eich 的工程师创造了 JavaScript，随后在 1996 年初，JavaScript 首先被应用于 Netscape 2 浏览器上。 又过了几个月，Netscape 将 JavaScript
JavaScript全解析——express
千锋教育
05-16 906
■而我们接收到token后, 需要解密token, 验证是否为正确的 token 或者 过期的 token。■比如用户需要访问一些需要登陆后才能访问的接口, 就可以把登录时返回的token保存下来。a. 假设你需要请求的是 './client/views/index.html' 文件。b.你的请求地址需要书写 '/static/views/index.html'1.自动去 './client/views/index.html'iii.例子: /static/index.html。
ExpressJS入门指南
海瑟天涯
04-30 191
ExpressJS入门指南 作者：chszs，转载需注明。博客主页：http://blog.csdn.net/chszs一、我们创建项目目录。 > md hello-world二、进入此目录，定义项目配置文件package.json。为了准确定义，可以使用命令：D:\tmp\node\hello-world> npm info express versionnpm http GET h...
Express.js 项目教程
最新发布
gitblog_00741的博客
09-14 375
Express.js 项目教程 express Fast, unopinionated, minimalist web framework for node. 项目地址: https://gitcode.com/gh_mirror...
ExpressJS教程
weixin_34332905的博客
12-24 910
ExpressJS环境 ExpressJS Hello World ExpressJS路由 ExpressJS HTTP方法 ExpressJS URL构建 ExpressJS中间件 ExpressJS模板 ExpressJS提供静态文件 ExpressJS表格数据 ExpressJS数据库 ExpressJS Cookies ExpressJS Se...
Express.js
chen1218chen的专栏
07-05 527
Express.jsExpressjs Express安装 设置静态文件目录 文件访问 设置html引擎Express安装 全局安装express，express作为命令被安装到了系统中 npm install -g express 查看express版本 express -V 使用express命令创建工程，并支持ejs > express -e nodejsDemo > cd nodejs-d
Express.js简单入门
xiaobangsky的专栏
02-02 3348
Express.js简单入门介绍Web应用API性能如何创建一个项目express的编程模型express的中间件路由错误处理代码示例 介绍 Web应用 Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用 API 丰富的HTTP工具以及来自Connect框架的中间件随取随用，创建强健、友好的API变得快速又简单 性能 Express 不对 node.js 已有的特性进行二次抽象，我们只是在它之上扩展了Web应用所需的功能 如何创建一个项目 创建
497476974884240简记.apk
08-13
497476974884240简记.apk
简记个人博客网站源码 v2.10.01.rar
04-05
常见的框架有Laravel、Express或Django，它们简化了开发流程，提高了代码复用性。 8. **数据库设计**：博客系统通常需要存储用户信息、文章内容、评论等数据，因此需要一个数据库来存储这些信息。可能使用MySQL、...
高中化学各简记规律.docx
10-10
【知识点详解】 1. 盐类的溶解性规律： ...这些简记规律和知识点是高中化学学习的基础，对于理解和解决化学问题至关重要。理解并熟练掌握这些规则有助于提升解题能力，并为大学化学学习打下坚实基础。
简记个人博客源码免费分享
05-09
简记个人博客网站源码为博主现有博客网站，前端采用LayUI框架，此分享版本为asp + access。所有功能齐全，欢迎使用。 使用方法：上传至空间或服务器，通过IIS发布网站即可。 演示地址：...
ExpressJS介绍
每天进步一点点
03-24 2067
Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健壮、友好的 API 变得既快速又简单。Express 不对 node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能。 中文社区：http:/
ExpressJs框架
yu_qin_的博客
12-25 543
express是一个基于Node.js平台的极简,灵活的WEB应用开发框架简单来说，express是一个封装好的工具包，封装了很多功能，便于我们开发WEB应用（HTTP服务）官方定义：路由确定了应用程序如何响应客户端对特定端点的请求。
Express.js 入门指南
qq_54435297的博客
06-29 2218
Express.js 是Node.js平台上的一个轻量级、灵活的web应用框架，它允许你快速搭建功能丰富的web服务器和API，是对原生模块http的封装和扩展，简化和方便使用
Express.js介绍与基本使用
weixin_46051988的博客
04-29 1951
介绍 原生的http在某些方面表现不足以应对我们的开发需求，所以我们就需要适用框架来加快我们的开发效率，框架的目的就是提高效率，让其们的代码更高度统一。 在Node中，有很多Web开发框架，我们这里以学习epress为主。 Express创建 创建文件夹 mkdir myapp cd myapp 初始化项目 npm init //npm init -y 会一步到位 项目入口文件 entry point:(index.js) 安装Express np
什么是Express.js？
asdfgh0077的博客
05-16 783
I am a learner in Node.js . 我是Node.js的学习者。 What is Express.js ? 什么是Express.js ？ What is the
Express js 使用
HD2killers的博客
08-08 525
Express js 使用 app make useful #install cnpm install express-generator -g #use other cnpm install body-parser --save cnpm install cookie-parser --save cnpm install multer --save #make express m...
Node.js学习笔记——Express.js
manerzi的博客
04-02 1178
Node.js学习笔记——Express.js
expressjs搭建
IT民工阿铁的博客
04-30 466
最近有个项目需要搭建node.js服务器，用的是expressjs框架，记录一下搭建过程 1、安装构建express应用程序生成器http://www.expressjs.com.cn/starter/generator.html 2、安装nodemon实现热加载https://blog.csdn.net/ruglcc/article/details/80420153 3、静态ht...
Django数据库API：pk简记法与LIKE语句转义
为了简化编程，Django提供了一种名为`pk`的简记法来处理主键相关的查询操作。 在标题提到的`pk简记法`中，我们可以看到以下几点关键知识点： 1. **查询主键**：当你需要根据主键进行查询时，可以使用`pk`代替`id`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值