Express学习笔记

已于 2024-04-15 12:57:28 修改
阅读量601 收藏 17
点赞数 24
文章标签： express 学习 笔记
于 2024-03-14 22:46:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64436232/article/details/136713335
版权

目录

简介

初识express

express路由

关键组成部分

请求方法

请求路径

回调函数

示例

获取报文参数

获取路由参数

路由参数练习

express设置响应

express中间件

作用

类型

全局中间件

路由中间件

静态资源中间件

获取请求体数据

路由模块化

模板引擎

ejs模板引擎

基本工作原理

安装

初体验

express框架使用ejs

express-generator

安装

 

简介

Express 是一个基于 Node.js 的开源 Web 应用程序框架，用于简化和加速基于 Node.js 的 Web 开发流程。通俗点说：是封装好的工具包，封装了很多功能。express的作用和Node.js内置的HTTP模块类似，便于我们用来创建Web服务器。

中文网：Express 中文网 (nodejs.cn)

初识express

由于express是一个包，可以通过npm安装。

// 导包
const express = require('express')
// 创建 Express 应用实例
const app = express()
// 路由
app.get('/',(req,res)=>{
    res.end('learn express')
})
// 监听端口
app.listen(9000,()=>{
    console.log('启动服务')
})

在浏览器中输入http://127.0.0.1：9000，输出learn express

express路由

Express 路由是 Express 框架中用于处理 HTTP 请求的核心部分。在 Express 中，路由指的是将客户端发起的不同类型的 HTTP 请求（如 GET、POST、PUT、DELETE 等）与特定的 URL 路径关联起来，并将它们映射到相应的处理函数上。这种映射关系使得服务器能够根据收到的请求类型和 URL 决定应该执行哪些操作或返回什么内容给客户端。

关键组成部分

请求方法

指 HTTP 协议中定义的各种操作类型，比如 GET（获取资源）、POST（新建资源或提交数据）、PUT（更新资源）、DELETE（删除资源）、PATCH（部分更新资源）等。在 Express 中，可以通过 app.method() 来指定请求的方法，如 app.get()、app.post() 等。

请求路径

指客户端发出请求所指向的服务器端的资源地址。它可以是一个静态路径（如 /users）或者带有动态参数的路径（如 /users/:id）。在后者中，:id 是一个占位符，可以捕获实际请求中的值。

回调函数

负责处理请求，并生成响应。它通常接受两个参数：request（req）对象和 response（res）对象，这两个对象包含了请求和响应相关的各种信息和方法，用于读取请求数据、设置响应头、发送响应内容等。

示例

// 导包
const express = require('express')
// 创建 Express 应用实例
const app = express()
// 路由
app.get('/user',(req,res)=>{
    // 服务器明确告知客户端响应体采用的编码方式
    res.setHeader('Content-Type', 'text/html; charset=utf-8');
    // 浏览器输入http://127.0.0.1:9000/user  ===> user 路由
    res.end('user 路由')
})

app.get('/hello',(req,res)=>{
    res.setHeader('Content-Type', 'text/html; charset=utf-8');
    // 浏览器输入http://127.0.0.1:9000/  ===> hello 路由
    res.end('hello 路由')
})

app.post('/reg',(req,res)=>{
    res.setHeader('Content-Type', 'text/html; charset=utf-8');
    res.end('post 请求')
})

//匹配所有方法
/* 
app.all('/test',(req,res)=>{
     res.setHeader('Content-Type', 'text/html; charset=utf-8');
     res.end('post 请求')
})
*/

// 监听端口
app.listen(9000,()=>{
    console.log('启动服务')
})
<!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>
    <form method="post" action="http://127.0.0.1:9000/reg">
        <button>点击</button>
    </form>
</body>
</html>

关于post请求，这里新建一个html文件，在form标签中的action属性设置为http://127.0.0.1:9000/reg，当点击<点击>按钮时候，会向http://127.0.0.1:9000/reg发送post请求，页面跳转至http://127.0.0.1:9000/reg网页并且输出post请求。

