Express 模块

已于 2025-05-19 11:17:51 修改
阅读量635 收藏 9
点赞数 21
分类专栏： Node.js 前端 移动端 文章标签： express
于 2025-02-19 00:51:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1053765496/article/details/145716443
版权

目录

安装 Express

Express 的请求和响应对象

创建一个 Express 服务器

创建一个 GET 方式的接口

创建一个 POST 方式的接口

接口返回 void

统一处理异常

跨域请求（CORS）

日志中间件

Express 路由

模板引擎 EJS

Express 是一个灵活且广泛使用的 Node.js Web 应用框架，简化了 Web 应用和 API 的开发。它提供了一系列强大的功能和工具，帮助开发者处理请求、路由、模板渲染、会话管理等常见的 Web 开发任务。

安装 Express

npm install express

Express 的请求和响应对象

req

  • req.query 用于获取 URL 中的查询参数（也就是 URL 中 ? 后面的部分）。示例 URL：http://localhost:3000/test?name=Tom&age=25
  • req.body 用于获取请求体中的数据。一般用于 POST、PUT 或 PATCH 请求。
  • req.params 用于获取 URL 中路径部分的参数。示例 URL：http://localhost:3000/user/123，获取方式：req.params.id 将返回 "123"

res

  • res.send() 用于发送响应数据。它可以处理多种数据类型，包括字符串、对象、数组和 Buffer。它会自动推断数据类型设置响应的 Content-Type。
  • res.json() 是专门用于发送 JSON 数据的方法。它将传入的对象或数组自动转换为 JSON 字符串，并设置 Content-Type 为 application/json。
  • res.status() 用于设置响应的 HTTP 状态码。可以与其他响应方法结合使用，例如 res.status().send() 或 res.status().json()。
  • res.redirect() 用于重定向客户端到另一个 URL。它接受 URL 地址作为参数，浏览器会自动向新的 URL 发送请求。
    • 重定向到一个新的 URL：res.redirect("http://example.com");
    • 重定向到相对 URL：res.redirect("/new-page");
    • 设置重定向状态码（默认是 302）：res.redirect(301, "/new-page");
  • res.render() 用来渲染视图（模板）。接收视图名称和渲染数据。

创建一个 Express 服务器

// 引入 Express
import express from 'express';

// 创建一个 Express 应用
const app = express();

// 启动服务器，监听 3000 端口
app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

// 示例：设置路由处理 GET 请求
app.get('/', (req, res) => {
    res.send('Hello, Express!');
});

创建一个 GET 方式的接口

创建一个GET请求方式的接口，接收参数，返回结果

// app.get
app.get('/test', (req, res) => {
    const { name, age } = req.query;  // 接收 name、age 参数
    console.log({ name, age });
    // 发送响应
    res.send({ name, age });  // 将参数返回给客户端
});

创建一个 POST 方式的接口

全局中间件：会作用于所有的接口。

请求头：Content-Type: application/x-www-form-urlencoded

全局中间件的方式

import express from 'express';

const app = express();

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

// 全局中间件：用于解析 x-www-form-urlencoded 格式的请求体，全局中间件，表示所有接口都可以使用 x-www-form-urlencoded 方式接收参数
app.use(express.urlencoded({ extended: true }));
// app.use(express.json());     // json 格式的参数

// 创建一个 POST 请求的路由
app.post('/test', (req, res) => {
    const { name, age } = req.body;  // 从请求体中提取参数
    res.send({ name, age });         // 接口返回数据
});

非全局中间件的方式

import express from 'express';

const app = express();

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

// 创建一个 POST 请求的路由，接收 application/x-www-form-urlencoded 格式的参数
app.post('/test', express.urlencoded({ extended: true }), (req, res) => {
    const { name, age } = req.body;  // 从请求体中提取参数
    res.send({ name, age });         // 接口返回数据
});

请求头：Content-Type: application/json

import express from 'express';

const app = express();

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

// 全局中间件：用于解析 application/json 格式的请求体
// app.use(express.json());

// 创建一个 POST 请求的路由，接收 application/json 格式的参数
app.post('/test', express.json(), (req, res) => {
    const { name, age } = req.body;  // 从请求体中提取参数
    res.send({ name, age });         // 接口返回数据
});

请求头：Content-Type: multipart/form-data

安装中间件 multer

npm install multer

单文件上传

import express from 'express';
import multer from 'multer';
import fs from 'fs';

const app = express();

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

// 确保目标目录存在，如果不存在则创建它
const uploadDir = 'D:\\aaa\\bbb';
if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir, { recursive: true });  // 如果目录不存在，创建它
}

// 设置 multer 存储配置（可以设置存储目录和文件名）
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, uploadDir);   // 上传的文件存储目录
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' + file.originalname);  // 给文件重命名
    }
});

// 初始化 multer 实例，并限制上传的单个文件大小（可选）
const upload = multer({ storage: storage, limits: { fileSize: 10 * 1024 * 1024 } });  // 限制文件大小为 10MB

// 创建 POST 路由，接收 multipart/form-data 格式的数据，upload.single('file') 的 file 是参数名
app.post('/test', upload.single('file'), (req, res) => {
    // req.file 包含上传的文件信息
    if (req.file) {
        res.send(`上传文件成功: ${req.file.filename}`);
    } else {
        res.send('没有文件上传');
    }
});

