express框架知识点

已于 2023-08-17 14:30:40 修改
阅读量478 收藏 1
点赞数 2
分类专栏： node.js 文章标签： express javascript 前端 中间件
于 2023-04-23 23:30:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43551056/article/details/130333035
版权

一、express中间件匹配

中间件(Middleware)，特指业务流程的中间处理环节，表现为回调函数的形式

中间件使用方式：
1.app/router.use( [path] , (req,res,next)=>{} )

  • 匹配路径

2.app/router.methods( [path] , (req,res,next)=>{} )

  • 匹配路径

  • 匹配methods方法：get/post/delete/putt等

匹配流程：

  1. 从上往下在所有中间中依次进行匹配，当匹配到第一个符合要求的中间件时, 那么就会执行这个中间件
  2. 如果当前中间件功能没有结束请求-响应周期(res.end)，则必须调用next()将控制权传递给下一个中间件功能，否则，请求将被挂起
const express = require('express')

const app = express()

// 匹配任意路径和任意方法
// next跳转到下一个中间件
app.use((req, res, next) => {
    console.log(1);
    next()
})

app.use((req, res, next) => {
    console.log(2);
    next()
})

// 匹配/api路径和请求方法get 
// res.json、res.end、res.sendFile 响应内容并且结束中间件的传递
app.get("/api1", (req, res, next) => {
    console.log(3);
    res.json({
        arr: [1, 2, 3]
    })
})

app.get("/api2", (req, res, next) => {
    console.log(4);
    res.end("api2 end!!!")
})

app.listen(81, () => {
    console.log('http://127.0.0.1:81');
})

一个方法可以传入多个回调函数

app.get(
	"/getUserInfo",
	(req, res, next) => {
		console.log("match /home get middleware01");
		next();
	},
	(req, res, next) => {
		console.log("match /home get middleware02");
		next();
	},
	(req, res, next) => {
		console.log("match /home get middleware03");
		next();
	},
	(req, res, next) => {
		console.log("match /home get middleware04");
		res.end("------结束了--------");
	}
);

二、express常用中间件

2.1日志

记录所有的请求日志

//1.下载cors
npm i morgan

const morgan = require("morgan");
const fs = require("fs");

const app = express();

// 记录日志
const writeStream = fs.createWriteStream("./logs/expressServer.log");
app.use(morgan("combined", { stream: writeStream }));

2.2跨域

cors（Cross-Origin Resource Sharing）跨域资源贡献

方式一：服务器端使用cors插件

//1.下载cors
npm i cors

//2.导入中间件
require('cors')

//3.全局中间件
app.use(cors())

方式二：服务器端设置cors

  • 开发环境跨域 webpack-server设置
  • 生产环境跨域 在服务器端设置响应请求头
const express = require('express')

const app = express()

// 跨域
// 设置响应头
app.use((req, res, next) => {
    // res.setHeader 一次设置一个
    // res.header === res.set
    res.header({
        // 允许跨域的域名
        'Access-Control-Allow-Origin': '*',
        // 允许跨域的方法
        'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE',
        // 允许跨域的请求内容的类型
        'Access-Control-Allow-Headers': 'Content-Type'
    })
    next()
})

// ... 其余中间件

app.listen(81, () => {
    console.log('http://127.0.0.1:81');
})

2.3解析不同的请求类型

使用不同的中间件解析不同的参数类型（请求头中Content-Type）：
在这里插入图片描述

2.3.1 query、params、json

在这里插入图片描述

2.3.2 json解析过程

1.将解析逻辑都写到同一个中间件中
在这里插入图片描述
2.将解析body抽取成中间件

const express = require("express");

const app = express();

// 解析body参数
app.use((req, res, next) => {
  if (req.headers["content-type"] === "application/json") {
    let str = "";
    req.on("data", (chunk) => {
      req.body = JSON.parse(chunk.toString());
    });
    req.on("end", () => {
      next();
    });
  } else {
    next();
  }
});

app.post("/login", (req, res, next) => {
  if (req.body.name === "ccc" && req.body.age === 999) {
    res.end("登录成功");
  } else {
    res.end("账号或密码错误");
  }
});

app.listen(81, () => {
  console.log("http://127.0.0.1:81");
});