获取报文参数

兼容原生操作

// 导包
const express = require('express')
// 创建 Express 应用实例
const app = express()
// 路由
app.get('/user',(req,res)=>{
    //http://127.0.0.1:9000/user?a=2&b=3
    console.log(req.path)           // 获取路径        /user
    console.log(req.query)          // 获取查询字符串  { a: '2', b: '3' }
    console.log(req.ip)             // 获取ip         ::ffff:127.0.0.1
    console.log(req.get('host'))    //获取请求头（host）       127.0.0.1:9000
    res.end('yyy')
})
// 监听端口
app.listen(9000,()=>{
    console.log('启动服务')
})

获取路由参数

// 导包
const express = require('express')
// 创建 Express 应用实例
const app = express()
// 路由
app.get('/:id',(req,res)=>{
    // 获取URL路由参数
    // http://127.0.0.1:9000/aaa
    console.log(req.params.id)   // aaa
    res.end('yyy')
})
// 监听端口
app.listen(9000,()=>{
    console.log('启动服务')
})

:id 是一个路由参数，它的特点是用冒号 (:) 包围，表明它是一个动态部分，可以匹配任何字符串。当客户端向服务器发送 GET 请求至 / 路径后面跟任意字符串（例如 /aaa）时，这个路由就会被触发。

路由参数练习

/*
const  products1 = require('./products.json')
{
    products: [
      { id: 1, name: 'Product A', price: 19.99 },
      { id: 2, name: 'Product B', price: 29.99 },
      { id: 3, name: 'Product C', price: 39.99 }
    ]
}

const {products} = require('./products.json')
[
  { id: 1, name: 'Product A', price: 19.99 },
  { id: 2, name: 'Product B', price: 29.99 },
  { id: 3, name: 'Product C', price: 39.99 }
]
*/

// 导包
const express = require('express')
const {products} = require('./products.json')
// 创建 Express 应用实例
const app = express()
// 路由
app.get('/product/:id',(req,res)=>{
    let {id} = req.params
    let result = products.find(item=>{
        if(item.id === Number(id))
        {
            return true;
        }
    })
    res.end(`
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{
            color: red;
        }
    </style>
</head>
<body>
    <h2>${result.id}</h2>
    <h2>${result.name}</h2>
    <h2>${result.price}</h2>
</body>
</html>
    `)
})
// 监听端口
app.listen(9000,()=>{
    console.log('启动服务')
})

products.js数据如下：

{
    "products": [
      {
        "id": 1,
        "name": "Product A",
        "price": 19.99
      },
      {
        "id": 2,
        "name": "Product B",
        "price": 29.99
      },
      {
        "id": 3,
        "name": "Product C",
        "price": 39.99
      }
    ]
  }

浏览器访问：http://127.0.0.1:9000/product/2 随着products/后的参数改变，会在页面呈现不同数据。

express设置响应

// 导包
const express = require('express')
// 创建 Express 应用实例
const app = express()
// 路由
app.get('/user',(req,res)=>{
    // res.status(200)
    // res.set('aa','bb')
    // res.send('Express')
    // res.status(200).set('aaa','bbb').send('express')

    //跳转响应
    //res.redirect('https://www.baidu.com')
    //下载响应
    //res.download(__dirname+'./products.json')
    //json响应
    res.json({
        name:'李四',
        age:10
    })
})
// 监听端口
app.listen(9000,()=>{
    console.log('启动服务')
})

express中间件

Express 中间件是 Express 框架中的一个重要组成部分，它是一种处理函数，能够参与到 HTTP 请求-响应生命周期的各个阶段。在请求到达最终的目的路由处理器之前，中间件函数有机会预先处理请求，或者在请求结束后进行后处理，还可以完全终止请求-响应循环并直接向客户端发送响应。

作用

使用函数封装公共操作，简化代码。

类型

全局组件件、路由中间件

全局中间件

