Express.js 入门指南

@w猫南北

已于 2024-06-29 20:21:14 修改

阅读量843

点赞数 20

文章标签： express javascript 开发语言

于 2024-06-29 20:16:01 首次发布

本文链接：https://blog.csdn.net/qq_54435297/article/details/140068007

版权

Express.js 是Node.js平台上的一个轻量级、灵活的web应用框架，它允许你快速搭建功能丰富的web服务器和API，是对原生模块http的封装和扩展，简化和方便使用

1. 初始化项目

首先，确保你已安装Node.js。接着，通过npm初始化项目并安装Express：

# 使用npm初始化项目，快速创建package.json文件并默认接受所有默认设置
npm init -y

# 安装Express.js
npm install express

2.初步体验expree

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

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

app.listen(3000,()=>{
  console.log("Server is running on port 3000");
})

3.路由的使用

app.get('/show',(req,res)=>{
  res.send("当路由为/show时展示");
})

4.获取请求参数

1.获取路由参数

路由参数是动态的URL部分，它们允许你捕获URL中特定部分的值，并在处理请求时使用这些值。在Express中，你可以通过在路由路径中使用冒号（:）加参数名来定义路由参数。下面是一个包含路由参数的例子：

app.get('/show/:id',(req,res)=>{
  let id = req.params.id; // 获取路由参数:id的值
  res.send(`当路由为/show/${id}时，展示ID为${id}的内容`);
})

实例：item.jd.com/100037199931.html

某东根据路由参数获取对应的商品

2.获取查询字符串参数

app.get('/search', (req, res) => {
  let query = req.query.q; // 获取查询字符串参数q的值
  res.send(`您搜索的关键词是: ${query}`);
});

3. 获取POST请求体中的参数

对于POST、PUT等请求，通常在请求体中发送数据。为了获取这些数据，你需要先使用中间件来解析请求体。最常用的中间件是express.json()（用于JSON数据）和express.urlencoded()（用于表单数据）：

const express = require('express');
const app = express();
//解决跨域问题，允许其他端口访问 ，需要先下载cors => npm i cors
const cors = require('cors');
app.use(cors());
// 使用中间件解析JSON和urlencoded数据
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.post('/login', (req, res) => {
  let username = req.body.username; // 获取POST请求体中的username字段
  let password = req.body.password; // 获取POST请求体中的password字段
  res.send(`提交的用户名为: ${username}, 密码为保密`);
});

app.listen(3000,()=>{
  console.log("Server is running on port 3000");
})

在html中使用axios测试

<!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>
  <span class="show"></span>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    
    axios({
      url:'http://127.0.0.1:3000/login',
      method:'POST',
      data:{
        username:'admin',
        password:'123456'
      }
    }).then(res=>{
      document.querySelector('.show').innerHTML = res.data

    })
  </script>
</body>
</html>

5.express各种响应

1.文本响应

res.send(`提交的用户名为: ${username}, 密码为保密`);

2.JSON响应（常用）

app.post('/profile', (req, res) => {
  let userProfile = {
    name: "张三",
    age: 25,
    email: "zhangsan@example.com"
  };
  res.json(userProfile);
});

3.文件响应

app.get('/download/image.png', (req, res) => {
  const filePath = __dirname + '/public/images/image.png';
  res.sendFile(filePath);
});

4.设置状态码

app.post('/register', (req, res) => {
  // 假设注册成功
  res.status(201).send('用户注册成功');
});

5.重定向

app.get('/redirect-me', (req, res) => {
  res.redirect('https://www.example.com');
});

6.设置自定义响应头

app.get('/custom-header', (req, res) => {
  res.set('Content-Type', 'text/plain');
  res.send('这是一个纯文本响应');
});

6.express中间件

Express中间件是构成Express应用的核心组件，它们是位于请求响应生命周期中特定位置的函数，可以访问请求对象（req）、响应对象（res）以及请求-响应周期中的下一个中间件函数（通常称为next）。中间件提供了一种机制，允许开发者在请求到达最终处理程序之前执行某些操作，比如验证、日志记录、响应处理等。

类似aop，vue的前置守卫，过滤器

1.中间件的基本使用

//定义中间件，本质就是一个回调函数
function middleware(req, res, next) {
  // 执行一些操作...
  console.log('请求正在处理中...');

  // 调用next()表示当前中间件处理完毕，传递控制权给下一个中间件
  next();
}
//使用自定义中间件
app.use(middleware)


// 或者使用第三方中间件，如cors ,记得npm下载后使用
const cors = require('cors');
app.use(cors());

2.路由中间件

绑定到特定路由，只对匹配该路径的请求生效。

use()的是全局中间件，每个路由都先经过

//定义中间件
function mylog(req, res, next) {
  console.log(req.method, req.url);
  next();
}
// 其他路由不会经过mylog中间件
app.post('/login',mylog, (req, res) => {
  let username = req.body.username; // 获取POST请求体中的username字段
  let password = req.body.password; // 获取POST请求体中的password字段
  res.send(`提交的用户名为: ${username}, 密码为保密`);
});

3.静态资源中间件

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