3.使用内置中间件

const express = require("express");

const app = express();

// 解析body参数
app.use(express.json());

app.post("/login", (req, res, next) => {
  if (req.body.name === "ccc" && req.body.age === 999) {
    res.end("登录成功");
  } else {
    res.end("账号或密码错误");
  }
});

app.listen(81, () => {
  console.log("http://127.0.0.1:81");
});

2.3.3 x-www-form-urlencoded

// 使用中间件
app.use(express.urlencoded({ extended: true }));

2.3.4 formdata

在这里插入图片描述

2.3.5 文件

单文件长传
在这里插入图片描述

const express = require("express");
const multer = require("multer");

const app = express();

// 文件上传
const uploader = multer({
  storage: multer.diskStorage({
    destination(req, file, callback) {
      callback(null, "./uploads");
    },
    filename(req, file, callback) {
      callback(null, Date.now() + "_" + file.originalname);
    },
  }),
});

app.post("/avatar", uploader.single("pic"), (req, res, next) => {
  // 文件对象
  console.log(req.file);
  res.end("上传成功");
});

app.listen(81, () => {
  console.log("http://127.0.0.1:81");
});

多文件上传
在这里插入图片描述

const express = require("express");
const multer = require("multer");

const app = express();

// 文件上传
const uploader = multer({
  storage: multer.diskStorage({
    destination(req, file, callback) {
      callback(null, "./uploads");
    },
    filename(req, file, callback) {
      callback(null, Date.now() + "_" + file.originalname);
    },
  }),
});

app.post("/avatar", uploader.array("photos"), (req, res, next) => {
  // 文件数组对象
  console.log(req.files);
  res.end("上传多个成功");
});

app.listen(81, () => {
  console.log("http://127.0.0.1:81");
});

2.3.6 总结

express.urlencoded({ extended: true })

  • application/x-www-form-urlencoded form表单提交

express.json()

  • application/json json字符串格式

express.raw()

  • application/octet-stream 流类型

express.text()

  • text/plain 纯文本类型

multer().any()

  • multipart/form-data formdata表单

2.4 部署静态资源

node服务器上部署静态资源

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

// 静态资源目录
app.use(express.static(path.resolve(__dirname, './static')))

app.get("/", (req, res, next) => {
    // res.sendFile 响应为文件类型
    res.sendFile(path.resolve(__dirname, './static/test.html'))
})

app.listen(81, () => {
    console.log('http://127.0.0.1:81');
})
  • 有多个资源时，可多次使用static中间件

客户端访问资源
在这里插入图片描述

三、express路由(文件上传为例)

路由，有利于区分出模块

3.1 服务端：expressServer.js

  • express的入口文件，负责处理全局中间件
  • 错误和响应的统一处理
const express = require('express')
const userRouter = require('./userRouter')

const app = express()

// 跨域
// 设置响应头
app.use((req, res, next) => {
    res.header({
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE',
        'Access-Control-Allow-Headers': 'Content-Type'
    })
    next()
})

// user模块
app.use('/user', userRouter)

app.listen(81, () => {
    console.log('http://127.0.0.1:81');
})

3.2 服务端：userRouter.js 模块

  • 在user模块中写user相关的接口
const express = require('express')
const multer = require('multer')

const userRouter = express.Router()

// 1.配置multer
const uploader = multer({
  storage: multer.diskStorage({
    destination(req, file, callback) {
      callback(null, './uploads')
    },
    filename(req, file, callback) {
      callback(null, Date.now() + "_" + file.originalname)
    }
  })
})

// 2. 上传单个文件接口
// multer中间件解析 请求头类型为multipart/form-data（文件类型）
// /user/advatar
userRouter.post('/avatar', uploader.single('avatar'), (req, res) => {
  console.log(req.file);
  res.end('文件上传成功')
})

// 3. 上传多个文件接口
// multer中间件解析 请求头类型为multipart/form-data（文件类型）
// /user/files
userRouter.post('/files', uploader.array('files'), (req, res) => {
  console.log(req.file);
  res.end('文件上传成功')
})

module.exports = userRouter

3.3 客户端