// 导入 express
const express = require('express');
const fs = require('fs');
const path = require('path');
// 创建应用对象
const app = express();
// 声明中间件函数
function recordMiddleware(req, res, next){
// 获取 url 和 ip
  let {url, ip} = req;
  fs.appendFileSync(path.resolve(__dirname, './access.log'), `${url}  ${ip}\r\n`);
  // 调用 next
  next();
}
// 使用中间件函数
app.use(recordMiddleware);
// 创建路由
app.get('/home', (req, res) => {
  res.send('首页');
});
app.get('/admin', (req, res) => {
  res.send('用户页');
});
app.all('*',(req, res) => {
  res.send('<h1>404 Not Found</h1>')
})
//监听端口, 启动服务
app.listen(9000, () => {
  console.log('服务已经启动')
})

access.log中的数据：

/admin  ::ffff:127.0.0.1

/admin  ::ffff:127.0.0.1

/home  ::ffff:127.0.0.1

/text  ::ffff:127.0.0.1

路由中间件

const express = require('express');
const app = express();
app.get('/home', (req, res) => {
  res.send('首页');
});
let checkCodeMiddleware = (req, res, next) => {
  //判断 URL 中是否 code 参数等于 520
  if(req.query.code === '520'){
    next();
  }else{
    res.send('错误');
  }
}
app.get('/admin', checkCodeMiddleware, (req, res) => {
  res.send('用户');
});
app.get('/setting', checkCodeMiddleware, (req, res) => {
  res.send('设置页面');
});
app.all('*',(req, res) => {
  res.send('<h1>404 Not Found</h1>')
})
//监听端口, 启动服务
app.listen(9000, () => {
  console.log('服务已经启动, 端口 3000 正在监听中....')
})

静态资源中间件

Express 静态资源中间件主要用于提供静态文件服务，也就是将服务器上的某个目录作为静态资源目录，允许客户端通过HTTP请求直接访问这些静态文件，如HTML、CSS、JavaScript、图片等。在Express中，这个功能由内置的 express.static 中间件实现。使用 express.static 方法可以轻松地为应用程序设置静态文件目录

public/index.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>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <h1>test</h1>
</body>
</html>

public/css/index.css

h1{
    color: red;
}
const express = require('express');
const app = express();
app.get('/', (req, res) => {
  res.send('首页');
});
// 静态资源中间件设置
app.use(express.static(__dirname + '/public'));
app.listen(9000, () => {
  console.log('服务已经启动, 端口 3000 正在监听中....')
})

浏览器：http://127.0.0.1:9000/index.html，index.html中的内容就会在网页显示出来。

浏览器：http://127.0.0.1:9000/css/index.css，内容如下：

0ae47f7d9d8946f1b115aee6032097ef.png

除了响应文件内容之外，这个中间件还自动帮我们设置资源的mime类型：

获取请求体数据

在 Express 框架中，要获取 POST、PUT 等请求的请求体数据，需要借助额外的中间件，因为 Express 本身并未提供内置的请求体解析功能。最常用的中间件是 body-parser，它已经被广泛应用于处理 JSON、URL-encoded 表单数据等。

const express = require('express');
const bodyParser = require('body-parser')
const app = express();

// 解析 JSON 格式的请求体的中间件
// const jsonParser = bodyParser.json()

//创建一个解析器，用于解析 application/x-www-form-urlencoded 格式的请求体
const urlencodedParser = bodyParser.urlencoded({ extended: false })

app.get('/login', (req, res) => {
  res.sendFile(__dirname + '/10.html');
});

app.post('/login', urlencodedParser, (req, res) => {
  console.log(req.body);
  res.send('获取用户的数据')
});

app.listen(9000, () => {
  console.log('server is running...');
})
<form action="http://127.0.0.1:9000/login" method="POST">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password">
  
    <button type="submit">Login</button>
  </form>

当输入账号密码后，[Object: null prototype] { username: 'hhhhhh', password: '123456' }

路由模块化

const router = require('../router/router')
const express = require('express')
const app = express()
app.use(router)
app.listen(9000,()=>{
    console.log('启动')
})
const express = require('express')
const router = express.Router()
router.get('/user',(req,res)=>{
    res.end('route module')
})

