Express入门指南（详细）

文章目录

  • 🟢 Express
    • ⭐️ 1.初始Express
        • ✨安装
        • ✨使用Express 搭建一台服务器
    • ⭐️2.Express-基本路由
        • ✨1.使用字符串模式的路由路径示例：
        • ✨2.使用正则表达式的路由路径示例：
        • ✨3.中间件浅试(demo)
    • ⭐️3.Express-中间件
        • ✨1.应用级中间件
        • ✨2.路由级中间件
        • ✨3.错误处理中间件
        • ✨4.内置的中间件
        • ✨5.第三方中间件
    • ⭐️4. Express--获取请求参数
        • ✨1.get
        • ✨2.post
    • ⭐️5. Express-- 托管静态文件
  • 📌持续更新中
  • ✒️总结

🟢 Express

Express
基于 Node.js 平台，快速、开放、极简的 web 开发框架。Express 是 Node.js 最受欢迎的 Web 应用框架之一。它提供了简洁而灵活的方式来构建 Web 服务器和 API。Express 提供了一组强大的工具和功能，使得开发 Web 应用变得简单而高效。

⭐️ 1.初始Express

在这里插入图片描述

  1. Web 应用
    Express 是一个基于 Nodejs 平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。
  2. API
    丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健、友好的API 变得既快速又简单。
  3. 性能
    Express 不对 Node,js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能。
✨安装
npm install express --save

在这里插入图片描述

✨使用Express 搭建一台服务器

index.js

const express=require(`express`)
// 导入express
const app=express()
app.get("/",(req,res)=>{res.write("hello express")res.end()
})
app.listen(5200,()=>{console.log("Server start")
})

在这里插入图片描述
send()
直接返回字符

app.get("/send",(req,res)=>{res.send("hello express-send")
})

在这里插入图片描述
返回html片段,可以看到直接解析

app.get("/send",(req,res)=>{res.send(`<h1>hello express-send</h1>`)
})

在这里插入图片描述
返回json数据·

app.get("/send",(req,res)=>{res.send({name:`初见`,age:23})
})

在这里插入图片描述

⭐️2.Express-基本路由

路由是指如何定义应用的端点（URIs）以及如何响应客户端的请求。
路由是由一个 URI、HTTP 请求（GET、POST等）和若干个句柄组成，它的结构如下：app.METHOD(path, [callback…], callback)， app 是 express 对象的一个实例， METHOD 是一个HTTP 请求方法， path 是服务器上的路径， callback 是当路由匹配时要执行的函数。下面是一个基本的路由示例

var express = require('express');
var app = express();
// respond with "hello world" when a GET request is made to the homepage
app.get('/', function(req, res) {
res.send('hello world');
});

路由路径和请求方法一起定义了请求的端点，它可以是字符串、字符串模式或者正则表达式。

// 匹配根路径的请求
app.get('/', function (req, res) {
res.send('root');
});
// 匹配 /about 路径的请求
app.get('/about', function (req, res) {
res.send('about');
});
// 匹配 /random.text 路径的请求
app.get('/random.text', function (req, res) {
res.send('random.text');
});
✨1.使用字符串模式的路由路径示例：
// 匹配 acd 和 abcd
app.get('/ab?cd', function(req, res) {
res.send('ab?cd');
});
// 匹配 /ab/******
app.get('/ab/:id', function(req, res) {
res.send('aaaaaaa');
});
// 匹配 abcd、abbcd、abbbcd等
app.get('/ab+cd', function(req, res) {
res.send('ab+cd');
});
// 匹配 abcd、abxcd、abRABDOMcd、ab123cd等
app.get('/ab*cd', function(req, res) {
res.send('ab*cd');
});
// 匹配 /abe 和 /abcde
app.get('/ab(cd)?e', function(req, res) {
res.send('ab(cd)?e');
});

下面就一个一个尝试一下

  1. /ab?cd可以匹配 acd 和 abcd