<template>
  <div>
    <div>
      <input type="file" @change="fileChange1">
      <button @click="submitFile1">上传单个文件</button>
    </div>

    <div>
      <input type="file" multiple @change="fileChange2">
      <button @click="submitFile2">上传多个文件</button>
    </div>

  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      // 单个文件
      file: null,

      // 多个文件
      fileArr: []
    }
  },
  created() {

  },
  methods: {

    fileChange1(e) {
      // 获取文件信息
      this.file = e.target.files[0]
    },

    submitFile1() {
      // 文件放在请求体中
      let _form = new FormData()
      _form.append('avatar', this.file)

      // 请求上传文件的接口
      axios.post("http://127.0.0.1:81/user/avatar", _form).then(res => {
        console.log(res);
      })
    },


    fileChange2(e) {
      // 获取文件信息
      this.fileArr = [...e.target.files]
    },

    submitFile2() {
      // 文件放在请求体中
      let _form = new FormData()

      this.fileArr.forEach(file => {
        _form.append('files', file)
      })

      // 请求上传文件的接口
      axios.post("http://127.0.0.1:81/user/files", _form).then(res => {
        console.log(res);
      })
    },
  }
}
</script>
<style lang="less"></style>

四、express错误和响应

在这里插入图片描述

const express = require("express");
const app = express();

// 跨域,设置响应头
app.use((req, res, next) => {
  res.header({
    // 允许跨域的域名
    "Access-Control-Allow-Origin": "*",
    // 允许跨域的方法
    "Access-Control-Allow-Methods": "GET,POST,PUT,DELETE",
    // 允许跨域的请求内容的类型
    "Access-Control-Allow-Headers": "Content-Type",
  });
  next();
});

app.use(express.json());

app.post("/login", (req, res, next) => {
  const { name, password } = req.body;
  if (!name || !password) {
    next(-1001);
  } else if (name !== "ccc" || password !== "123") {
    next(-1002);
  } else {
    res.json({
      code: 0,
      msg: "登录成功",
      token: "xxxxxx",
    });
  }
});

// 统一处理错误的中间件
app.use((errCode, req, res, next) => {
  let msg = "未知错误";
  switch (errCode) {
    case -1001:
      msg = "用户或密码为空";
      break;
    case -1002:
      msg = "用户或密码错误";
      break;
    default:
      break;
  }

  res.json({ code: errCode, msg });
});

app.listen(81, "localhost", () => {
  console.log("http://127.0.0.1:81");
});

五、express使用ejs模板引擎

npm i ejs

在express中定义相关变量

const express = require("express");
const path = require("path");
const app = express();

// 1.设置模板引擎
app.set("view engine", "ejs");

// 2.设置模板文件存放位置
app.set("views", path.resolve(__dirname, "./views"));

app.get("/home", (req, res) => {
  let title = "ejs使用";
  let arr = [1, 2, 3];
  let flag = true;

  res.render("homeView", {
    title,
    arr,
    flag,
  });
});

app.listen(81, "localhost", () => {
  console.log("http://127.0.0.1:81");
});

在homeView.ejs模板文件中渲染出来

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= title %></h1>
    <% if(flag) { %>
    <ul>
      <% for( let i = 0; i < arr.length; i++ ) { %>
      <li><%= arr[i] %></li>
      <% } %>
    </ul>
    <% } else{ %>
    <span>123</span>
    <% } %>
  </body>
</html>

六、express-generator

npm install -g express-generator

创建项目

# -e ejs模板引擎
express -e [项目名称]

七、express执行同步、异步代码

线性模型

在这里插入图片描述

  1. 中间件从上往下依次执行
  2. 匹配到的中间件若没有调用next()，则一直等待响应结果
  3. 执行到res.end() 立即返回响应结果，结束中间件

同步代码

const express = require("express");
const app = express();

let msg = "";
app.use((req, res, next) => {
  console.log("middleware1");
  msg += "aaa";
  next();
  res.end(msg);
});

app.use((req, res, next) => {
  console.log("middleware2");
  msg += "bbb";
  next();
});

app.use((req, res, next) => {
  console.log("middleware3");
  msg += "ccc";
});

app.listen(81, "localhost", () => {
  console.log("http://127.0.0.1:81");
});

终端中打印结果：