多文件上传

import express from 'express';
import multer from 'multer';
import fs from 'fs';

const app = express();

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

// 确保目标目录存在，如果不存在则创建它
const uploadDir = 'D:\\aaa\\bbb';
if (!fs.existsSync(uploadDir)) {
    fs.mkdirSync(uploadDir, { recursive: true });  // 如果目录不存在，创建它
}

// 设置 multer 存储配置（可以设置存储目录和文件名）
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        cb(null, uploadDir);   // 上传的文件存储目录
    },
    filename: (req, file, cb) => {
        cb(null, Date.now() + '-' + file.originalname);  // 给文件重命名
    }
});

// 初始化 multer 实例，并限制上传的单个文件大小（可选）
const upload = multer({ storage: storage, limits: { fileSize: 10 * 1024 * 1024 } });  // 限制文件大小为 10MB

// 创建 POST 路由，接收 multipart/form-data 格式的数据，upload.array('files', 10) 的 files 是参数名，10是一次最多上传10个文件
app.post('/test', upload.array('files', 10), (req, res) => {
    // req.file 包含上传的文件信息
    if (req.files && req.files.length > 0) {
        res.send(`上传文件成功 ${req.files.length} 个文件`);
    } else {
        res.send('没有文件上传');
    }
});

接口返回 void

import express from 'express';

const app = express();

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

app.get('/test', (req, res) => {
    const { name, age } = req.query;
    console.log({ name }, { age });

    // 仅返回一个空响应，状态码为 200 (OK)
    res.status(200).end();  // 使用 .end() 来结束请求响应
});

统一处理异常

异常处理中间件必须放在所有路由和其他中间件之后，因为它捕捉的是在请求处理过程中出现的错误。

import express from 'express';

const app = express();

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

app.get('/test', (req, res) => {
    throw new Error("test.error...");
});

app.post('/test2', (req, res) => {
    throw new Error("test2.error...");
});

// 错误处理中间件
app.use((err, req, res, next) => {
    console.error(err.stack);  // 打印错误的堆栈信息，帮助调试

    // 设置状态码并返回错误消息和错误的url
    res.status(500).send({ error: err.message, url: req.originalUrl });
});

跨域请求（CORS）

npm install cors
import express from 'express';
import cors from 'cors';

const app = express();

app.use(cors());  // 允许所有来源的跨域请求

app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

日志中间件

在控制台打印日志格式。选项如下：

  • combined：127.0.0.1 - - [10/Oct/2023:14:33:42 +0000] "GET / HTTP/1.1" 200 2326
  • common：127.0.0.1 - - [10/Oct/2023:14:33:42 +0000] "GET / HTTP/1.1" 200
  • dev：GET / 200 15ms
  • short：GET / 200 15ms
  • tiny：GET / 200 15ms
npm install morgan
import express from 'express';
import morgan from 'morgan';

const app = express();

app.use(morgan('combined'));  // 使用 "combined" 格式记录日志

app.listen(3000);

app.get('/test', (req, res) => {
    res.send("test");
});

Express 路由

服务器启动入口文件 和 接口文件分开

启动服务器文件 app.ts

// app.ts
import express from "express";
import router from './test';
// import router2 from './test2';    // 如果有多个就写多个

// 创建一个 Express 应用
const app = express();

// 挂载使用 router 中间件
app.use(router);
// app.use('/api', router);    // api 是接口前缀

// 监听端口
app.listen(3000, () => {
    console.log('Server running on http://localhost:3000');
});

接口文件

// test.ts
import express from "express";
const router = express.Router();    // 路由对象

// 测试接口
router.get('/', (req, res) => {
    res.send('index')
})

// 导出路由对象
export default router;

模板引擎 EJS

EJS（Embedded JavaScript）是一种模板引擎，它允许在 HTML 文件中嵌入 JavaScript 代码，以便动态生成 HTML 内容。EJS 文件通常有 .ejs 扩展名，主要用于在服务器端（如 Node.js）渲染动态的 HTML 页面。（类比 Java 使用的 JSP）。

npm install ejs

1. HTML 文件使用 EJS 模板引擎。后缀名.ejs。例如：index.ejs

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

<body>
    <h1>Users</h1>
    <ul>
        <% users.forEach(user=> { %>
            <li>
                <%= user.name %> - <%= user.email %>
            </li>
        <% }) %>
    </ul>
</body>
</html>

<% %>：用来嵌入 JavaScript 代码（如循环、条件判断等），这些代码会在服务器端执行。
<%= %>：用来输出变量的值，它会把值转化为字符串并插入到 HTML 中。

2. 在 Express 中使用 EJS

import express from 'express';
import path from 'path';
import userRoutes from './routes/userRoutes';

const app = express();

// 设置视图引擎为 EJS，参数名称固定写法，不可以随意更改
app.set('view engine', 'ejs');

// 设置视图文件夹位置
app.set('views', path.join(__dirname, 'views'));

// 设置静态文件夹
app.use(express.static(path.join(__dirname, 'public')));

// 启动服务器
const port = 3000;
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}`);
});

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

7 号

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值