//?前面的b可选，可以有也可以没有
app.get("/ab?cd", (req, res) => {res.send("ab?cd 匹配 acd 和 abcd")
});

在这里插入图片描述

  1. /ab/:id匹配/ab/******（常用于详情页，向后端传个id）
// 匹配 /ab/******    :也就是占位符的意思
app.get('/ab/:id', function(req, res) {res.send('/ab/:id匹配/ab/******');
});

在这里插入图片描述

  1. ab+cd匹配 abcd、abbcd、abbbcd等
// 匹配 abcd、abbcd、abbbcd等
//+前面的b可以重复n个
app.get('/ab+cd', function(req, res) {res.send('ab+cd匹配 abcd、abbcd、abbbcd等');
});

在这里插入图片描述

  1. ab*cd匹配 abcd、abxcd、abRABDOMcd、ab123cd等
// 匹配 abcd、abxcd、abRABDOMcd、ab123cd等
//*可匹配任意字符或任意多个字符
app.get('/ab*cd', function(req, res) {res.send('ab*cd匹配 abcd、abxcd、abRABDOMcd、ab123cd等');
});

在这里插入图片描述

  1. ab(cd)?e匹配 /abe 和 /abcde
// 匹配 /abe 和 /abcde
// 括号内的内容要不都写、要不都不写
app.get('/ab(cd)?e', function(req, res) {res.send('ab(cd)?e匹配 /abe 和 /abcde');
});

在这里插入图片描述

✨2.使用正则表达式的路由路径示例：
// 匹配任何路径中含有 a 的路径：
app.get(/a/, function(req, res) {
res.send('/a/');
});
// 匹配 butterfly、dragonfly，不匹配 butterflyman、dragonfly man等
app.get(/.*fly$/, function(req, res) {
res.send('/.*fly$/');
});

可以为请求处理提供多个回调函数，其行为类似 中间件。唯一的区别是这些回调函数有可能调用next(‘route’) 方法而略过其他路由回调函数。可以利用该机制为路由定义前提条件，如果在现有路径上继续执行没有意义，则可将控制权交给剩下的路径。

  1. '/a/ 匹配任何路径中含有 a 的路径
// 匹配任何路径中含有 a 的路径：
app.get(/a/, function(req, res) {res.send('/a/ 匹配任何路径中含有 a 的路径');
});

在这里插入图片描述

  1. /.*fly$/ 匹配 butterfly、dragonfly，不匹配 butterflyman、dragonfly man等
// 匹配 butterfly、dragonfly，不匹配 butterflyman、dragonfly man等
// 以fly结尾的
app.get(/.*fly$/, function(req, res) {res.send('/.*fly$/ 匹配 butterfly、dragonfly，不匹配 butterflyman、dragonfly man等');
});

在这里插入图片描述

✨3.中间件浅试(demo)
// next()是否执行下个中间件的方法
app.get("/home", (req, res,next) => {// 验证用户token，cookie过期console.log(`开始验证token`)// 后续验证const isValid=trueif(isValid){// 验证通过next()}else{// 返回错误信息res.send('error')}
},(req,res)=>{//查询数据库，返回给前端res.send({list:[1,2,3]})
})

优化版

// next()是否执行下个中间件的方法// 验证用户
const fun1=(req, res,next) => {// 验证用户token，cookie过期console.log(`开始验证token`)// 后续验证const isValid=falseif(isValid){// 验证通过next()}else{// 返回错误信息res.send('error')}
}
// 验证成功
// 写法1
app.get("/home",[fun1,fun2])
// 写法2
app.get("/list",[fun1],(req,res)=>{//查询数据库，返回给前端res.send('list')
})

验证通过
在这里插入图片描述
isValid=false验证失败
在这里插入图片描述
写法2
在这里插入图片描述

总结

可以为请求处理提供多个回调函数，其行为类似 中间件。唯一的区别是这些回调函数有可能调用next(‘route’) 方法而略过其他路由回调函数。可以利用该机制为路由定义前提条件，如果在现有路径上继续执行没有意义，则可将控制权交给剩下的路径

app.get('/example/a', function (req, res) {
res.send('Hello from A!');
});

使用多个回调函数处理路由（记得指定 next 对象）：

var cb0 = function (req, res, next) {
console.log('CB0')
next()
}
var cb1 = function (req, res, next) {
console.log('CB1')
next()
}
var cb2 = function (req, res) {
res.send('Hello from C!')
}
app.get('/example/c', [cb0, cb1, cb2])

混合使用函数和函数数组处理路由：

var cb0 = function (req, res, next) {
console.log('CB0')
next()
}
var cb1 = function (req, res, next) {
console.log('CB1')
next()
}
app.get('/example/d', [cb0, cb1], function (req, res, next) {
console.log('response will be sent by the next function ...')
next()
}, function (req, res) {
res.send('Hello from D!')
})

⭐️3.Express-中间件

Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架：从本质上来说，一个 Express 应用就是在调用各种中间件。
中间件（Middleware） 是一个函数，它可以访问请求对象（request object (req)）, 响应对象（response object (res)）, 和 web 应用中处于请求-响应循环流程中的中间件，一般被命名为 next 的变量。
中间件的功能包括：

  • 执行任何代码。
  • 修改请求和响应对象。
  • 终结请求-响应循环。
  • 调用堆栈中的下一个中间件。

如果当前中间件没有终结请求-响应循环，则必须调用 next() 方法将控制权交给下一个中间件，否则请求就会挂起。

✨1.应用级中间件

应用级中间件绑定到 app 对象 使用 app.use() 和 app.METHOD()， 其中， METHOD 是需要处理的HTTP 请求的方法，例如 GET, PUT, POST 等等，全部小写。例如：

var app = express()
// 没有挂载路径的中间件，应用的每个请求都会执行该中间件
app.use(function (req, res, next) {
console.log('Time:', Date.now())
next()
})

那么我们就可以改造一下我们的demo，把验证token的那个函数挂载到路径中间件

const express = require(`express`);
// 导入express
const app = express();
app.get("/", (req, res) => {res.write("hello express");res.end();
});
// next()是否执行下个中间件的方法// 验证用户
const fun1=(req, res,next) => {// 验证用户token，cookie过期console.log(`开始验证token`)// 后续验证const isValid=trueif(isValid){// 验证通过next()}else{// 返回错误信息res.send('error')}
}
app.use(fun1)//中间件注册，需要注意顺序
// 验证成功
const fun2= (req,res)=>{//查询数据库，返回给前端res.send({list:[1,2,3]})
}
// 写法1
app.get("/home",[fun2])
// app.use('/home',fun1)//只在访问/home这个路径使用这个中间件
// 写法2
app.get("/list",(req,res)=>{//查询数据库，返回给前端res.send('list')
})
app.listen(5200, () => {console.log("Server start");
});

在这里插入图片描述

✨2.路由级中间件

路由级中间件和应用级中间件一样，只是它绑定的对象为 express.Router()。

var router = express.Router()
var app = express()
var router = express.Router()
// 没有挂载路径的中间件，通过该路由的每个请求都会执行该中间件
router.use(function (req, res, next) {
console.log('Time:', Date.now())
next()
})
// 一个中间件栈，显示任何指向 /user/:id 的 HTTP 请求的信息
router.use('/user/:id', function(req, res, next) {
console.log('Request URL:', req.originalUrl)
next()
}, function (req, res, next) {
console.log('Request Type:', req.method)
next()
})
// 一个中间件栈，处理指向 /user/:id 的 GET 请求
router.get('/user/:id', function (req, res, next) {
// 如果 user id 为 0, 跳到下一个路由
if (req.params.id == 0) next('route')
// 负责将控制权交给栈中下一个中间件
else next() //
}, function (req, res, next) {
// 渲染常规页面
res.render('regular')
})
// 处理 /user/:id， 渲染一个特殊页面
router.get('/user/:id', function (req, res, next) {
console.log(req.params.id)
res.render('special')
})
// 将路由挂载至应用
app.use('/', router)

那我们操作一下
indexRouter.js 存放路由级的中间件

const express = require(`express`);
// 导入express
const router=express.Router()
router.get("/home",(req,res)=>{res.send("home")
})
router.get("/list",(req,res)=>{res.send("list")
})
module.exports=router

index.js主入口

// 路由中间件
const express = require(`express`);
const app = express();
// 导入express
const IndexRouter=require(`./indexRouter`)
// 引入我们写好的路由级中间件
// 应用级别中间件
app.use(function(req,res,next){console.log("验证token")next()
})
// 访问/开头，匹配我们路由级别的中间件
app.use("/",IndexRouter)
app.listen(5200, () => {console.log("Server start");
});

在这里插入图片描述
上面可以分模块定义和引入使用，但是会遇到我们没有定义的中间件，那么接下来我们看下错误处理中间件
在这里插入图片描述

✨3.错误处理中间件

错误处理中间件和其他中间件定义类似，只是要使用 4 个参数，而不是 3 个，其签名如下： (err, req,res, next)。


app.use(function(err, req, res, next) {console.error(err.stack)res.status(500).send('Something broke!')// status返回的状态码
})

在这里插入图片描述

✨4.内置的中间件

express.static 是 Express 唯一内置的中间件。它基于 serve-static，负责在 Express 应用中提托管静态资源。每个应用可有多个静态目录。

app.use(express.static('public'))
app.use(express.static('uploads'))
app.use(express.static('files'))
✨5.第三方中间件

安装所需功能的 node 模块，并在应用中加载，可以在应用级加载，也可以在路由级加载。下面的例子安装并加载了一个解析 cookie 的中间件： cookie-parser

npm install cookie-parser

var express = require('express')
var app = express()
var cookieParser = require('cookie-parser')
// 加载用于解析 cookie 的中间件
app.use(cookieParser())

⭐️4. Express–获取请求参数

接下来，我们学习一下如何前端传来的GET或POST传来的参数

✨1.get
req.query

那么我们写个路由，尝试一下

router.get("/login",(req,res)=>{// req.query 获取前端get请求发过来的参数console.log(req.query)res.send('login-success')
})

在游览器访问一下
http://localhost:5200/login?name=chujian&password=123456
在这里插入图片描述
也可以通过游览器插件FeHelper或者Postman测试
在这里插入图片描述

✨2.post
app.use(express.urlencoded({extended:false}))
app.use(express.json())
req.body

那我们写个路由尝试一下,需要注意我们要引入express内置的一个中间件

//配置解析post参数的中间件--不用下载第三方，内置
app.use(express.urlencoded({extended:false}))//解析post参数-username=chujian&password=123456这种格式的
app.use(express.json())//解析post参数-{username:"chujian",password:123456}这种格式的

入口文件index.js

// 路由中间件
const express = require(`express`);
const app = express();
// 导入express
const IndexRouter=require(`./indexRouter`)
// 引入我们写好的路由级中间件//配置解析post参数的中间件--不用下载第三方，内置
app.use(express.urlencoded({extended:false}))//解析post参数-username=chujian&password=123456这种格式的
app.use(express.json())//解析post参数-{username:"chujian",password:123456}这种格式的
app.use("/",IndexRouter)app.use( (req, res)=> {                           res.status(500).send('Something broke!')// status返回的状态码
})
app.listen(5200, () => {console.log("Server start");
});

路由文件indexRouter.js

const express = require(`express`);
// 导入express
const router=express.Router()
const app = express();
// 路由级别--响应前端的get请求
router.get("/login",(req,res)=>{// req.query 获取前端get请求发过来的参数console.log(req.query)res.send('login-success')
})
// 路由级别--响应前端的post请求
router.post("/login",(req,res)=>{console.log(req.body)//必须配置好中间件res.send({ok:true})
})
module.exports=router

这次使用游览器插件发送
query格式
在这里插入图片描述
body格式
在这里插入图片描述

⭐️5. Express-- 托管静态文件

通过 Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS、JavaScript 文件等。
将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。
例如，假设在 public 目录放置了图片、CSS 和 JavaScript 文件，你就可以：

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

文件结构
在这里插入图片描述

现在，public 目录下面的文件就可以访问了。
public 下面新建俩个静态html文件
home.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>home--html</h1>
</body>
</html>

list.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>list--html</h1>
</body>
</html>

index.js配置静态资源

// 路由中间件
const express = require(`express`);
const app = express();
// 导入express
const IndexRouter=require(`./indexRouter`)
// 引入我们写好的路由级中间件app.use(express.static('public'))  // 配置静态资源
app.use(express.static('static'))  // 配置静态资源
//配置解析post参数的中间件--不用下载第三方，内置
app.use(express.urlencoded({extended:false}))//解析post参数-username=chujian&password=123456这种格式的
app.use(express.json())//解析post参数-{username:"chujian",password:123456}这种格式的app.use("/",IndexRouter)app.use( (req, res)=> {                           res.status(500).send('Something broke!')// status返回的状态码
})app.listen(5200, () => {console.log("Server start");
});

通过http://localhost:5200/静态资源文件名访问
http://localhost:5200/home.html
在这里插入图片描述
咱们在配置一个staic文件夹

app.use(express.static('static'))  // 配置静态资源

在static新建一个login.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>login--html</h1>
</body>
</html>

http://localhost:5200/login.html也是可以访问的
在这里插入图片描述

所有文件的路径都是相对于存放目录的，因此，存放静态文件的目录名不会出现在 URL 中

如果你的静态资源存放在多个目录下面，你可以多次调用 express.static 中间件：

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

如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟（virtual）”目录（即目录根本不存在）下面，可以通过为静态资源目录指定一个挂载路径的方式来实现，如下所示：

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

现在，你就可以通过带有 “/static” 前缀的地址来访问 public 目录下面的文件了。

http://localhost:5200/static/login.html
在这里插入图片描述

📌持续更新中

✒️总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/138997.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

特斯拉pre-test （Go）

特斯拉pre-test （Go）

特斯拉pre-test &#xff08;Go&#xff09; 1 Q12 Q23 Q3 1 Q1 原文&#xff1a; You are given an implementation of a function Solution that, given a positive integer N, prints to standard output another integer, which was formed by reversing a decimal repres…
阅读更多...
PCLVisualizer显示点云的深层用法

PCLVisualizer显示点云的深层用法

以下代码均是在QT中使用QVTKOpenGLNativeWidget的简单教程以及案例-CSDN博客文章的基础上&#xff0c;修改按钮对应的槽函数中的程序。 1.显示文件中点云颜色属性信息&#xff0c;利用PointCloudColorHandlerRGBField得到每个点云对应的颜色。 pcl::PointCloud<pcl::PointX…
阅读更多...
【Spring Cloud】网关Gateway的请求过滤工厂RequestRateLimiterGatewayFilterFactory

【Spring Cloud】网关Gateway的请求过滤工厂RequestRateLimiterGatewayFilterFactory

概念 关于微服务网关Gateway中有几十种过滤工厂&#xff0c;这一篇博文记录的是关于请求限流过滤工厂&#xff0c;也就是标题中的RequestRateLimiterGatewayFilterFactory。这个路由过滤工厂是用来判断当前请求是否应该被处理&#xff0c;如果不会被处理就会返回HTTP状态码为42…
阅读更多...
Ruby和面向对象技术

Ruby和面向对象技术

Ruby和许多极为流行的编程语言都是面向对象的。多数的面向对象编程语言&#xff0c;每个对象都是一个样例或者既定类的实例以及独立对象的行为。 一、创建一个通用对象 创建一个通用对象 obj Object.new定义通用对象的行为 def obj.talk puts "I am an object"p…
阅读更多...
分享一份适合练手的软件测试实战项目

分享一份适合练手的软件测试实战项目

最近&#xff0c;不少读者托我找一个能实际练手的测试项目。开始&#xff0c;我觉得这是很简单的一件事&#xff0c;但当我付诸行动时&#xff0c;却发现&#xff0c;要找到一个对新手友好的练手项目&#xff0c;着实困难。 我翻了不下一百个web网页&#xff0c;包括之前推荐练…
阅读更多...
Pytorch从零开始实战05

Pytorch从零开始实战05

Pytorch从零开始实战——运动鞋识别 本系列来源于365天深度学习训练营 原作者K同学 文章目录 Pytorch从零开始实战——运动鞋识别环境准备数据集模型选择数据可视化模型预测总结 环境准备 本文基于Jupyter notebook&#xff0c;使用Python3.8&#xff0c;Pytorch2.0.1cu118…
阅读更多...
点击切换播放图片

点击切换播放图片

<template><!-- banner组件 --><div class"wrap-box"><div class"image-container"><img :src"currentImage" alt"Image"></div><div class"controls"><div class"btn&q…
阅读更多...
元宇宙虚拟展览馆，感受虚拟世界不一样的展览体验

元宇宙虚拟展览馆，感受虚拟世界不一样的展览体验

引言&#xff1a; 随着科技的迅猛发展&#xff0c;元宇宙概念逐渐进入了大众的视野。不同于传统展览馆&#xff0c;元宇宙虚拟展览馆为人们提供了一个虚拟的展示空间&#xff0c;打破了时空的限制。 一、什么是元宇宙虚拟展览馆&#xff1f; 元宇宙虚拟展览馆是一种结合了虚拟…
阅读更多...
【学习笔记】RabbitMQ02：交换机，以及结合springboot快速开始

【学习笔记】RabbitMQ02：交换机，以及结合springboot快速开始

参考资料 RabbitMQ官方网站RabbitMQ官方文档噼咔噼咔-动力节点教程 文章目录 四、RabbitMQ &#xff1a;Exchange 交换机4.1 交换机类型4.2 扇形交换机 Fanout Exchange4.2.1 概念4.2.1 实例&#xff1a;生产者4.2.1.1 添加起步依赖4.2.1.2 配置文件4.2.1.3 JavaBean进行配置4.…
阅读更多...
A股风格因子看板 (2023.10 第05期)

A股风格因子看板 (2023.10 第05期)

该因子看板跟踪A股风格因子&#xff0c;该因子主要解释沪深两市的市场收益、刻画市场风格趋势的系列风格因子&#xff0c;用以分析市场风格切换、组合风格暴露等。 今日为该因子跟踪第05期&#xff0c;指数组合数据截止日2023-09-30&#xff0c;要点如下 近1年A股风格因子检验统…
阅读更多...
小程序框架

小程序框架

目录 一.什么是小程序框架 二.视图层 先建立四个包 数据绑定 条件渲染 ​编辑 使用模板 事件系统 所有a.js 输出结果 ​编辑 三.跳转 a页面跳b页面 ​编辑 a页面跳c页面 测试结果 四.生命周期 一级跳一级 一级跳二级 二级跳二级 页面隔代跳转 一.什么是小程…
阅读更多...
钢铁异常分类140篇Trans 学习笔记 小陈读paper

钢铁异常分类140篇Trans 学习笔记 小陈读paper

钢铁异常分类 对比学习 比较好用 1.首先&#xff0c;为每个实例生成一对样本&#xff0c; 来自同一实例的样本被认为是正例&#xff0c; 来自不同实例的样本被认为是负例。 2.其次&#xff0c;这些样本被馈送到编码器以获得嵌入。 3.在对比损失[16]的影响下&#xff0c; …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023