http://127.0.0.1:81
middleware1
middleware2
middleware3

客户端中响应结果：

aaabbbccc

异步代码

const express = require("express");
const app = express();

function asyncFoo() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("bbb");
    }, 1000);
  });
}

let msg = "";
app.use((req, res, next) => {
  console.log("middleware1");
  msg += "aaa";
  next();
  res.end(msg);
});

app.use(async (req, res, next) => {
  console.log("middleware2");
  // 异步代码
  const data = await asyncFoo();
  msg += data;
  next();
});

app.use((req, res, next) => {
  console.log("middleware3");
  msg += "ccc";
});

app.listen(81, "localhost", () => {
  console.log("http://127.0.0.1:81");
});

终端中打印结果：

http://127.0.0.1:81
middleware1
middleware2
middleware3

客户端中响应结果：

aaa
蟑螂大道
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
nodejs中express入门和基础知识点学习
10-18
在Node.js环境中，Express框架是一个非常流行的用于构建Web应用的工具，它简化了HTTP服务器的创建和管理。本文将深入讲解Express的基础知识，包括初始化、安装、创建Hello World实例、生成器以及路由。 **初始化** ...
Express框架
就是记笔记用的
04-16 1947
官方定义：路由确定了应用程序如何响应客户端对特定端点的请求中间件（MiddleWare）本质是一个回调函数中间件可以像路由回调一样访问请求对象，响应对象（response）每一个请求到达服务端之后，都会执行全局中间件函数// 记录每个请求的url 与 IP地址 const express = require("express");// 声明中间件函数 function recordMiddleware(req , res , next) {// 获取url,ip let {
【Node.js工程师养成计划】之express框架
最新发布
老电影故事的博客
04-29 1260
【Node.js工程师养成计划】之express框架
Express框架(基础部分、路由和中间件)
weixin_63443072的博客
02-05 2461
一义上来讲，路由就是映射关系。// 定义一个最简单的中间件函数console.log('这是个最简单的中间件函数');// 把流转关系交给下一个中间件或路由next()模拟一个类似于 express.urlencoded 这样的中间件来解析 POST 提交到服务器的表单数据。定中间件监听req的 data事件监听req的end 事件使用querystring模块解析请求体数据将解析出来的数据对象挂载为 req.body将自定义中间件封装为模块// 解析表单数据的中间件。
EXPRESS框架
mantou_riji的博客
07-07 2876
express是一款基于Node.js平台,快速、开放、极简的web开发框架。官网：https://www.expressjs.com.cn/express是node的第三方框架 初始化： 安装： 使用的时候引入即可：之前都是用 向前端页面写数据，但是比较麻烦，一般情况下我们还需定义 ，还需要注意返回的书html片段，页面还是json数据，比较麻烦。 EXPRESS框架直接将这些内容封装成,我们可以直接将数据进行返回，比较方便。 处理路由 固定路由 表示可以匹配 和 路径 是一个占位符 表
express学生信息管理系统（CRUD）.zip
02-20
《Express学生信息管理系统（CRUD）详解》 Express，作为Node.js框架的杰出代表，以其简洁易用的API和强大的功能赢得了广大开发者的...希望这个项目能帮助你更好地理解和应用Express框架，为你的Web开发之路添砖加瓦。
express_tutorial:学习Express框架的简单方法
05-25
总之，Express框架提供了强大的功能，使Node.js开发者能够快速构建Web应用。通过理解和实践以上知识点，你将能轻松上手Express并逐步提升Web开发能力。在`express_tutorial-master`这个压缩包中，你可能会找到更详细...
node.js+express框架代码
04-01
在 "node.js+express框架代码" 的场景中，我们通常会涉及到以下几个关键知识点： 1. **Node.js 基础**：理解事件驱动和非阻塞 I/O 模型是 Node.js 的核心特性。Node.js 使用单线程处理多个请求，通过事件循环机制来...
08【Express框架】详细版 - Express框架简介，中间件， Express请求处理，express-art-template模板引擎.
嘿嘿_哈哈的博客
10-08 1387
Express框架 目标 能够使用Express创建web服务器 能够使用Express处理请求参数 能够使用Express处理静态资源 能够使用中间件处理请求 能够在Express中集成art-template模板引擎 Express框架简介及初体验 Express框架请求处理 express-art-template模板引擎 Express中间件 1. Express框架简介及初体验 1.1 Express框架是什么？ 1）Express是一个基于Nod...
Express框架概述
m0_67401545的博客
09-11 2554
Express是目前流行的基于Node.js运行环境的Web应用程序开发框架，它简洁且灵活，为Web应用程序提供了强大的功能。Express提供了一个轻量级模块，类似于jQuery（封装的工具库），它把Node.js的HTTP模块的功能封装在一个简单易用的接口中，用于扩展HTTP模块的功能，能够轻松地处理服务器的路由、响应、Cookie和HTTP请求的状态。Express的优势：（1）简洁的路由定义方式。（2）简化HTTP请求参数的处理。（3）提供中间件机制控制HTTP请求。
express框架
lxllxl211的博客
04-03 1172
可以使用 app.use0 连续定义多个全局中间件。客户端请求到达服务器之后，会按照中间件。
Express配置post请求的body解析
Coder Ben's Writing
12-11 5806
const app = express();app.post('/api/login', (req, res) => { console.log(req.body); // undefined console.log(req.body['username]); // 报错 console.log(req.body['password']); // 报错 });默认配置的exp
Node.js学习笔记(七)#Express框架
weixin_42214717的博客
12-07 849
Express是基于Node.js平台，快速、开放、极简的 Web 开发框架。简单来说，Express作用与http模块类似，不仅保留了http的基本API，还额外封装了一些新方法，比起http模块开发效率更高。Express也提供了中间件功能，包含内置中间件、第三方中间件以及自定义中间件三种中间件，可用于拦截请求和响应，对请求和响应进行功能扩展。
八、express框架解析
积累
04-19 548
express是一个基于Node.js平台的极简、灵活的WEB应用开发框架。它是一个封装好的工具包，封装了很多功能，便于我们开发WEB应用（HTTP服务）。express 的作用和 Node.js 内置的 http 模块类似，是专门用来创建Web 服务器的。express 的本质：就是一个npm 上的第三方包，提供了快速创建Web 服务器的便捷方法。路由确定了应用程序如何响应客户端对特定端点的请求。
Express 常用中间件 body-parser 实现解析
汉堡请不要欺负面条
08-01 799
一.写在前面 body-parser是非常常用的一个express中间件，作用是对post请求的请求体进行解析。使用非常简单，以下两行代码已经覆盖了大部分的使用场景。 app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); 本文从简单的例子出发，探究body-parser的内部实现。至于...
node.js知识点
09-14
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，用于构建高性能、可扩展的网络应用程序。它允许我们在服务器端使用JavaScript编写和运行代码，并且具有以下重要的知识点： 1. 异步编程：Node.js采用非阻塞I/O模型，通过事件驱动和回调函数实现异步编程。这使得可以处理大量并发请求而不会阻塞应用程序。 2. 模块化：Node.js支持模块化开发，通过模块系统可以将代码分割成小的、可复用的模块。内置的模块系统提供了大量的核心模块，同时也可以使用第三方模块。 3. 事件驱动：Node.js使用事件驱动的架构，通过触发和监听事件来实现异步处理。核心模块`events`提供了事件的处理能力。 4. 文件系统操作：Node.js提供了对文件系统的操作能力，可以读写文件、创建和删除目录等。核心模块`fs`用于处理文件系统相关操作。 5. 网络通信：Node.js可以创建网络服务器和客户端，通过核心模块`http`和`https`实现HTTP和HTTPS协议的通信。 6. 第三方库和框架：Node.js拥有庞大的第三方库和框架生态系统，如Express.js、Koa.js、Socket.io等，可以加速开发过程。 7. 数据库连接：Node.js可以连接各种数据库，如MySQL、MongoDB、PostgreSQL等。通过相应的驱动程序或ORM框架，可以实现与数据库的交互。 8. 安全性：Node.js有一些内置的安全机制，如防止跨站脚本攻击（XSS）和SQL注入攻击。同时也可以使用第三方模块增强安全性。 这些是Node.js的一些重要知识点，希望对你有帮助！如果你还有其他问题，可以继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值