router.get('/search',(req,res)=>{
    res.end('route search')
})

module.exports = router

模板引擎

实现了视图（用户界面）和业务逻辑的分离，增强了代码的可维护性和复用性。

ejs模板引擎

官网：https://ejs.co/

EJS（Embedded JavaScript）是一种轻量级的模板引擎，用于将JavaScript代码嵌入到HTML中，从而实现动态地生成HTML内容。EJS的主要用途是在服务器端通过合并预先定义的模板文件和数据对象来创建最终的HTML响应，这些响应随后会被发送到用户的浏览器上。EJS模板语法允许开发人员在HTML模板中使用JavaScript表达式、控制流语句（如条件判断、循环）和其他JavaScript功能来操纵和展示数据。在Node.js环境尤其是与Express框架配合时，EJS非常流行，因为它可以让开发者以简单直观的方

基本工作原理

使用<% %>包裹JavaScript代码；
使用<%= %>输出JavaScript表达式的值，即自动转义后输出到HTML；
还有一些其他高级特性，例如局部变量定义、包含其他模板文件等。

安装

npm i ejs --save

初体验

const ejs = require('ejs');
const fs = require('fs');

let bb = '宝贝';
let str = `我爱你 ${bb}`
console.log(str)   // 我爱你宝贝

let china = '中国'
let resule = ejs.render('我爱你<%= china %>',{china:china})
console.log(resule)  //我爱你中国

将下面内容单独放在01.html文件中

我爱你 <%= china %>
const ejs = require('ejs');
const fs = require('fs');

let str = fs.readFileSync('./01.html').toString()
let china = '中国'
let resule = ejs.render(str,{china:china})
console.log(resule)  //我爱你中国

可以在01.html文件中添加HtML标签等等操作

express框架使用ejs

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

// 导入 path
const path = require('path');

// 创建应用对象
const app = express();

// 设置模板引擎
app.set('view engine', 'ejs');   // 除了ejs之外，还有很多模板引擎

// 设置模板文件存放位置   模板文件: 具有模板语法内容的文件
app.set('views', path.resolve(__dirname, './views'));

//创建路由
app.get('/home', (req, res) => {
  // res.render('模板的文件名', '数据');
  let title = '天天向上';
  res.render('user', {title});
  // 创建模板文件，在views所在的文件夹中 user.ejs
});

//监听端口, 启动服务
app.listen(3000, () => {
  console.log('服务已经启动, 端口 3000 正在监听中....')
})

express-generator

能够帮助开发者快速初始化一个新的Express应用程序结构，生成一个基础的项目目录结构，包括基本的文件和目录，如app.js（主入口文件）、routes目录、public和views目录等。使用这个工具，开发者不必从零开始搭建整个项目的文件体系，节省了时间和精力。

安装

npm install -g express-generator

添加ejs模板引擎（后面可以跟项目文件夹）

express -e

接着可以安装依赖

npm i

运行：参考package.json中的scripts属性

2d68684387b649609ba786602cb94a25.png

npm start

 