// 假设你的静态资源位于public目录下
app.use(express.static('public'));
// 自定义静态资源路径
// 你也可以为静态资源路径提供一个挂载路径，这意味着静态资源将不是从根路径而是从指定的路径开始提供服务。
// app.use('/static', express.static('public'));
// 现在，public目录下的style.css文件将通过http://yourdomain.com/static/style.css访问。

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

通过对应的url资源地址访问，在html页面直接写img/test.png,服务会自行拼接协议域名和端口

这样就可以请求需要的图片视频等静态资源

7.防盗链

在Express应用中防止盗链（Hotlinking）主要是通过检查HTTP请求头中的Referer（也写作Referer，但标准拼写是Referer）字段来实现的。盗链是指其他网站直接链接到你的服务器上的资源（如图片、视频等），而不通过你的网页访问。

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

// 防盗链中间件
const checkReferrer = (allowedDomains = []) => {
  return function(req, res, next) {
    const referer = req.headers.referer || req.headers.referrer; // 处理referrer的不同拼写
    if (!referer) {
      // 如果没有Referer头，也可以视为非法请求或直接放行，根据需求决定
      return res.status(403).send('No Referer header found.');
    }

    const isAllowed = allowedDomains.some(domain => referer.startsWith(domain));
    if (!isAllowed) {
      return res.status(403).send('Unauthorized access to resource.');
    }
    next();
  };
};

// 允许的域名列表，可以是你的网站或其他信任的源
const allowedDomains = ['http://127.0.0.1', 'https://111111111.com'];

// 应用防盗链中间件到静态资源路由
app.use(checkReferrer(allowedDomains), express.static('public'));

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

8.路由模块化

就是将路由的代码单独一个文件夹，组件化，方便维护

新建一个文件

const express = require('express');
//
const router = express.Router();

router.get('/', (req, res) => {
  res.send('Hello, this is the home page!');
});
router.get('/1', (req, res) => {
  res.send('Hello, this is the home page!');
});
router.get('/2', (req, res) => {
  res.send('Hello, this is the home page!');
});

// 导出router模块，使其可在Express应用的其他部分被引入和使用
module.exports = router;

主文件引用

// main application file
const express = require('express');
const app = express();
const indexRouter = require('./routes/index'); // 引入路由模块


// 使用路由模块  第一个参数为前缀,即每个indexRouter里面的路由都要加上/index
app.use('/index', indexRouter);

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

9.模板引擎的使用(EJS)

模板引擎是分离用户界面和业务数据的一种技术

将html代码和数据分离，也就是前后端不分离开发使用。。。

不写了，前后端不分离的项目，估计应该也许碰不到了，碰到了再说

10.express-generator工具

express-generator是Express官方提供的命令行工具，用于快速生成Express应用的基本骨架结构，包括路由、视图、公共文件夹等。它帮助开发者快速启动项目，而无需手动创建和配置所有基础文件和目录。

下载 => npm i express-generator

当你使用express-generator创建了一个项目后，项目的package.json文件通常会包含一个脚本来便捷地启动应用

"scripts": {
  "start": "node./bin/www"
}

cd到根目录，node start启动项目

注意:记得一键下载依赖包 => npm i

11.文件上传（formidable）

1.下载formidable => npm i formidable

// 导入Express模块
var express = require('express');

// 导入CORS中间件，用于处理跨域请求
const cors = require('cors');

// 创建Express应用实例
const app = express();

// 导入Node.js内置的文件系统模块，用于操作文件
const fs = require('fs');

// 导入Node.js的路径模块，用于处理路径相关操作
const path = require('path');

// 导入formidable模块，用于解析表单数据，特别是文件上传
const formidable = require('formidable');

// 使用CORS中间件，允许跨域请求
app.use(cors());

// 设置主页路由，响应一个简单的文本消息
app.get('/', function(req, res, next) {
  res.send("hehe");
});

// 设置文件上传路由
app.post('/upload', function(req, res, next) {
  // 创建formidable的IncomingForm实例，配置上传目录和保持文件扩展名
  const form = new formidable.IncomingForm({
    uploadDir: path.join(__dirname, '/public/img'), // 指定上传文件保存的目录
    keepExtensions: true, // 保留文件的扩展名
  });

  // 解析请求中的表单数据
  form.parse(req, (err, fields, files) => {
    if (err) {
      // 如果解析过程中发生错误，调用next将错误传递给错误处理中间件
      next(err);
      return;
    }
    // 构建文件访问的URL路径，假设服务器公开了/public目录
    const image_url = `/img/${files.file[0].newFilename}`;
    // 将文件的访问URL响应给客户端
    res.send(image_url);
  });
});

// 启动服务器，监听3000端口
app.listen(3000, () => {
  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:3000/upload" enctype="multipart/form-data">
    <!-- 表单提交方式为POST，提交的目标地址是本地3000端口的/upload路径，enctype设置为multipart/form-data以支持文件上传 -->
    <!-- 文件上传输入框 -->
    <label>
      <!-- 输入框类型为文件，name属性设置为"file"，同样便于后端处理 -->
      <input type="file" name="file">
    </label><br><br>
    
    <!-- 提交按钮 -->
    <button type="submit">Upload</button>
    <!-- 点击此按钮会触发表单提交 -->
  </form>
   </form>
</body>
</html>

结果

文件被上传到指定文件夹并记录了地址，方便读取再次使用