Li-477233969
关注
  • 24
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node 之 Express 学习笔记 第二篇 Express 4x 骨架详解
12-24
Node 之 Express 学习笔记 第二篇 Express 4x 骨架详解
express学习笔记
m0_56983341的博客
10-28 323
express学习笔记
nodejs+express学习笔记
蓝枫秋千的踩坑记录
04-11 625
nodejs express
express学习笔记3 - 三大件
weixin_41013537的博客
08-01 718
引入router并且使用。接下来我们测试我们写的处理404的中间件。(也可以随便输入一个路由地址来测试)刷新页面，如果出现下面说明成功了。
express学习笔记1 - 框架搭建
weixin_41013537的博客
08-01 320
【代码】express学习笔记1 - 框架搭建。
express学习笔记5 - 自定义路由异常处理中间件
weixin_41013537的博客
08-01 1676
完整代码 创建 utils/constant：（为了方便后期统一维护，单独拉出来定义） 然后刷新http://localhost:8000/user 这就完成了
express学习笔记8 - 文件上传 下载以及预览
weixin_41013537的博客
08-16 519
4、用postman进行测试 （如果返回下面的内容 说明上传成功）2、新建配置文件(utils/multerConfig)1、 安装multer (任意选其中一种)3、新建文件(router/upload)
express学习笔记2 - 三大件概念
weixin_41013537的博客
08-01 646
中间件是一个函数，在请求和响应周期中被顺序调用（：提示：中间件需要在响应结束前被调用）应用如何响应请求的一种规则。下节课我们开始写代码。
Node.js Express学习笔记
m0_46632148的博客
12-07 309
笔记
express学习笔记记录
bluefish_flying的博客
09-11 228
1 创建一个文件 mkdir myapp cd myapp 2 安装express $ npm install express --save 3 创建一个你默认的执行的index.js或者是app.js 然后添加代码 var express = require('express'); var app = express(); app.get('/', fun
Labview SignalExpress学习笔记
04-01
Labview SignalExpress学习笔记 Labview SE主要用于对于波形的采集，生成，分析，比较，记录，导入，导出数据。通过一个步骤就可以进行设计与实际波形的比较。
express+mongodb笔记
04-18
express+mongodb学习笔记保存
nodejs学习笔记之路由
10-20
因为只是用于本地服务器用于自己测试用，所以不需要太完善的路由功能，所以也就不去使用express框架，而是自己实现一个简易路由，可以针对自己的需求来定制路由功能。
express.js初学者要点学习笔记.doc
10-12
express.js初学者要点学习笔记.doc
DP读书：鲲鹏处理器 架构与编程（六）PCI Express 总线
DarrenPig的博客
08-16 1995
PCI Express总线的拓扑发现是指通过一定的协议和机制，在系统中识别和确定PCI Express设备的连接关系和数据传输路径的过程。根据不同的事务类型，事务层会产生不同类型的TLP报文，并根据不同的路由方式进行数据转发。总之，PCI Express总线中的另一个重要组件是PCI Express桥，它的作用是将PCI Express总线连接到其他类型的总线或设备，从而形成一个更大的网络。通过以上步骤，可以获取PCI Express总线的拓扑结构，包括设备的连接关系、设备的配置信息和数据传输路径等。
FME学习之旅---day27
最新发布
summer_corner的博客
05-17 194
我们付出一些成本，时间的或者其他，最终总能收获一些什么。
使用多实例学习进行乳腺癌组织病理学图像分类和定位
qq_47896523的博客
05-16 1092
乳腺癌是女性最主要的死亡原因，病理学家根据病理切片中观察到的各种视觉特征（例如细胞核的形态特征、细胞核的微观和宏观结构等）做出决定。计算机辅助诊断（CAD）系统可以帮助病理学家自动做出决策。卷积神经网络是最广泛使用的深度学习框架，用于学习图像类别之间的复杂判别特征。多年来，VGG16 [3] 和 ResNet18 [4] 等各种 CNN 架构在海量 ImageNet 数据集上产生了出色的结果。CNN 被用于医学图像以产生最先进的结果。为图像中存在的所有类别提供了定位信息。
微信小程序学习（第八章作业）
weixin_74181724的博客
05-13 572
留言板是一款能实现浏览留言、发表留言、删除留言和编辑留言的小程序，用户能够浏览当前的已留言内容，并且能按照时间的升序来查看最新的留言内容;能够发表自己的留言内容，在留言发表页填写相关项后即可发表，并能查看到新留言内容;能够删除不需要的留言;能够修改留言内容。因此，简单留言板的功能主要为显示留言、发表留言删除留言和编辑留言。
node.js学习笔记
04-28
以下是学习Node.js的一些笔记： 1. 安装Node.js：首先需要安装Node.js，可以去官网下载对应的安装包，安装过程中需要注意选择合适的安装路径和配置环境变量。 2. Node.js的基本语法：学习Node.js的第一步是了解它...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值